Webページが表示されるまで(と業務の境目)

基本からおさらいしましょう。

Webページが表示されるまで

あなたが今見ているこのページを含めた、Webページはこんな流れで表示されています。(厳密にはもっと細かいと思います)

  1. ユーザがブラウザ(Chrome, IE, Safari等)でURLを指定してWebページをリクエストする。

  2. URLのドメインを元にDNSサーバにIPアドレスを問い合わせ、得られたIPアドレスのWebアプリケーションサーバにHTTPリクエストを行う。

  3. Webアプリケーションサーバ側ではHTTPヘッダ・クエリ文字列といった情報を組み合わせて適切なHTTPレスポンスを生成・返却する。

  4. 返却されたHTTPレスポンスのHTMLをブラウザ側で解析(Parse)し、関連ファイル(JavaScript/CSS/画像類)を取得する。

  5. HTMLと項番4で得られた各種ファイルを元に、ブラウザが適切なWebページを描画(Rendering)する。

  6. ユーザの画面にWebページが表示される。

このうち "項番3" のタイミングでWebアプリケーションサーバ側でHTMLコンテンツの生成をすることをSSR(Server Side Rendering/サーバーサイドレンダリング)と呼びます。元々はSSRが主流でしたが、ブラウザ・利用者側のコンピュータの性能向上に伴って、 "項番5" のタイミングでブラウザ側でJavaScriptを利用してHTMLコンテンツの生成をする事も増えてきました。この仕組みで動くアプリケーションを SPA(Single Page Application/シングルページアプリケーション) と呼びます。

おまけ: Webサーバ vs Webアプリケーションサーバ 似たような単語ですが、それぞれ違う意味で使われます。一般的にWebサーバは、HTML・JS・CSS・画像などの生成済みのファイル(静的ファイルと呼ばれるもの)を返却する用途で利用されます。 それに対してWebアプリケーションサーバはHTTPリクエストの内容に応じて動的にコンテンツを組み替えて返却する機能を持ちます。どのようにコンテンツを組み替えるかはプログラマによってソースコードで指定されます。 WebサーバとWebアプリケーションサーバを単一のプロセスで兼用する場合もありますが、それぞれ分けて利用する場合もあります。 例: Nginx をWebサーバとしてHTTPリクエストをメインで受けつつ、Puma(Railsのデフォルト) をWebアプリケーションサーバとして利用する。

業務の境目

SPAと呼ばれる構成の場合は、Webアプリケーションサーバ側にはAPIサーバとも呼ばれるJSONを返却する機能に特化した実装を行います。その場合はAPIサーバの実装を担当する人をバックエンドエンジニア(裏側 = ユーザに見えない部分の実装をする人)、UI(HTML/CSS/JS)の実装を行う人をフロントエンドエンジニア(表側 = ユーザに見える部分の実装をする人)と分けて呼びます。もっと平たくいえば見た目に関わる部分を担当する人をフロントエンドエンジニアと呼ぶことも多いです。クライアント - サーバ の構成の見た目を担当するという意味では、モバイルアプリ開発者も似た業務になるのですが、そちらはネイティブ(モバイル)アプリエンジニアと呼ばれます。

次のページではフロントエンドエンジニアが主に触る事になるWebページの仕組みをおさらいします。

おまけ

用語集

  • ブラウザ = Webページ・アプリケーションを表示する機能を持ったGUI。

  • DNSサーバ = あるドメイン(例: www.example.com)を、IPアドレス(例: 123.456.78.9)に変換する機能を持つサーバ。メールサーバの情報(MXレコード)などを持ってたりもする。

  • HTTPリクエスト・レスポンス = HTTPと呼ばれるプロトコルに準拠したリクエスト・レスポンス

  • JSON = JavaScript Object Notationの略です。直訳するとJavaScript言語におけるオブジェクト表記法です。サーバ側・クライアント側でのデータのやりとり(主にAPIサーバとのやりとり)の際には、メモリ内に持ってるデータを一旦テキスト形式に変換(serializeとも呼ばれる)する必要があるのですが、その際にJSON形式のテキストになっていれば、JSONに対応したライブラリ経由で解析(parse, deserializeとも呼ばれる)する事が出来ます。

  • SPA = Single Page Application の略です。単一のWebページ(index.html + bundle.js + bundle.css)として提供され、ブラウザのHistory APIの機能を使って擬似的なルーティングを実現したアプリケーション。と定義しておきます。

参考資料

SSRとSPAの描画方式の差によるメリット・デメリットが気になる方はコチラも見てみてください。

前へおさらい次へWebページを構成する要素

最終更新