まだ静的HTMLで疲弊しているの?

はじめに

• 昨今の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に縛られている必然性はもはや今の時代には無い。
• 現代のコンテンツで動的要素はほぼ不可欠だし、なるべく静的要素のみで表現しようと凝り固まってしまうのは 表現の可能性を狭めてしまっている。