SPAの基本

2018-07-13 12:23:33

 WebアプリをSPA(Single Page Application)で作成するにあたって、必ず必要になるのがJavaScriptです。JavaScriptはクライアント側で動くので、サーバのデータが必要になった場合は、サーバ側のプログラムが必要となります。サーバデータを自分で管理する場合は、そのためのシステムを組む必要があります。

‌ サーバ側は自由に言語が選べます。PHP、Perl、Ruby、Java、Python、C/C++選択は自由です。‌私としてはサーバ側の言語なんて何でも良いのです。今はPHPをメインに使ってますが、ちょっと前まではJavaを使っていました。それより前はC++です。ちなみにこのシステムはC++で作ってあります。

‌ SPAのWebアプリはサーバサイド側のプライオリティが低いのです。一般的なWebシステムはHTMLデータをサーバ側で生成しますが、SPAの場合はクライアントが必要とするデータだけ返せば良いのです。そのデータを元にどんなHTML、DOMを作るかはJavaScriptが行う処理となります。サーバ側の処理は、データベースとのやりとりとセキュリティーの保全です。

‌ Webアプリではローカルで使われるのが前提のアプリと違い、認証情報を管理しなければなりません。そしてその認証情報に基づいて、やりとりするデータに制限を付ける必要があります。そこがサーバ側の肝です。

‌ そしてSPAアプリを作っていく上で面倒になってくるのが、クライアントとサーバのデータのやりとりです。基本はJavaScriptのAjaxを用いて、サーバにデータを要求します。サーバサイドのみでWebアプリを作る場合と比べると、この手続き部分が面倒なのです。

‌ サーバサイドの言語のみなら必要なデータを要求するのは、そのままDBにアクセスして取り出せば終わりです。しかしJavaScriptでデータベースから必要なモノを引っ張り出そうと思ったらその手間が倍増します。

[‌ページ遷移前提]
‌ 1. Formやリンクなどからデータ要求 ‌ 2. サーバ側でパラメータ解析 ‌ 3. サーバ側でDBから必要なデータの取得 ‌ 4. 受け取ったデータを元にHTMLデータを生成し、クライアントに送信

‌[SPAで組む場合]
 ‌1. JavaScriptで情報の要求  2. サーバ側でパラメータ解析  3. サーバ側でDBから必要なデータの取得  ‌4. サーバ側はデータをJavaScriptで適切に受け取れるように変換し送信  ‌5. JavaScriptでデータの受け取る  ‌6. JavaScriptで表示データの生成

 増える手間が二個だけなので倍増しているようには見えません。ところがSPAの4と5の処理をやりとりするデータの種類ごとに書くのは、ソースコードの量が無駄に増えて、とんでもなく手間なのです。

‌ この手間をPHPとJavaScriptで一挙に解決する方法をQiitaに投稿しました。これ、実は結構革新的な技術だと思うのですが、とんでもなく反応が薄かったです。逆に、ギャグで書いたMVCの深淵にイイネがたくさん付きました。ページ遷移しないWebシステムを普及させる道のりは遠いようです。