はじめに
「SvelteKit始めたい！」と思ってプロジェクトを作ろうとしたら、npm run dev が動かない、cd demo-app したらディレクトリが無いなど、ありとあらゆるエラーに遭遇しました。
この記事は、SvelteKitのdemo-appを最初に作るまでに絞って、初心者視点で「どう詰まって」「どう解決したか」を記録したものです。
やりたいこと
sv create demo-app
cd demo-app
bun install
npm run dev
この一連の流れをやって、開発サーバーが立ち上がる状態にしたい！
ただ、それが思ったより簡単ではなかった…。
最初に詰まったことまとめ
| やったこと | 結果 | 理由 |
|---|---|---|
npm run dev |
Missing script: "dev" |
package.jsonが未生成 or スクリプト未定義 |
cd demo-app |
no such file or directory |
sv create がうまく動いていなかった |
sv create demo-app |
command not found: sv |
CLIツールがインストールされていない |
bun install |
No packages! Deleted empty lockfile |
package.json が存在しないため |
npm run dev（再） |
Missing script: "dev" |
まだテンプレートが生成できてない状態 |
正しい手順（2025年5月時点）
以下の手順でやれば、確実に demo-app が作れます！
# ① sv CLI をグローバルにインストール
npm install -g sv
# ② プロジェクトを作成
sv create demo-app
途中でいくつか聞かれます：
| 質問 | 最小構成のおすすめ |
|---|---|
| Template | SvelteKit minimal |
| TypeScript? | Yes |
| Add anything? |
なし（初めてなら） |
| Package manager |
bun（npmでもOK） |
最初の質問がこちらでした。
最終的な構成としてはこうなります。
上記写真でもnext stepとして案内されていますが、いよいよ起動です！
# ③ ディレクトリに移動して依存をインストール
cd demo-app
# ④ 開発サーバを起動
bun run dev --open
http://localhost:5173 が自動で開いて、SvelteKitのWelcomeページが表示されれば成功です！
起動直後の画面がこちら
詰まりポイントの実際のログ（一部）
npm run dev
→ npm error Missing script: "dev"
sv create demo-app
→ zsh: command not found: sv
cd demo-app
→ cd: no such file or directory: demo-app
こういったエラーの共通原因は：
- そもそもプロジェクトが生成されてないのに、次のコマンドを打とうとしている
- CLI（sv）が入ってないのに、
sv createを試している
という順番のミスにありました。
まとめ
SvelteKitを始めようと思って「プロジェクト作成」だけで1時間近く格闘したので、この記事を読んだ人が同じミスでハマらないように残しておきます。
「svが入っていない」「まだディレクトリがない」など、よくあるエラーに出くわしたら、一度立ち止まって順番を見直すのが吉です。
おまけ：次にやったこと
このあと /weather ページを作って、外部APIを叩いて天気情報を表示するミニアプリを作りました☀️
Discussion