目次

対象読者
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` を書き換える	自動反映される

6. 参考文献