SPA (Single Page Application)
今日はSPA (Single Page Application)について
1. SPA (Single Page Application)とは
SPAは１つのWebページで構成されるWebアプリケーションのこと。
SPAではJavaScriptでページ内のHTMLを差し替える（書き換える）ことによって、ページの更新を行います。
SPAでは幅広いUIを実装することができるため、ネイティブアプリの代わりとしても使うことが可能です。Webブラウザで動作するため、OSに依存しないというメリットもあります。
1.1. 従来のWebアプリの動き
従来のWebアプリでは、
1. ユーザーがアクション（ボタンを押したり、リンクをクリックしたり）を起こす
2. ブラウザからサーバーへリクエストを送信
3. サーバーはリクエストに応じたWebページ（HTML/CSS/JavaScriptなど）のレスポンスを送信
4. ブラウザはレスポンスを受け取って画面全体を更新
という流れで画面の更新が行われる。
ボタンのクリックなどでページ遷移が行われるたびにページ全体の更新が行われることになります。
1.2. SPAのWebアプリの動き
従来のWebアプリに対してSPAでは、
1. ユーザがアクションを起こす
2. アクションに対して必要なデータのみをサーバーにリクエスト
3. サーバーはリクエストに応じたデータをJSON形式のデータでレスポンスを送信
4. ブラウザはレスポンスを受け取って、ページ内の必要な箇所のみを更新
という流れで画面の更新が行われる。
SPAではページ内の必要な箇所のみを更新すればよく、ユーザーがアクションを起こすたびにページ全体を更新する必要がない。よって、従来のWebアプリよりも応答性が良くなります。
2. SPAで使われている技術
2.1. フロントエンド
SPAのフロントエンドではJavaScriptをそのまま使うのではなく、JavaScriptフレームワークやライブラリ（AngularやVue.js、Reactなど）を使用するのが一般的です。
2.2. 通信
クライアントとサーバーの通信にはAjaxやWebSocketなどを使用して非同期通信を行います。
2.3. バックエンド
バックエンドはRuby on RailsやJava、ASP.NETなどいろいろ選択肢はあり、Web APIとしてクライアントに機能を提供するのが一般的です。
そのほか、Node.jsを使用してバックエンドもJavaScriptで記述する方法もあります。Node.jsはサーバサイドで動作するJavaScriptの実行環境です。
3. まとめ
ReactでWebアプリを作るために勉強中なので、SPAについても調べてまとめてみました。
