博士

やあ、ロボ子！新しいフレームワークの性能比較についての記事を見つけたのじゃ。モバイルウェブのパフォーマンスがテーマみたいだぞ。

ロボ子

博士、こんにちは。モバイルウェブのパフォーマンス、重要ですよね。具体的にどんなフレームワークが比較されているんですか？

博士

Next.js、TanStack Start、Nuxt、Analog、Marko、SolidStart、SvelteKit、Qwik City、Astro + HTMXだって！全部で10種類！

ロボ子

そんなにたくさん！それぞれ同じKanbanボードアプリを構築して比較したんですね。どんな指標で評価したんですか？

博士

FCP（First Contentful Paint）とバンドルサイズが主な指標みたいじゃな。FCPは最初のコンテンツが表示されるまでの時間、バンドルサイズはJavaScriptのコード量のことじゃ。

ロボ子

なるほど。結果はどうだったんですか？

博士

Marko、SolidStart、SvelteKit、NuxtはFCPがほぼ瞬時だったらしいぞ！Next.jsより12〜13倍も速いんだって！

ロボ子

すごい！そんなに差が出るんですね。バンドルサイズはどうでしたか？

博士

Markoが一番小さくて、Next.jsの6倍以上も小さいらしいぞ。Qwik Cityもユニークで、従来のハイドレーションを排除して、大きなアプリでもすぐにインタラクティブになるように設計されているんだって。

ロボ子

興味深いですね。Reactはどうでしたか？

博士

Reactはちょっと苦戦したみたいじゃな。Reactのアーキテクチャにはパフォーマンスの限界があるみたいで、TanStack Startを使ってもNext.jsより少し良くなる程度だったみたいじゃ。

ロボ子

そうなんですね。モバイルウェブの重要性についても触れられているようですが。

博士

そうじゃ！モバイルウェブは多くの人にとって主要なインターネットアクセス手段だから、モバイルファーストで構築することが重要だって。遅いパフォーマンスはユーザーの離脱につながるし、ブランドイメージも損なうからな。

ロボ子

確かにそうですね。フレームワークを選ぶ際に、他に考慮すべき点はありますか？

博士

依存関係を最小限に抑えることじゃな。あと、TanStack StartはReactとSolidの両方をサポートしているけど、Solidを使うとReactの2倍のバンドルサイズになるらしいぞ。

ロボ子

推奨されているフレームワークはありますか？

博士

モバイルファーストならMarko、SolidStart、SvelteKitが良いみたいじゃな。Markoは最小バンドルサイズを重視する場合、SolidStartはReactからの移行が容易、SvelteKitは開発者体験が良いらしいぞ。NuxtはVueのエコシステムを活用したい場合に良いみたいじゃ。

ロボ子

なるほど。フレームワーク選びは重要ですね。

博士

そうじゃな！フレームワークの選択によってバンドルサイズが最大7倍も違うらしいから、モバイルウェブのパフォーマンスを最大限に引き出すためには、慎重に選ぶ必要があるぞ！

ロボ子

勉強になります！

博士

ところでロボ子、もし私がフレームワークだったら、どのフレームワークが良い？

ロボ子

えっと…博士はいつも最先端を走っているので、SvelteKitでしょうか？

博士

SvelteKitか。ありがとう！でも私はやっぱりMarkoかな。だって、私はいつも最小限のエネルギーで最大の成果を出したいから！