みなさんこんにちは、masa です。今日はコードは出てきませんｗ　たまには Web 業界の考察を書いてみたいと思いテーマを考えた結果、シングルページアプリケーション（以下、ＳＰＡ）について述べてみたいと思います。

突然ですが、私は今後すべての Web はシングルページ化していくと予想しており、またそうなるべきだと思っています。

今さらですが、従来の Web アプリケーションというと、サーバーサイドで生成したページをクライアント（ブラウザ）に投げつけ、あとはブラウザがそれを表示するだけでした。データに更新があればサーバー側でページを更新してブラウザはそのデータをもう一度読み込み直す。これがサーバー同期通信です。

これには一つ、画面のユーザビリティに大きな欠点がありました。何か操作するためにページ更新が起きるため画面がチラついて「待ち」が発生する。これではユーザーに強いストレスを与え、インストール型アプリより確実に”劣った”コンテンツとなってしまう。

ＢｔｏＣ の Web サービスでは ＳＰＡ が増えてきていますが、私がメインとする業務系も ＳＰＡ 化していくことが目標の一つであったりします。

　フロントエンドを”厚く”するメリット・デメリットとは？

メリット
サーバーサイドとフロントエンド双方のやることが住み分けできて処理がスッキリします。サーバーサイドはデータベース処理とコンテンツの置き場に徹して、コンテンツの組み立てをフロントエンドに寄せます。サーバーサイドで”がんばる”ことを絞り込むことでインフラ設計も立てやすくなります。データ処理とコンテンツの分離ですね。

もうひとつ、同じような html ファイルを量産しなくて済みます。がんばってヘッダやフッタを部品化しても、結局 html ファイル数は増えてしまいますよね。一般的な ＳＰＡ ならヘッダ、サイドバー、フッターが固定で、メインコンテンツだけ Ajax で書き換えていけばいいので html コーディング量がグッと減ります。

双方のインターフェースについても心配はいりません。今時のサーバーサイドフレームワークには REST コントローラーが実装されていますので、簡単に JSON などの APIインターフェースが作れます。そしてフロントエンドの JavaScript と JSON等 でデータのやりとりを行うわけです。

デメリット
クライアント側の処理が重くなります。サーバーから JSON でデータをクライアントに投げた後は、コンテンツ処理はすべてクライアントがやります。ＳＰＡ の場合は常に処理が走りますのでその点をケアする必要があります。もうひとつ、ブラウザが古いとせっかく作ったクールな ＳＰＡ も正常に動かない可能性があります。私が「業務系も ＳＰＡ 化していくことが目標」と書いたのはこれが理由です。どんなに優れた UI/UX を作りたくても

「あーうちの会社、 PC 古いんで昔の IE でも動くようなやつお願いしますね」

Web系の人なら一度は食らうであろう「古いIE砲」には敵わないのである (;ﾟдﾟ)

 

　最近気になるフロントエンド技術について

最近 AngularJS を使い始めました。Google のアレです。これをつかって Ajax すれば大抵の ＳＰＡ は作れると思います(｀･д･´)
特にフォームからユーザー入力を input で受け取ってリアルタイム表示するモデル機能、js 内にデータを入れて、リアルタイムに絞りこみ検索できるコントローラー機能は強力です。データを表示する際のフィルター機能も充実していてコンテンツ作りが楽しい。フレームワーク依存症になりそうで怖いですｗ

その他気になるもの
・データをグラフィカルに見える化する D3.js
・Ajax と違いサーバープッシュできる WebSocket

いかがでしたか？今日は雑多な考察ブログでした。
次回は最近よく聞く CSS の開発手法について書いてみたいと思います。