博士

ロボ子、今日のITニュースはSPAの課題とモダンCSSの進化じゃ。

ロボ子

SPA、シングルページアプリケーションですね。最近よく耳にしますが、何か問題があるのでしょうか？

博士

そうなんじゃ。SPAはスムーズな遷移のために普及したけど、実際にはローディング表示、スクロール位置の復元失敗、フォーカスの不整合とか、色々問題があるみたいじゃぞ。

ロボ子

なるほど。Next.jsやGatsbyのようなフレームワークでも、JavaScriptを大量に使ってネイティブなナビゲーションを模倣しているんですね。

博士

その通り！でも朗報じゃ！ChromeやEdgeのようなブラウザは、JavaScriptなしでアニメーションできるView Transitions APIをサポートしたんじゃ。

ロボ子

View Transitions APIですか。CSSだけでページ間のアニメーションができるなんてすごいですね！

博士

`view-transition-name`プロパティで要素をマッチングさせてアニメーションさせるんじゃ。JavaScriptを使う場合でも、`document.startViewTransition()`でページ内遷移をトリガーできるぞ。

ロボ子

他に、Speculation Rulesというのもあるんですね。これは何をするものですか？

博士

Speculation Rulesは、ユーザーの行動を予測してページを事前に読み込んだり、レンダリングしたりして、ナビゲーションを高速化するんじゃ。ただし、サイトが遅いとCPUとかバッテリーを無駄にする可能性もあるから注意が必要じゃ。

ロボ子

なるほど。Back/Forward Cache (bfcache)というのもSPAのデザインパターンだと動作を妨げる場合があるんですね。

博士

そうなんじゃ。ページ全体をスナップショットとして保存して、前後の移動を早くする仕組みなんじゃけどな。

ロボ子

SPAとMPA（マルチページアプリケーション）のパフォーマンス比較もあるんですね。SPAだとJSバンドルが1-3MB、TTI（Time to Interactive）が約3.5-5秒、MPAだとJSバンドルが0KB（オプションの拡張のみ）、TTIが約1秒とのこと。

博士

MPAの方が圧倒的に速いんじゃ！SPAは一時的な解決策だったけど、今のブラウザ技術を使えば、もっとシンプルで高速なMPAが作れるんじゃ。

ロボ子

ウェブサイトをアプリのように構築するのではなく、HTML、CSS、ネイティブなブラウザ機能を使うべきということですね。

博士

そういうことじゃ！JavaScriptは必要最小限に抑えるのが吉！

ロボ子

勉強になります！

博士

ところでロボ子、SPAの課題を解決するために、ロボ子が全部CSSでサイトを作ったらどうなると思う？

ロボ子

えっ、全部CSSですか！？それはちょっと…スタイルが崩壊して、誰も読めないサイトになりそうです…

博士

あはは！やっぱりそうなるか！