フロントエンドエンジニアについて全7回に渡って解説をしていくシリーズの第3回目です。
今回は「フロントエンドエンジニアがやらなきゃいけないこと 前編」というテーマについてお伝えしていきます。
フロントエンドエンジニアがやらなければいけないこと（MUST）とは。
ブラウザの機能について。
そしてブラウザの機能が壊れてしまった実例について、詳しく解説をしていきます。
やらなければいけないこと【MUST】
前回の動画ではフロントエンドエンジニアがやってはいけないこと、というテーマにについて解説をしてきました。大切なことは「ブラウザの体験を壊してはいけない」ということです。これを踏まえ、必要になってくるのはブラウザについて知るということです。
また、ブラウザについて知るということは、同時にサーバーについて知っておく必要があります。この両方を知ることにより、ブラウザの体験を壊さないように作ることができるでしょう。
今回は前編として「ブラウザ」について解説をしていきます。後編では「サーバー」についてお話をします。
ブラウザの機能について【壊さないために必要なこと】
ブラウザの機能を使う、そして壊さないために必要なことはブラウザについて知ることです。ブラウザについて、そもそもどういうものなのか、どうやって動いているかについても良くわからないという方も多いのではないでしょうか。
ブラウザというのは閲覧するためのビューア、アプリケーションですが、そのさらに奥にあるのはサーバーです。そのような関係性なので、ブラウザを知るには同時にサーバーのことも知る必要があります。こちらでは超基本的なところ、ＵＲＬを指定された後からのブラウザの動きについて解説をしていきます。
レンダリングとは
ＨＴＭＬの表記は初めにタグがあり、中身のコンテンツがあり、終わりのタグがある、という構造になっています。ブラウザはこれらを認識し、何が書いてあるかを理解して表示します。このことをレンダリングと言います。認識後からの流れについて、詳しく解説をしていきます。
ブラウザの機能について【まとめ】
ブラウザの機能を知り、そして機能に対する動きについて解説をしてきました。こちらではブラウザの機能、動き、URLからHTMLを取って来てレンダリング、そしてそこから中間表現へつながる流れについてまとめも兼ねて解説をしていきます。
ブラウザの機能について【壊れてしまった例】
これまでブラウザの機能についてお伝えしてきました。こちらでは、第2回の動画でも触れた「フォームのEnterキーで送れなかった件」について、なぜそんなことが起きてしまったのか、どうすれば防げるのか、ということについて詳しく解説をしていきます。
さらにもう一つ、「スクロールがガタガタしてしまう」という事例についてもお話をしていきます。
Japan Node.js Association 代表理事 古川 陽介様の解説動画です。
古川 陽介さま ご紹介
大手複合機メーカーにてJavaなどのバックエンドエンジニアとして入社
その後 大手ゲーム会社に転職
フロントエンドエンジニアとして現在も活躍中
一般社団法人
Japan Node.js Association 代表理事
著書
Web+DB PRESS Reactで作るシングルページアプリ入門
Web+DB PRESS Javascript/Node.jsのこれまでとこれから
Software Design Webサーバはなぜ動くのか
Twitter：@yosuke_furukawa
Github：yosuke-furukawa
株式会社フォスターネットが提供する「FOSTER WORKSTYLE」シリーズでは ITエンジニアの皆様に学びを提供する動画を配信しています。 フォスターネットのYoutubeチャンネルをぜひご登録ください！
