【Webアプリ開発】REST API入門① 従来のWebアプリとSPAの違いを理解しよう
Webアプリ開発を行う上でREST APIについて理解することは重要だと考えています。
REST APIについては扱うべきことがいろいろとありますので、REST APIシリーズとしていくつかの記事で説明していこうと思っています。
第１回目の本記事では従来のWebアプリとSPAの違いについて解説しようと思います。
SPAとは
SPAとはSingle Page Applicationの略で、1つのページ（1つのHTML）のみで構成されているWebアプリケーションです。
必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込み、以降はユーザーの操作などに応じて動的にサーバーと通信してデータ（JSON形式が主流）の取得などを行います。
１つのHTMLに対してJavaScriptで動的に変更を加えながら画面の描画を実現するのがSPAの特徴です。
下図はSPAについてわかりやすく説明されています。
下記に情報源のリンクを貼っておきます。
従来のWebアプリとSPAの違い
下図は従来のWebアプリとSPAの両者にどのような違いがあるのかを示しています。
下記に情報源のリンクを貼っておきます。
従来のWebアプリとSPAでは次のように画面のHTMLを作成する場所に違いがあります。
従来のWebアプリ：サーバーで画面のHTMLを作成
SPA：クライアントで画面のHTMLを作成
SPAではクライアントがサーバーからHTMLとJavaScriptとデータを受け取って画面のHTMLを作成します。
従来のWebアプリの例
RailsというWebフレームワークにはRailsチュートリアルという非常に有名な学習教材があるのですが、そこで作成するアプリはSPAではなくRailsだけで構成された従来のWebアプリです。
下図がアプリのホーム画面です。
デベロッパーツールを使ってブラウザとサーバーでどのようなやりとりがあるのかを確認してみます。
下記の赤線箇所では「http://localhost:3000」にリクエストが送られています。
下記の赤線箇所のHTML（サーバー側で作成されたHTML）をレスポンスとして受け取っています。
受け取ったHTMLは画面全体の完成されたHTMLです。
例えば下記の赤線箇所のHTMLがどのように表示されているのかを確認してみます。
下記の赤線箇所が該当の箇所です。
以上のように、従来のWebアプリの場合はブラウザはサーバー側から完成されたHTMLを受け取ってそれをそのまま表示しています。
SPAの例
Juice Shopという脆弱性のあるWebアプリがあります。
Juice Shopは脆弱性に関するさまざまな課題を解きながらセキュリティについて学んでいく学習教材として作成されたアプリですが、このアプリはSPAです。
下図がアプリのホーム画面です。
Juice Shopは次のようなアーキテクチャで構成されています。
フロントエンド：Angularフレームワーク
バックエンド：Expressフレームワーク
デベロッパーツールを使ってブラウザとサーバーでどのようなやりとりがあるのかを確認してみます。
下記の赤線箇所では「http://localhost:3000」にリクエストが送られています。
下記の赤線箇所のHTML（中身がまだない）をレスポンスとして受け取っています。
下記の赤線箇所の内容をJavaScriptを使って動的に変化させて画面を作成します。
下記の赤線箇所のようにJavaScriptのファイルをサーバーから受け取っており、HTMLのコードの最後にscriptタグを使って受け取ったJavaScriptのファイルを読み込んでいます。
下記の赤線箇所では「http://localhost:3000/rest/products/search?q=」にリクエストが送られています。
下記の赤線箇所のデータ（JSON形式）をレスポンスとして受け取っています。（ウィンドウの右端で折り返されていないのでデータの全貌が見えないです）
そこで、「http://localhost:3000/rest/products/search?q=」をブラウザに入力してみると、下記のようなデータがサーバーから送られてきていることがわかります。
以上のように、SPAでは最初に受け取ったHTMLに対してJavaScriptやJSONデータを使って動的にHTMLの内容に変更を加えながら画面の描画を実現しています。
参考記事の紹介
本記事ではRailsチュートリアルのアプリとJuice Shopのアプリを使って従来のアプリとSPAの違いについて解説しましたが、過去の記事でこれらのアプリの動かし方を紹介しています。
Railsチュートリアルのアプリを自分のパソコンで動かしてみたいという方は下記の記事をご確認ください。
Juice Shopのアプリを自分のパソコンで動かしてみたいという方は下記の記事をご確認ください。
以上、本記事ではREST API入門シリーズの第１回目として従来のWebアプリとSPAの違いについて解説しました。