2025年03月19日更新

Sveltekitプロジェクトを作成する

どうも、クラゲジュニアです。

今回はSveltekitの最初のプロジェクト作成を行います。

環境

クラゲジュニアは下記の環境で実施しました。

OS: windows 11 Pro 24H2
VSCode: version 1.97
node.js: v20.14.0
npm: 10.7.0

方法

今回はVSCodeのTerminalで動かしたPowershell上で実行します。

適当なフォルダを作成し、Powershell上へ移動します。クラゲジュニアは下記フォルダにプロジェクトフォルダを作成します。

PS C:\github\sveltekit-starter>

続いて、npx sv create <プロジェクト名>を実行します。<プロジェクト名>はわかりやすい名前を入れてください。入力するとインストールの可否が聞かれるのでそのままEnterを入力してください。

PS C:\github\sveltekit-starter> npx sv create test-project
Need to install the following packages:
sv@0.6.23
Ok to proceed? (y)

すると、下記のようにどのテンプレートを使うか問われるのでそのままEnterを入力してSvelteKit minimalを選択します。

┌  Welcome to the Svelte CLI! (v0.6.23)
│
◆  Which template would you like?
│  ● SvelteKit minimal (barebones scaffolding for your new app)
│  ○ SvelteKit demo
│  ○ Svelte library
└

すると開発環境のシンタックスについて問われるので自身の言語環境などに基づいて選択します。クラゲジュニアはそのままEnterを入力してYes, using Typescript syntaxを選びました。

◆  Add type checking with Typescript?
│  ● Yes, using Typescript syntax
│  ○ Yes, using Javascript with JSDoc comments
│  ○ No
└

プロジェクトにインストールするソフトウェアが問われます。こちらは後でインストールすることも可能なため、何もチェックを入れずEnterを入力します。

◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier
│  ◻ eslint (linter - https://eslint.org)
│  ◻ vitest
│  ◻ playwright
│  ...
└

使用するパッケージマネージャーを選択します。クラゲジュニアはnpmをつかうのでそのままEnterします。

◆  Which package manager do you want to install dependencies with?
│  ○ None
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ...
└

インストールが始まるのでしばらく待機します。

◇  Installing dependencies with npm...

こちらの表示が得られればOKです！

◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd test-project                                                      │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: npm run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

試しにtest-projectに移動してnpm run devを入力すると、サーバーが動いていることが確認できます！

PS C:\github\sveltekit-starter> cd .\test-project\
PS C:\github\sveltekit-starter\test-project> npm run dev

> test-project@0.0.1 dev
> vite dev

10:25:46 [vite] (client) Forced re-optimization of dependencies

  VITE v6.2.0  ready in 1973 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

以上です。