はじめに
- 昨今のWeb開発、主にRails等で開発していると思われます。
- (別にRailsじゃなくてもいいんですが…)、たとえ管理画面の開発だったとしても、静的HTMLのみで完結するケースは稀。。。
- 動的な表示や処理が発生した段階で、どのJSアーキテクチャを選定するか必要に駆られる…
- 最初から動的表示のアーキテクチャを選択していれば、疲弊することもない。
- 他にも静的HTMLで疲弊してしまうポイントはいくつかある
フレームワークアーキテクチャに縛られ、疲弊してしまう
- 自由なルーティングが組めなくて疲弊してしまう
- モデルの設計に縛られ、疲弊してしまう
- Rails等で、モデル構造から乖離した画面設計をすると疲弊してしまう
- 表示側であればPresenter層、フォーム側であればForm層を導入するなどして凌いでいる
- Rails本来のアーキテクチャからは乖離してしまっている…
ページ読み込みパフォーマンスに囚われ疲弊してしまう
- 静的ページであるがゆえ、全ての情報が取得できなければページは真っ白なまま…
- とても取得に時間が掛かるが、さほど重要度が高くない要素であれば、バックグラウンドで実行し、情報が取得できた段階で表示すればいい。
- とりあえず画面には何かしら出しておいて、Loading表示にする、取得できた部分から表示していく、と言った事も可能
SPAを恐れない / SPAは難しくない
- SPAは難しくない
- 殆どの部分は素のHTMLを書いて、本当に必要な箇所だけ動的にする事が出来る。(React, Vue, Angular等の各フレームワーク)
- ページごとにファイルは分け(
.jsx,.vue等)てしまい、ifで分岐すればOK - 共通部分を部品化する事も出来る。Railsの
layoutsやhelperのような事もたやすく出来る - 大量のAPIを生やす必然性も無く、表示する情報をページ内に直接ハッシュで書き込んでしまえばよい
フレームワークアーキテクチャから開放され、自由にコードを書ける
- **「これRailsだと難しいんですよね。」**問題から解放される
- URLについてケチを付けられても自由に手直しする事が出来る
- React, Vue, AngularJS(← 最近あまり聞かない…) 等を適切に使っていれば無秩序になることもない。(気がする)
アーキテクチャは React か Vue か Angular か
- Angularは最近は余り聞かない…
- 個人的にはReactが好みですが、Vueでも良く、ほぼ “好み” の問題だと思われる
- Reactもコンポーネント分けがうまくないと、カオスになるけど結局慣れな気がする(これについてはまた別途、そのうち書きたい)。
まとめ
- (割と当たり前の事を書いたけど)、GoogleのクローラもSPAを正しく解釈する、と言う話だし、静的HTMLに縛られている必然性はもはや今の時代には無い。
- 現代のコンテンツで動的要素はほぼ不可欠だし、なるべく静的要素のみで表現しようと凝り固まってしまうのは 表現の可能性を狭めてしまっている。