環境構築

# 新しい方法（推奨）
npx sv create my-app

# 従来の方法（後方互換性のため残されている）
npm create svelte@latest my-app

┌  Welcome to the Svelte CLI! (v0.5.0)
│
◇  Which template would you like?
│  ○ SvelteKit demo
│  ● SvelteKit minimal  # 初心者向け（推奨）
│  ○ Svelte library
│
◇  Add type checking with TypeScript?
│  ○ Yes, using JavaScript with JSDoc
│  ● Yes, using TypeScript syntax  # 強く推奨
│  ○ No
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  ◼ prettier        # コードフォーマッター（推奨）
│  ◼ eslint          # リンター（推奨）
│  ◼ vitest          # ユニットテスト
│  ◼ playwright      # E2Eテスト
│  ◼ tailwindcss     # CSSフレームワーク
│  ◼ drizzle         # ORMツール
│  ◼ lucia          # 認証ライブラリ
│  ◼ mdsvex          # Markdown対応
│  ◼ paraglide       # 国際化（i18n）
│  ◼ storybook       # コンポーネント開発
│
◇  Which package manager do you want to install dependencies with?
│  ● npm    # 標準的で安定
│  ○ pnpm   # より高速（上級者向け）
│  ○ yarn
│  ○ bun
│  ○ deno
└

cd my-app
npm install

my-app/
├── src/
│   ├── routes/             # ページとルーティング
│   │   ├── +layout.svelte  # 共通レイアウト
│   │   └── +page.svelte    # ホームページ
│   ├── lib/                # 共有コンポーネント・ユーティリティ
│   │   ├── index.ts        # エクスポート定義
│   │   └── assets          # アセット（画像、フォントなど）
│   │       └── favicon.svg # ファビコン
│   ├── app.html            # HTMLテンプレート
│   ├── app.css             # グローバルCSS
│   └── app.d.ts            # TypeScript型定義
├── static/                 # 静的ファイル
├── tests/                  # テストファイル
├── eslint.config.js        # ESLint設定
├── package.json            # プロジェクト設定
├── svelte.config.js        # Svelte設定
├── vite.config.js          # Vite設定
├── tsconfig.json           # TypeScript設定
└── README.md               # プロジェクト説明

# 開発サーバー起動
npm run dev

# ホットリロード付きで起動（ネットワーク内の他デバイスからアクセス可能）
npm run dev -- --host

# 特定のポートで起動
npm run dev -- --port 3000

# プロダクションビルド
npm run build

# ビルド結果のプレビュー
npm run preview

# ビルドして即プレビュー
npm run build && npm run preview

{
  "devDependencies": {
    "svelte": "^5.1.0",               // Svelte 5.1以上
    "@sveltejs/kit": "^2.5.0",        // SvelteKit 2.5以上
    "@sveltejs/adapter-auto": "^3.2.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "typescript": "^5.5.0",
    "vite": "^5.4.0"
  }
}

# 現在のバージョンを確認
npm list svelte @sveltejs/kit

# 最新版の確認
npm outdated

# 特定のパッケージを最新版に更新
npm install -D svelte@latest @sveltejs/kit@latest

# すべての依存関係を更新（npm-check-updatesを使用）
npx npm-check-updates -u
npm install

<script lang="ts">
  // Svelte 5のRunes
  let count = $state(0);
  let doubled = $derived(count * 2);
  
  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  Count: {count}, Doubled: {doubled}
</button>