💬

Single Page Application の開発に参加する前に読む記事

3 min read

Single Page Application の開発に参加する前に読む記事

Webアプリケーション開発の経験がない人にとって、React を始めとした Single Page Application (以降 SPA) のシステム構造は複雑怪奇で理解し難いもののようです。

この記事では 初学者向けに 一般的な SPA のシステム構造について解説します。

初歩の初歩: Web のしくみ

Web はクライアントとサーバーから構成されます。

クライアントからサーバーにリクエストを投げて、サーバーからクライアントにレスポンスを返します。

クライアントとサーバー

Web のしくみ - ウェブ開発を学ぶ | MDN より引用

クライアントは 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

ログインするとコメントできます