目次
- 対象読者
- Svelteとは？
- Svelteを使うメリット・デメリット
- ハンズオン：ローカルでSvelteアプリを動かしてみよう
- 4.1 Node.jsのインストール（事前準備）
- 4.2 SvelteKitアプリの作成（npx sv create）
- 4.3 依存関係のインストール
- 4.4 開発サーバーを起動
- 4.5 ブラウザで確認しよう！
- 4.6 コードを変更してみよう（Cursor / VS Code 編）
- まとめ
- 参考文献
1. 対象読者
- MacBookでWeb開発を始めたい初心者
- ReactやVueよりシンプルなフレームワークに興味がある方
- フロントエンドを直感的に理解したい方
2. Svelteとは？
Svelteは「宣言的・シンプル・高速」が特徴のUIフレームワークです。
ReactやVueとは異なり、開発時にコードをJavaScriptにコンパイルしてくれるため、実行時に軽く高速に動作します。
3. Svelteを使うメリット・デメリット
✅ メリット
-
.svelteファイルに HTML / JS / CSS をまとめて書ける - コンパイル型なので軽量・高速なアプリが作れる
- 構文が直感的で学習コストが低い
- 公式の SvelteKit を使えば、ルーティングやSSRもすぐ使える
❗ デメリット
- ReactやVueに比べてエコシステムはやや小さい
- 情報量はまだ少なめ（英語ドキュメント中心）
- 型や状態管理まわりは慣れが必要なことも
4. ハンズオン：ローカルでSvelteアプリを動かしてみよう
4.1 Node.jsのインストール（事前準備）
✅ Node.jsとは？
Node.js（ノード・ジェイエス）は、JavaScript をサーバー側でも実行できるようにした「実行環境」です。
SvelteやReact、Vueなどのフレームワークを動かすために必須です。
🟢 まだ Node.js をインストールしていない場合
Node.js 公式サイトから直接インストールできます：
👉 https://nodejs.org/ja/download
手順：
- 上記のリンクを開く
- 「推奨版（LTS）」をクリックして
.pkgファイルをダウンロード - ダブルクリックしてインストーラを実行（macOS標準の手順）
- ターミナルを開き、以下で確認：
node -v
4.2 SvelteKitアプリの作成（npx sv create）
npx sv create my-svelte-app
すると、以下のように選択肢が表示されます：
✔ Which template? › SvelteKit minimal
✔ Add type checking with TypeScript? › No
✔ What would you like to add? › prettier（だけチェック）
✔ Which package manager? › npm または pnpm
完了後、my-svelte-app フォルダが作成されます。
4.3 依存関係のインストール
cd my-svelte-app
npm install
または pnpm install を選んだ場合：
pnpm install
4.4 開発サーバーを起動
npm run dev
起動に成功すると、次のようなメッセージが表示されます：
➜ Local: http://localhost:5173/
4.5 ブラウザで確認しよう！
Safari または Chrome を開いて以下にアクセス：
http://localhost:5173/
「Welcome to SvelteKit」 と表示されていれば成功です 🎉
4.6 コードを変更してみよう（Cursor / VSCode 編）
お好みのテキストエディタでコードを修正してみましょう。
以下のように <h1> の内容を書き換えて保存してみましょう：
src/routes/+page.svelte
<h1>こんにちは、世界</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
保存後、ブラウザを更新しなくても自動でリロードされ、次のように表示されるはずです：
5. まとめ
| 作業内容 | コマンド例 | 補足 |
|---|---|---|
| Node.js を確認 | node -v |
v20.19 以上 |
| SvelteKit 作成 | npx sv create my-svelte-app |
2025年の公式手順 |
| 依存関係の導入 |
npm install または pnpm install
|
必須ステップ |
| 開発サーバー起動 | npm run dev |
localhost:5173 |
| コード編集 |
+page.svelte を書き換える |
自動反映される |