SvelteKit

特徴

主な用途

• ブログやドキュメントなどのコンテンツサイト
• 認証とデータベースを使うフルスタック Web アプリ
• 管理ツールとダッシュボード
• 静的ホスティングに置く紹介サイト

インストール

1. 1

   Node.js の準備

   SvelteKit の開発は Node.js 上で行います。現在の LTS 版をインストールし、新しいターミナルで node と npm のバージョンが表示されることを確認します。

   node --version && npm --version

   コピー
2. 2

   プロジェクトの作成

   公式のコマンドラインツール sv で新しいプロジェクトを作成します。テンプレート、TypeScript の利用、Prettier・ESLint・Vitest・Playwright などのアドオンを選べます。

   npx sv create my-app

   コピー
3. 3

   開発サーバーの起動

   プロジェクトのフォルダーに移動して依存関係をインストールし、開発サーバーを起動します。ブラウザーで http://localhost:5173 が開き、保存するとすぐに反映されます。

   cd my-app && npm install && npm run dev -- --open

   コピー

はじめてのプログラム

最初のページ

src/routes/+page.svelte はサイトのトップページ(/)です。$state ルーンで作った count は値が変わるたびに画面を自動で更新し、onclick 属性に渡した関数がクリックのたびに値を 1 ずつ増やします。新しいページは src/routes/about/+page.svelte のようにフォルダーを作って追加します。

<script lang="ts">
  let count = $state(0);
</script>

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

npx sv create my-app && cd my-app && npm install && npm run dev

よく使うツール

sv

Svelte 公式の CLI です。sv create でプロジェクトを作成し、sv add で Tailwind CSS、Vitest、Playwright、Drizzle などのアドオンを設定します。

Vite

SvelteKit の開発サーバーと本番ビルドを担うツールです。起動が速く HMR に対応し、SvelteKit は Vite プラグインとして動作します。

svelte-check

プロジェクト全体の型エラーと Svelte 固有の問題を検出するコマンドラインツールです。npm run check で実行します。

Svelte for VS Code

公式の VS Code 拡張機能で、.svelte ファイルの構文ハイライト、補完、型エラー表示、フォーマットを提供します。

公式ドキュメント・参考資料

• 公式SvelteKit documentation
• 公式Svelte documentation
• 学ぶSvelteKit tutorial
• 学ぶSvelte Playground
• リファレンス@sveltejs/kit API reference
• リファレンスSvelte CLI (sv)
• コミュニティsveltejs/kit on GitHub
• コミュニティSvelte Discord

使用する言語

• TypeScriptTypeScript は JavaScript に静的型を加えた言語で、実行前にエラーを見つけ、大規模なコードベースの保守を容易にします。
• JavaScriptJavaScript は ECMAScript として標準化された動的プログラミング言語で、すべての Web ブラウザーと Node.js などのランタイムで動作します。