文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【静的ファイルのみ】クライアントサイドMVCの台頭とstaticサイトの復活【何これ速い】

最近はこのパターンが増えてきてます〜
f:id:treeapps:20180418115102p:plain

静的ページの台頭

最近Backbone.jsやAngular.js等のjavascriptによるクライアントサイドMVCフレームワークが席巻していますね。今までサーバサイド側でやっていた事が、徐々にクライアントサイドに処理が移ってきています。

更に、昔のネットのように、htmlのみで作られたペラペラサイトが復活しようとしています。
理由は簡単。クライアントサイドMVCが台頭したからです。

どうやって静的ファイルのみでサイト作るの?

用意するのは以下です。

  • html
  • css
  • js
  • jpg等の画像

これだけです。
動的コンテンツどうするのって?

できるよ?・・・・・そう、Backbone.jsならね。

ここで登場Backbone.js先生。
Backbone.jsで別サーバからjsonを取得して画面に表示すればよいのです。

極端な話、トップナビ・パンくず・メインメニュー等、全てBackbone.jsで非同期にajaxで取得すれば、超高速に動的コンテンツを生成できます。これはjsp等、サーバサイドを通す手間が省けるうえ、並列リクエストなので処理速度が速いです。

新たな開発体制が生まれる?

今までは、全部1社が開発していたのが、

サーバサイド クライアントサイド
jsonを返すAPIだけを開発する会社 そのapiを使って静的ファイルのみでサイトを作る会社

となってしまう事もありそうです。

これにより以前はサーバサイドの方が開発量が多かった部分が減少し、
代わりにクライアントサイドの開発量が増加します。

サーバサイドは余計な機能が削ぎ落とされ、軽量化・高速化されていき、
削がれた部分が全てクライアントサイドにいきます。

jsp等、サーバサイド側での画面描画が無くなるため、画面描画が高速化されます。

SEOの問題

最大の問題はSEOでしょう。

例えば<title>ですが、jsでtitleを変えても現在のgoogleは認識できません。
仮にBackbone.jsを使ったリッチな検索機能付きの一覧画面を作ったとしても、jsでのtitle書き換えが無意味な以上、検索結果毎にtitleを変える事はできません

仮にpushStateを使って、jsで動的にURLを変えてgoogleにインデックスさせても、title・descriptionが変更できないという致命的な問題が発生します。この場合、google先生によりtitleの書き換えが起きるのでしょうかね・・・

雑感

もしSEOの問題が解決できれば、今後高速なwebページが一気に増えていくかもしれません。
遅い遅いと言われてきたjsですが、asm.jsによってネイティブ並の高速化が実現されてきています。
今後GPUによるハードウェアアクセラレーションも更に進む事が予想され、ますます高速化されていくでしょう。

今後こういったstaticサイトに移行していって、完全に開発の構図が変わってしまうのかもしれませんね。
そうなる前に、今サーバサイド中心に開発している人も、クライアントサイドMVCの勉強をしておきましょう!!