Single Page Application の開発に参加する前に読む記事
Single Page Application の開発に参加する前に読む記事
Webアプリケーション開発の経験がない人にとって、React を始めとした Single Page Application (以降 SPA) のシステム構造は複雑怪奇で理解し難いもののようです。
この記事では 初学者向けに 一般的な SPA のシステム構造について解説します。
初歩の初歩: Web のしくみ
Web はクライアントとサーバーから構成されます。
クライアントからサーバーにリクエストを投げて、サーバーからクライアントにレスポンスを返します。
クライアントは Google Chrome や Firefox といった Webブラウザが主になります。
サーバーは Apache などの Webサーバーになります。
このクライアント・サーバー間でやり取りされる リクエスト と レスポンス を定義したものが HTTP (Hyper Text Transfer Protocol) になります。
一般的なWebアプリケーションの構成
SPA の話をする前に、複数の画面から構成される Webアプリケーションの構成について解説します。
Webサーバーの代表的なものに Apache, NGINX(エンジンエックス) があります。
Webアプリケーションは
- Ruby on Rails (Ruby)
- Laravel (PHP)
- ASP.NET (C#)
など、プログラム言語やプラットフォームごとに様々なフレームワークが存在します。
これらのフレームワークを使用して、Webアプリケーションを構築していきます。
リクエストメソッド
HTTP ではこのリクエスト時に メソッド を指定するように定義されています。(参考: HTTP リクエストメソッド - HTTP | MDN )
Webサーバーから HTML などのファイル (リソース と呼びます) を取得する際は GET を、クライアントからサーバーに入力値などのデータを送信する際は POST を使用します。
静的/動的
Webサーバーはリクエストを受け取ると、指定された URL を元に、Web アプリケーションにリクエストを渡すかどうか判定します。
画像など Web アプリケーションでの処理が必要ないリソースはすぐにクライアントにレスポンスを返します。このようなリソースのことを 静的なリソース といいます。
Web アプリケーションでの処理が必要な場合、Web サーバーから Web アプリケーションにリクエストが渡されます。
Web アプリケーションは必要に応じてデータベースにSQLを投げるなどしてデータを取得・加工し、HTML を生成します。
Web サーバーは Web アプリケーションが生成した HTML をブラウザに返します。
（このとき返される HTML は Web アプリケーションによってレスポンスやデータベースの内容を元に組み立てられたものなので、動的なページ といいます。）
ブラウザは HTML を受け取ると画面全体を再描画します。HTML に画像などのリソースの URL が含まれている場合は、ふたたび Web サーバーにリクエストを行います。
SPA の場合
SPA の場合であっても、構成自体はさほど変わりません。
SPAの取得
まずはブラウザから Web サーバーに対して静的なリソースをリクエストします(図の黒い矢印)。
このときに返される JavaScript は React などのライブラリを使用して作られた SPA の本体部分になります。
初回アクセス時に必要なリソースの多くをダウンロードすることになるため、SPA では初回表示のロード時間が長くなりがちです。
WebAPI
JavaScript の読み込みが完了したら、以降のブラウザとWebサーバーとのやり取りは青い矢印の部分に移ります。
ユーザーからの操作などをトリガーに、ブラウザからWebサーバーに対してリクエストが送られます。
Webアプリケーションではこのリクエストに対してHTMLではなく JSON などのデータをレスポンスとして返します。このような Webアプリケーションのことを WebAPI と呼びます。
ブラウザはレスポンスを受け取ると JavaScript によってページの一部が更新されます。
このように SPA では画面全体ではなく必要な箇所のみを更新することでアプリケーションの機能を提供します。
フロントエンド/バックエンド
Webアプリケーションの開発において
- HTMLやCSS、JavaScript といったブラウザ上で動く部分を フロントエンド
- リクエストを受け取ってデータベースなどを操作してレスポンスを返す部分を バックエンド
というふうに呼びます。
それぞれの領域を専門で扱う人のことを フロントエンド エンジニア、バックエンド エンジニア と呼称することもあります。
一般的なWebアプリケーションでは HTML をレスポンスとして返すことから、バックエンドとフロントエンドは不可分なところがありました。
SPA ではレスポンス (JSON) をどのように表示するかはフロントエンドに任せ、バックエンドはデータの取得・加工を担当する、というふうに役割分担が明確になります。
Webサーバーの役割の分割
SPAの構成図において、黒い矢印の部分と青い矢印の部分は役割が異なります。
黒い矢印の部分は一般的なWebアプリケーションの構成でもあった、静的なリソースを返すWebサーバーです。
青い矢印の部分はSPAと頻繁にやり取りするWebAPIです。
これらは役割が異なるので、大規模なシステムであれば分けて構築します。
それぞれのサーバーが単一の限定された役割を担うように分割しておくと、スケールアウトしやすい柔軟なシステムとなります。
サーバーレス構成
役割を分割し、スケールアウトしやすくした構成の最たるものが サーバーレス と呼ばれるものです。
各サーバーの役割をクラウドサービスに置き換える事で、サーバーを無くしてしまう手法です。
大手クラウドサービスは負荷状況に応じて自動でスケールアウトしてくれるので、突発的にアクセスが集中するような場合に有効な構成です。
Webアプリケーションおよび SPA に関する、非常に基本的な部分について解説しました。
他にWeb開発初心者がつまづきそうな事柄があれば、追記するか別記事を作成したいと思います。
Discussion