同じ気持ちの方はいませんか？ React（またはVue、Angular）で何年もプロダクションコードを書き、依存配列と格闘し、バニラJSライブラリをフレームワーク固有のアダプターでラップし、node_modulesがアプリ本体より重いことに疑問を感じている。そんなとき、Svelte 5のrunes — $state、$derived、$effect — を知って、何かがピンとくる。試してみたいけど、移行の道筋が見えない。
そのギャップを埋めるために作ったのが svelte.cogley.jp です。
svelte.cogley.jp とは
React、Vue、AngularからSvelte 5とSvelteKitへの概念マッピングを、構文だけでなくアーキテクチャレベルで提供するインタラクティブリファレンスです。いわばフロントエンドフレームワークの「ロゼッタストーン」です。ソース言語（React、Vue、Angular）を選び、カテゴリ（概要、構文、アーキテクチャ、エコシステム）を選ぶと、各概念がどう対応するかが一目でわかります。
すべてのマッピングには両側のコード例と、なぜそうなるのかを解説する注釈がついています。また、Svelteにまだ成熟した代替がない領域（ネイティブモバイルなど）についても正直にフラグを立てているので、移行途中で予想外の壁にぶつかるリスクを減らせます。
4つのレンズ
リファレンスは4つのカテゴリに整理されています。移行を検討する開発者が持つ異なる種類の疑問に対応する構成です。
概要（Overview） では、設計思想、移行戦略、基本的なアーキテクチャの違いをカバーします。Svelteがランタイムではなくコンパイラであること、SvelteKitとSvelteの関係がNext.jsとReactの関係と同じであること、そしてインクリメンタルな移行が完全に可能であること — ビッグリライトは不要です。
構文（Syntax） はフレーズブックです。useStateは$stateに、useMemoは$derivedになります。Vueのref()と.valueのアンラップは完全に消えます。Angularの@Input()デコレータは、プレーンな分割代入の$props()になります。各カードにはビフォー・アフターのコード例と、概念的な違いを説明するノートが含まれています。
アーキテクチャ（Architecture） では、構造的なパターンをマッピングします。ファイルベースルーティング、サーバーサイドのデータ読み込み、フォーム処理、ミドルウェア、環境変数。SvelteKitの+page.server.ts / +page.svelte規約を、Next.jsのページ、NuxtのuseFetch、Angularのルートガードやサービスと比較しながら解説します。
エコシステム（Ecosystem） はライブラリマッピング表です。状態管理、データフェッチ、UIコンポーネント、認証、アニメーション、i18n、テスト、チャート — 各行にSvelteの対応ライブラリと成熟度の評価があります。ギャップはバッジカウントで視覚的にフラグが立てられているので、各フレームワークにどれだけの穴があるか一目でわかります。shadcn-svelteがshadcn/uiとほぼ1:1の移植であるような満足のいく答えもあれば、React Nativeに相当するSvelteの選択肢はまだない、という率直な答えもあります。
バイリンガル対応
サイト全体が英語と日本語で動作します。初回訪問時にブラウザのAccept-Languageヘッダーから言語を自動検出し、いつでもEN/JAを切り替えられます。すべての概念名、解説ノート、UIテキストが完全に翻訳済みです。ダーク/ライトテーマにも対応しており、設定は訪問を跨いで保持されます。
ドッグフーディング
サイト自体がSvelteKitで構築され、Cloudflare Workerとしてデプロイされています。Svelte 5のrunes（$state、$derived、$effect）、スコープ付きCSS（Tailwind不使用）、hooks.server.tsによるサーバーサイド言語検出、Phosphorアイコンを使用しています。データベースもトラッキングもなし — すべてのコンテンツは単一のTypeScriptデータファイルに収まっています。教えているパターンそのもので作られた実例です。
フォントは本文にMurecho（日英両対応のGoogle Font）、コードブロックにMonaspace Krypton（セルフホスト）を使用しています。Murechoは日本語とラテン文字を同じウェイトで美しく表示でき、Monaspaceのテクスチャヒーリングはコード比較を読みやすくします。
公式ドキュメントだけでは足りない理由
Svelteの公式ドキュメントは優秀です — Svelteのためには。しかし、Reactから来た人は、まだSvelteの用語で考えていません。useEffectやuseContextやJSXの三項演算子で考えています。ソース言語を話し、それを変換先にマッピングし、文脈の中で違いを説明してくれる翻訳者が必要です。このサイトが目指しているのはそれです。
移行ドキュメントは陳腐化も早いものです。このリファレンスのすべてのコンテンツは1つのデータファイル（src/lib/data.ts）に入っているので、更新はファイル1つの編集で済み、デプロイはGitHub Actionsで自動化されています。Svelte 5の進化に合わせて最新を保てる設計です。
試してみてください
svelte.cogley.jp にアクセスして、フレームワークを選んで、マッピングを探索してみてください。足りないマッピングや間違いを見つけたら、ぜひこの記事にコメントをお願いします。
最新：自動更新プロジェクトショーケース
サイトは/api/changelog.jsonで公開changelogのAPIを提供しており、最新の更新日と変更概要を機械可読な形式で返します。これによりcogley.jp/nowの「Projects」セクションとrick.cogley.jpの「Side Projects」カードが、手動編集なしで最新の更新日を自動表示します。
この記事は cogley.jp に掲載されたものです。
Rick Cogley（コグレー・リック）は株式会社イソリアのCEO兼創業者。東京で日英バイリンガルITアウトソーシングとインフラサービスを提供中。