JavaScriptを使ったシンプルなSPAの作成例
SPA(Single Page Application)は、Webアプリケーションの一種で、ひとつのHTMLページ内でアプリケーションの状態遷移を行い、必要なデータだけを動的に取得することで、ユーザーがページを再読み込みすることなくアプリケーションを操作できるようにするものです。リクエストごとにHTMLを生成する従来のWebアプリケーションとは異なり、SPAではJavaScriptフレームワークやライブラリを使用し、フロントエンド側でHTML、CSS、JavaScriptを使ってページを構築し、サーバーサイドではAPIを提供することが一般的です。SPAはユーザーの体験を向上させるために、より柔軟でスムーズなユーザーインターフェイスを提供します。
本記事では、クライアント側でJavaScriptを使った、SPAの実装例を紹介します。
なお、本記事のサーバ側はNode.js+Expressで作成しています。
基本的な実装方法
サーバ側
サーバ側ではクライアントからの要求で更新するデータを送付するルーティング(API)を記載します。
クライアント側
JavaScriptのFetch APIを使います。
上記は文字列の送信だけですが、リストのデータなどをサーバから送信することでページの表示を切り替えることが可能です。
参考:jQueryを使った記述方法
各種データ送受信
素のJavaScriptを使って、各種データを送信・受信する方法を紹介します。
サーバ側、基本部分のソースコード
バイナリデータの送信
サーバ側ルーティングメソッド
クライアント
response.blob()
メソッドでレスポンスからバイナリデータを取得します。
GETメソッドにクエリパラメータを送る
サーバ側ルーティングメソッド
クライアント
URLSearchParams
を使うことで、アドレスに直接クエリパラメータを記述しなくても、簡単にパラメータを設定できます。
実行時、サーバ側のログ
オブジェクト(JSON)の送信
サーバ側ルーティングメソッド
クライアント
response.json()
メソッドでレスポンスからJSON形式でオブジェクトを取得します。
クライアント側のログ