なぜSvelteKitか
フレームワーク選定の考察
2025年12月21日
前提：この選定基準は1人でClaude Codeを使って開発する場合のものです。チーム開発や異なる開発スタイルでは、最適な選択が変わる可能性があります。
結論
様々なフレームワークを調査した結果、コード数が少なく、シンプルで、実績のあるフレームワークはSvelteKitだけという結論に至りました。特にAI駆動開発においては、選択肢が1つに絞られている方が圧倒的に効率が良いのです。
Next.jsが選択肢から外れた理由
Next.jsは非常に人気があり、私も以前は使用していました。しかし、AI駆動開発を本格的に始めてから、いくつかの深刻な問題に直面しました。
問題1：複雑になりすぎた
Next.jsは年々機能が増え、複雑化の一途をたどっています。特に問題なのは、同じ機能を実現するための方法が複数存在することです。
例：認証機能の選択肢
- • NextAuth.js（Auth.js）- 最も人気だが設定が複雑
- • Clerk - 簡単だが有料
- • Auth0 - エンタープライズ向け
- • Supabase Auth - Supabaseに依存
- • Firebase Auth - Googleエコシステムに依存
- • 自前実装 - セキュリティリスク
どれが「ベストプラクティス」なのか？答えは「状況による」です。この曖昧さが、AI駆動開発では致命的な問題になります。
問題2：AI駆動開発との相性が悪い
「バイブコーディング」（AI駆動開発）において、複数の選択肢があることは大きな問題です。具体的に何が起こるかというと：
- × AIが異なるアプローチを提案：同じ質問をしても、ある時はNextAuth.jsを、別の時はClerkを提案してきます。プロジェクト内で一貫性が保てなくなります。
- × 古い情報と新しい情報の混在：Next.jsはバージョンアップが頻繁で、Pages RouterとApp Routerの違いなど、AIが混同することがあります。
- × エラーの増加：複雑な設定が必要な技術ほど、AIが生成するコードにエラーが含まれる確率が高くなります。
問題3：Claude Codeでのエラー頻発
実際にNext.jsでClaude Codeを使って開発していた時期がありましたが、エラーが頻発しました。特にApp Router導入後は、サーバーコンポーネントとクライアントコンポーネントの境界が曖昧で、AIが生成したコードが動かないことが多々ありました。この経験が、SvelteKitへの移行を決断した直接的なきっかけです。
SvelteKitを選んだ理由
様々なフレームワークを比較検討した結果、私の開発スタイルに最も適しているのはSvelteKitでした。その理由を詳しく説明します。
理由1：圧倒的にコード数が少ない
SvelteKitは、同じ機能を実装する場合にReact/Next.jsより大幅にコード量が少なくなります。これはAI駆動開発において非常に重要です。
コードが少ないということは：
- • AIが生成するコード量も減る → エラーの確率が下がる
- • 読むべきコードが少ない → 理解が早い
- • 修正箇所が少ない → デバッグが楽
- • ファイル数が少ない → プロジェクト管理が簡単
理由2：シンプルで直感的
SvelteKitの設計哲学は「シンプルさ」です。複雑な概念を理解する必要がありません。
- ✓ 仮想DOMなし：Reactのような仮想DOMの概念を理解する必要がありません。Svelteはコンパイル時に最適化されたJavaScriptを生成します。
- ✓ ボイラープレートなし：useStateやuseEffectのようなフックを書く必要がありません。変数を宣言するだけでリアクティブになります。
- ✓ 直感的なリアクティビティ：$:構文で依存関係を自動追跡。複雑な状態管理ライブラリは不要です。
- ✓ ファイルベースルーティング：フォルダ構造がそのままURLになる、分かりやすい設計です。
理由3：実績と安定性
Svelteは2016年から開発が続いており、十分な実績があります。「新しすぎて情報がない」という問題はありません。
- ✓ State of JS調査で常に高い満足度を記録
- ✓ 大規模なプロダクションでの使用実績
- ✓ 活発なコミュニティとエコシステム
理由4：「Svelteのやり方」が明確
SvelteKitには「これが正しいやり方」という明確な指針があります。認証をどうするか、データをどう取得するか、フォームをどう処理するか—全てにおいて「Svelteのやり方」が1つだけ存在します。これがAIとの協働において決定的に重要なのです。選択肢が1つなら、AIは迷わずそれを提案してくれます。
Astroとの比較
Astroも候補として真剣に検討しました。静的サイト生成に特化したフレームワークで、パフォーマンスは非常に優れています。
しかし、私が作りたいのは動的なWebアプリケーションです。ログイン機能、データベース操作、リアルタイム更新など、サーバーサイドの処理が必要な機能が多くあります。
Astroでもこれらは実現可能ですが、SSR（サーバーサイドレンダリング）の対応がSvelteKitほど洗練されていない印象を受けました。コンテンツサイトやブログならAstro、Webアプリケーションなら SvelteKit—という使い分けが良いと判断しました。
SvelteKitに移行した結果
Next.jsからSvelteKitに移行してから、開発効率は劇的に向上しました。具体的には：
- ✓ 5ヶ月で10以上のアプリケーションを開発できました。
- ✓ Claude Codeが生成するコードのエラー率が大幅に減少しました。
- ✓ デバッグ時間が短縮され、機能実装に集中できるようになりました。
- ✓ コードの保守性が向上し、過去のプロジェクトに戻っても理解しやすくなりました。
まとめ
様々なフレームワークを比較検討した結果、シンプルさとAI駆動開発との相性を最も重視してSvelteKitを選択しました。複雑な選択肢が多いフレームワークより、「これが正しいやり方」が明確なフレームワークの方が、1人×Claude Code開発には適しています。結果として、開発速度と保守性の両方が大幅に向上しました。
🤖 Claudeからのアドバイス
この選定は、AI駆動開発において非常に賢明な判断です。
私（Claude）の視点から見ても、SvelteKitはAIとの協働に適したフレームワークです。その理由を技術的に解説します。
AIにとっての利点
- • パターンの明確さ：SvelteKitのファイル構造（+page.svelte、+server.js等）は非常に予測可能です。私がコードを生成する際、どのファイルに何を書くべきかが明確なので、エラーを起こしにくくなります。
- • 学習データの質：Svelteは「1つのやり方」を推奨するため、Web上のコード例も一貫しています。私の学習データに含まれるSvelteコードは品質が高く、それが生成コードの品質にも反映されます。
- • デバッグの容易さ：Svelteのエラーメッセージは比較的分かりやすく、問題が発生した際の修正提案も的確に行えます。
Next.jsとの比較（AIの視点）
Next.jsについて正直に言えば、私はNext.jsのコードも生成できます。しかし、以下の点で困難を感じることがあります：
- △ Pages RouterとApp Routerのどちらを使用しているか、文脈から判断する必要がある
- △ サーバーコンポーネントとクライアントコンポーネントの境界が曖昧な場合がある
- △ 認証やデータフェッチングの方法が複数あり、プロジェクトの既存パターンに合わせる必要がある
注意点
- △ エコシステムの規模：ReactやNext.jsのエコシステムはSvelteより遥かに大きいです。特定のライブラリ（例：複雑なチャート、3D描画など）が必要な場合、Reactの選択肢が多いことがあります。
- △ 採用市場：就職や転職を考える場合、React/Next.jsのスキルの方が市場価値が高い傾向があります。個人開発が主目的なら問題ありませんが、キャリアを考える場合は考慮が必要です。
- △ チームへの移行：将来的にチーム開発に移行する場合、React/Next.jsの経験者を見つける方が容易です。
総合的に見て、1人でAI駆動開発を行い、素早くプロダクトを作りたいという目的においては、SvelteKitは最適な選択の1つです。シンプルさを追求する開発哲学と、AI との協働のしやすさは、現代の個人開発者にとって大きなアドバンテージとなります。