Webアプリケーションでブラウザに画面が表示されるまで

Web アプリケーションは、ユーザーからの入力に応じて画面を切り替えることで、特定のタスクに役に立つアプリケーションとして振る舞います。 これまでのレクチャーで、クライアントとサーバー、リクエストとレスポンスという概念を使ってこの挙動を説明してきました。 このレクチャーでは、さらに踏み込んで、Webアプリケーションを利用しているときにブラウザに画面が表示されるプロセスについて説明します。

復習：クライアントとサーバー / リクエストとレスポンス

Web アプリケーションの動作を説明するとき、重要な登場人物は「クライアント」と「サーバー」です。 また、クライアントとサーバの間で「リクエスト」と「レスポンス」が送受信されます。 それぞれの役割について復習しましょう。

サーバー

サーバーは、サービスを提供するコンピューターです。 データベースにアクセスしたり、リクエストに基づいて動的なコンテンツを生成したり、他のサーバーと情報を共有したりします。

クライアント

クライアントはサーバーに対してリクエストを送信し、サーバーからのレスポンスをユーザーが閲覧・操作できる形で表示します。 一般的に、クライアントはユーザーのデバイス上（パソコン、スマートフォンなど）のソフトウェア（ウェブブラウザなど）を指します。 みなさんがパソコンで Facebook にアクセスしているとき、クライアントデバイスはパソコンで、クライアントソフトウェアはウェブブラウザとなります。

クライアント-サーバーモデル

このように、サーバーとクライアントは、リクエストとレスポンスによって情報をやり取りしながら、アプリケーションの機能をユーザーに提供します。 このモデルを、クライアント-サーバーモデルと呼びます。 現代のインターネットアプリケーションの中核となるアーキテクチャです。

ブラウザに画面が表示されるまでのプロセス

クライアントとサーバーについて理解できたので、次は画面が表示されるまでのプロセスを理解しましょう。 ウェブアプリケーションの画面がブラウザに表示されるまでのプロセスはクライアントとサーバーの間のやり取りとして以下のように説明できます：

  1. ユーザーのリクエスト: ユーザーがURLをブラウザに入力したり、リンクをクリックしたりして、ウェブアプリケーションにアクセスします
  2. サーバーの処理: サーバーはリクエストを受け取り、そのリクエストに対するレスポンスを準備します。これはデータベースから情報を取得する、特定の計算を実行する、または他のサーバーにリクエストを送信するなどの操作を含みます。
  3. レスポンスの生成: サーバーは通常、HTML、CSS、JavaScriptなどのウェブ技術を用いたレスポンスを生成します。これらはブラウザが理解できる形式です。
  4. レスポンスの送信: サーバーは生成したレスポンスをクライアントに返答します。
  5. ブラウザのレンダリング: ブラウザは受け取ったレスポンスを解析し、HTML、CSS、JavaScriptを用いてウェブページを描画します。
  6. ユーザーに表示: ブラウザは最終的にレンダリングされたウェブページをユーザーに表示します。

この一連の流れは非常に高速で行われ、多くの場合はユーザーが意識することなく背後で進行します。

Web アプリケーションを作るとは

このプロセスを実現するためには、開発者はクライアントとサーバー側の両方のコードを用意します。

フロントエンド

フロントエンドはユーザーが直接触れる部分で、HTML、CSS、JavaScriptといったテクノロジーが主に使われます。

  • HTML (HyperText Markup Language): HTMLはウェブページの骨組みを作るための言語です。テキストコンテンツ、リンク、画像、ビデオなどの配置を定義します。
  • CSS (Cascading Style Sheets): CSSはウェブページのデザインやスタイルを決定する言語です。文字の色やサイズ、配置、間隔などの視覚的な要素を制御します。
  • JavaScript: JavaScriptはウェブページに動的な要素を追加するための言語です。ユーザーとのインタラクション（例えば、ボタンのクリックやフォームの送信など）を制御したり、ページの一部分を動的に更新したりします。また、フレームワークやライブラリ（React、Vue.js、Angularなど）を使用することで、より効率的に、または高度な機能を実装できます。

バックエンド

バックエンドはサーバーサイドの処理を担当する部分です。この講座では Java を利用しています。 バックエンドのコードはクライアントからのリクエストを処理し、データベースとのやり取り（情報の取得、更新、削除など）や他のサーバーとの通信などを行います。 また、リクエストに対するレスポンスを生成しクライアントに返します。

まとめ：知っていることも大事。作れることも大事。

このレクチャーでは、Web アプリケーションが動作する基本的なプロセスと、それを支えるクライアントとサーバーという2つの主要な要素について説明しました。 また、Web アプリケーションを動作させるためには、フロントエンド、バックエンドでどのような技術を用いて何を作ればいいかについても紹介しました。

イメージしたアプリケーションを作るには、理論と実践の両方が必要です。 仕組みを知ることと実際に作ることを並行して学習していきましょう。