【ITニュース解説】Mapping a Full Stack Application

Webサイトやアプリケーションがどのように機能しているかを理解するためには、その裏側で動いている「フルスタック」と呼ばれる全体の仕組みを知ることが重要である。フルスタックアプリケーションは、ユーザーが直接目にする画面部分である「フロントエンド」と、データの処理や保存といった裏側の機能を受け持つ「バックエンド」が連携することで成り立っている。ここでは、あるWebサイトにアクセスし、ログインして利用するまでの一連の流れを追いながら、各技術要素がどのように連携しているかを解説する。

まず、ユーザーがブラウザのアドレスバーに「example.com」のようなドメイン名を入力してWebサイトにアクセスする場面から始まる。このドメイン名は人間にとっては分かりやすいが、コンピュータはそのままでは通信相手を特定できない。そこで行われるのが「DNSルックアップ」である。DNSは、ドメイン名と、サーバーのインターネット上の住所にあたる「IPアドレス」という数字の羅列を対応付けるデータベースのような役割を担う。ブラウザはDNSサーバーに問い合わせて、目的のドメイン名に対応するIPアドレスを取得する。これにより、ブラウザはどのサーバーに接続すればよいかを把握する。

次に、ブラウザとサーバーの間で安全な通信路を確立するための準備が行われる。これは「TCP/TLSハンドシェイク」と呼ばれる手順である。TCPは、データを正確かつ確実に送受信するための通信ルールであり、まずお互いに通信を開始することを確認し合う。さらに、その通信を暗号化するためにTLSという技術が使われる。TLSは、通信内容を第三者に盗み見られたり、改ざんされたりするのを防ぐ。このTLSによる暗号化通信が確立されているサイトは、URLが「https://」で始まる。この準備が完了すると、ブラウザとサーバーは安全にデータのやり取りができる状態になる。

通信路が確立されると、ブラウザはサーバーに対して「Webページのデータをください」という「HTTPリクエスト」を送信する。サーバー側では、NginxやApacheといったソフトウェアがこのリクエストを受け取り、要求されたWebページを構成するHTML、CSS、JavaScriptといったファイルをまとめて「HTTPレスポンス」としてブラウザに送り返す。ブラウザがこれらのファイルを受け取って解釈し、画面に描画することで、ユーザーはWebサイトを閲覧できるようになる。

多くのアプリケーションには、ユーザーごとに機能を出し分けたりデータを管理したりするためのログイン機能が備わっている。ユーザーがIDとパスワードを入力してログインボタンを押すと、その情報はサーバーに送信される。サーバーは受け取った情報をデータベースに保存されているユーザー情報と照合し、正しければ認証成功となる。このとき、サーバーは認証が成功した証として「JWT（JSON Web Token）」というデジタルのトークンを生成する。JWTには、ユーザーIDなどの情報が含まれており、さらにサーバーだけが持つ秘密鍵によって電子署名が施されている。この署名があるおかげで、トークンが途中で改ざんされていないこと、そして確かにそのサーバーが発行したものであることを検証できる。

生成されたJWTは、サーバーからブラウザに返され、「Cookie」という仕組みを使ってブラウザ内に保存される。Cookieに保存されたデータは、以降そのサイトに対してリクエストを送信する際に、ブラウザによって自動的に添付される。これにより、ユーザーは一度ログインすれば、ページを移動したり、別の操作をしたりするたびにIDとパスワードを再入力する必要がなくなる。サーバーはリクエストに含まれるJWTを都度検証することで、どのユーザーからの要求なのかを判断し、そのユーザーに応じたデータや機能を提供できる。

ログイン後、ユーザーが投稿や情報の閲覧といった操作を行うと、その都度フロントエンドからバックエンドへ「APIコール」という形でリクエストが送信される。このリクエストには、前述の通りCookieに保存されたJWTが必ず含まれている。バックエンド側では、本格的な処理を始める前に、まず「ミドルウェア」と呼ばれるプログラムがリクエストを検査する。特に認証用のミドルウェアは、受け取ったJWTが正当なものか、有効期限が切れていないかなどをチェックし、認証されていないユーザーからのアクセスをブロックする門番の役割を果たす。

認証を通過したリクエストは、URLのパス（例: /api/posts）に応じて、あらかじめ定義されたバックエンドの処理プログラムへと振り分けられる。これを「ルーティング」と呼ぶ。各プログラムは、データベースから必要な情報を読み出したり、新しいデータを書き込んだりする処理を実行する。データベースとのやり取りには、SQLという言語を直接書く代わりに、プログラミング言語でより直感的にデータを操作できる「ORM」という技術がよく用いられる。処理が完了すると、バックエンドは結果のデータをフロントエンドに返し、フロントエンドはそれを受け取って画面表示を更新する。

また、バックエンドはセキュリティを確保するための仕組みも備えている。その一つが「CORS」であり、許可されたドメイン以外からのリクエストを拒否することで、悪意のある外部サイトからアプリケーションが不正に利用されるのを防ぐ。このように、DNS、HTTPS、JWT、Cookie、API、データベース、そして各種セキュリティ機構といった複数の技術要素が連携し、パズルのピースのように組み合わさることで、一つのフルスタックアプリケーションは成り立っている。これらの基本的な仕組みを理解することは、より複雑なシステムを構築するための重要な第一歩となる。