2023年に突入するJavaScriptフレームワーク

未来をのぞくのがワクワクするのは、道がまったくはっきりしていないからです。トレンドや新しいものを見ながら道筋を描いてみることができます。それよりもさらにいいことは、それらの革新の一部になって方向を導くことです。でも、確実なことは何もありません。

2022年はウェブ開発を前進させるための大きなリリースがたくさんありました。AstroとSveltekitの1.0リリースを目にしました。SolidStartとQwikがベータ版に突入しました。React 18がリリースされ、ストリーミングサポートが追加され、これがNextやRemixに取り入れられ、React Server ComponentsとNext 13のアプリディレクトリを動かすことになりました。また、TypeScriptがフレームワークソリューションの設計方法に与えた影響を忘れるわけにはいきません。tRPCやTanstack Routerから、意見の強いNext.jsのメタフレームワークcreate-t3-appまで。

どうやってここまで来たのか

「サーバーに注目しろ」と言われてきた。「シングルページアプリケーションのトレードオフを解決しろ」とも言われてきました。これ自体は新しいことではないのですが、しばしば理解されていないのは、それが万能薬であるわけではないということです。

サーバーサイドレンダリングにより、データを早く取得できるので（通常はデータソースに近い場所で）、ページを早くレンダリングできましたが、妥協点もありました。応答時間が遅くなり、ジャバスクリプトのバンドルサイズが増大する問題を解決しませんでした。実際には、クライアント側でレンダリングするだけでなく、ページをハイドレートするコードも必要だったために、バンドルサイズがさらに大きくなることもありました。

いくつかの部分的な解決策があります：キャッシュをより積極的に行う、HTMLレスポンスをストリーミングする、そしてもっと小さくて速いフレームワークに投資することもできます。しかし、いくつかの誤解を招く解決策もあります：プログレッシブエンハンスメントがハイドレーションの代わりになる、またはクライアントサイドのキャッシュから離れることが計算を意味深く変えると思い込むこともあります。おネタバレすると、そうではありません。

まだみんなが同じページにいるわけではないとは思いますが、この分野の多くの先導者たちが実はあることについては同意しています。これは軽視してはならないことです。

今どこにいるのか

シングルページアプリケーションが全てに最適なアーキテクチャではない。

これが驚くべきことだとは思わないけれども、ここ十年で皆を納得させることが必要です。そしておそらく、わたしはシングルページアプリとは何を意味するのか、もう少し詳しく説明する必要があります。つまり、典型的なJavaScriptクライアントがルーティングしレンダリングするアーキテクチャを指します。サーバーレンダリングを謳っているものであってもそうです。React、Next、RemixからVue、Nuxtに至るまで、SveltekitやSolidStartも含まれます。

これは自然な進化です。素晴らしいUXと素晴らしいDXとの結びつきを提供するソリューションを作り上げ、人々はそれをどこにでも持っていきたがります。その「どこでも」がどこかと言うと、ページの読み込みパフォーマンスが収益に影響を与える場所や、ローエンドなデバイスやネットワークが重要な場所、あるいはその複雑さが正当化されないようなどこかです。

もし2022年のフレームワークの思考指導者の間で最大の一致をまとめるとすれば、それはルーティングがサーバー側に属するということです。

わたしたちはクライアントサイドのルーティングをなくすことを提案しているわけではありません（それも一つの選択肢ですが）。ただ、クライアントがルーティングしてレンダリングするアーキテクチャは、それを効果的に使用できる限界に迫っていると言っているのです。

Marko、Astro、またはFreshとそのインタラクティブな「アイランド」を見るか、またはNextやSolidStartのサーバーコンポーネントを見ると、初期のロード後にナビゲーションに応答して次のページをレンダリングする際に、サーバーがルーティングを担当していることがわかります。さらにQwikは、最適化された部分的にロードされたアプリケーションとして始まり、完全なSPAへと拡張する可能性を秘めているにもかかわらず、その例とデモではすべてサーバールーティング（MPAs）を好んでいます。

2022年を振り返って

ハイドレーションの制覇

サーバーレンダリングが焦点だったので、ハイドレーションが重要なトピックになっていることは驚くにはあたりません。これは、宣言的なJavaScriptフレームワークで作成されたどんなサーバーレンダリングアプリケーションにでも支払うコストです。少なくともそう思われていました。

Qwikと初期のMarko 6の再開可能なデモは、一日ハイドレーションが過去のものとなるかもしれないことを示しました。

ハイブリッドネスティングルーティング

2022年が終わる前に、両方の世界の最良を提供してくれそうな2つの実験的な技術が登場しました。クライアント側のナビゲーションと、事後サーバーレンダリングがペアになっています。Next 13のアプリディレクトリは、ネステッドルーティングとペアになったサーバーコンポーネントを採用しました。

Solidのアプローチについて書いたところ、バンドルサイズの期待をはるかに下回ることができました。

誰もがサーバーコンポーネントを買っているわけではありませんが、最小のSPAフレームワークさえも実現できていないかなり少ないJavaScriptを提供することに議論する余地はありません。別の方法でハイドレーションを劇的に減らす方法は、単純にコードを送らないということです。

あらゆるところにシグナル

シグナルが新しいVDOMだ。

たくさんの興味が湧いている：多くの人が試している。これにより、さまざまな戦略を試し、理解し、最適化することができる。

結局何に落ち着くのかはまだわからないが、この集団的な探求は素晴らしい！

20:41 PM - 2022年9月24日

2022年には細粒度の反応が復活しました。Vueコミュニティは（正しく）それが彼らにとって決して古くなったわけではないと言うでしょう。しかし、過去一年間で、新しいバナー「シグナル」の下で、はるかに広い範囲でそれが進んだのです。Solidのユニークな細粒度レンダラーから、PreactやQwikがそれを使ってバーチャルDOMソリューションを増強するまで。Marko 6のコンパイラは、細粒度の反応がSvelte的な方法でコンパイルできることを示し、Angularチームもこれらの原始要素を追加することが本当に検討されています。

TypeScript駆動開発

2022年には、TypeScriptが多くのメタフレームワークCLIのデフォルトになりました。

クライアントサーバー境界のAPIを型安全にすることにすらもう考慮する余地はありません。tRPCはゲームチェンジャーでしたが、その年の間にJavaScriptメタフレームワークの考慮事項として見かけるようになりました。SolidStartのコンパイルされた型安全なRPCから、RemixやNextのデータローディングメカニズムの改善に至るまで。

Tanstack Routerはタイプセーフルーティングがどのようなものかを示し、もう後戻りはありません。今でもこれらの技術が広がり始めるのを見ていますが、得られる利益は非常に重要で、これらの技術が存在するときに、かつてのような開発方法で満足することはありません。

2023年へ

複雑さの制御

これは新年に向けてもテーマとなり続けるでしょう。短時間にスペースに革新を投入し、何かが与えられることを期待しないでください。AstroやRemixがそれぞれMPAとSPAに戻って「それはただのPHP/Rails

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/this-is-learning/javascript-frameworks-heading-into-2023-nln