はじめに

Svelte 5とSvelteKitの世界へようこそ！このセクションでは、最新のWeb開発フレームワークであるSvelteの概要と、なぜ多くの開発者がSvelteを選ぶのかを理解します。

Svelte 5とは

Svelteは「コンパイラ」として動作する革新的なフロントエンドフレームワークです。React やVueのような従来のフレームワークとは異なり、ランタイムライブラリを必要とせず、ビルド時にコンポーネントを効率的なVanilla JavaScriptに変換します。

革新的な特徴

  1. コンパイラベース - ビルド時に最適化されたコードを生成
  2. Virtual DOM不使用 - 直接DOMを操作する効率的なコード
  3. Runesシステム - 明示的で予測可能なリアクティビティ
  4. TypeScript完全対応 - 型安全な開発が標準
  5. 軽量・高速 - 最小限のバンドルサイズで最高のパフォーマンス

このセクションで学ぶこと

🚀

なぜSvelteか →

Svelteが他のフレームワークと比較してどのような利点があるかを詳しく解説します。

  • コンパイル時最適化の仕組み
  • Virtual DOMを使わない理由
  • パフォーマンスの実測値比較
  • 実世界での成功事例
🛠️

環境構築 →

Svelte開発環境を最速でセットアップする方法を説明します。

  • Node.jsとパッケージマネージャー
  • SvelteKitプロジェクトの作成
  • 開発ツールの設定
  • VS Code拡張機能
👋

Hello World →

最初のSvelteコンポーネントを作成し、基本的な構文を学びます。

  • Svelteコンポーネントの基本
  • 変数の表示と式の埋め込み
  • 従来の書き方とSvelte 5の比較
  • $stateルーンの初歩
🎯

なぜTypeScriptが必要か →

モダンなWeb開発におけるTypeScriptの重要性を理解します。

  • TypeScriptの利点
  • 開発時の安全性向上
  • Svelte 5との相性
  • 他フレームワークとの比較
📘

TypeScript設定 →

SvelteプロジェクトでTypeScriptを最大限活用するための設定を解説します。

  • tsconfig.jsonの詳細設定
  • 型定義ファイルの構成
  • 厳密な型チェック設定
  • エディタ統合の最適化
⌨️

CLI tools →

公式 sv CLI でプロジェクトの作成・拡張・診断を行う方法を学びます。

  • npx sv create: 新規プロジェクト
  • sv add: アドオンの追加
  • sv check: 型・構文チェック
  • sv migrate: 自動マイグレーション
🧹

ESLint / Prettier →

flat config 時代の最新セットアップで Svelte プロジェクトを整えます。

  • ESLint flat config の構成
  • eslint-plugin-svelte の有効化
  • Prettier と prettier-plugin-svelte
  • VS Code・CI との統合
🤖

AI コーディング支援 →

Copilot / Cursor が on:click 等の古い構文を提案するのを防ぐ多層防御の設定。

  • .github/instructions/ による指示注入
  • Chat: Configure Instructions ユーザー設定
  • コンパイラ警告のエラー昇格
  • Cursor / Claude Code との比較

学習の進め方

このセクションは、Svelteを初めて学ぶ方向けの導入部分です。以下の順序で学習を進めることをお勧めします。

  1. なぜSvelteか - Svelteの利点と他フレームワークとの違いを理解
  2. 環境構築 - 開発環境を整えて実際に手を動かす準備
  3. Hello World - 最初のSvelteコンポーネントを作成
  4. なぜTypeScriptが必要か - TypeScriptの重要性を理解
  5. TypeScript設定 - 型安全な開発のための環境を構築
  6. CLI tools - sv コマンドで作成・拡張・診断・移行を効率化
  7. ESLint / Prettier - flat config による静的解析とフォーマットを整備
  8. AI コーディング支援 - Copilot / Cursor を Svelte 5 純度で使うための多層防御
  9. 次の一歩 - Svelte 編 / SvelteKit 編へ進む準備

前提知識

このガイドを始める前に、以下の知識があることを前提としています。

  • HTML/CSS の基本的な知識
  • JavaScript（ES6+）の基本的な構文
  • コマンドラインの基本的な操作
  • npm/pnpmなどのパッケージマネージャーの基本的な使い方

TypeScriptの経験があれば理想的ですが、必須ではありません。このガイドを通じてTypeScriptも学べるように構成されています。

次のステップ

準備ができたら、なぜSvelteかから始めましょう。Svelteがなぜ注目されているのか、その理由を詳しく見ていきます。