Svelte(Kit)の世界: プロジェクトのセットアップ #2


## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この記事では、[`Svelte`](https://svelte.jp/) と [`SvelteKit`](https://kit.svelte.jp/) のプロジェクトセットアップ方法について書きました。

`Svelte` に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [前提](#前提)
- [SvelteKit の導入](#sveltekit-の導入)
- [SvelteKit プロジェクトの立ち上げ](#sveltekit-プロジェクトの立ち上げ)
- [ブラウザで確認](#ブラウザで確認)
- [おわりに](#おわりに)

## 前提

本シリーズでは `Turborepo` によるモノレポ管理を行っています。

単体で `Svelte` を導入する場合は適宜プロジェクト作成先パスを変更して下さい。

## SvelteKit の導入

`apps`配下に`SvelteKit`のプロジェクトを作成します。

```shell
# モノレポの場合
npx sv create apps/svelte-client
```

```shell
# 単体の場合
npx sv create svelte-client
```

### 対話型プロジェクトセットアップ

**テンプレートの種類**
今回はミニマルを選択します。
※ お好みで選んでください。

```shell
Which template would you like?
> SvelteKit minimal
```

**Typescript の有効化**
今回は Typescript を有効化します。
※ お好みで選んでください。

```shell
Add type checking with Typescript?
> Yes, using Typescript syntax
```

**ツールチェーン の有効化**
今回は `Prettier` や `ESLint` 等のツールチェーンは無しで進めます。
※ お好みで選んでください。

```shell
What would you like to add to your project? (use arrow keys / space bar)
> none
```

**パッケージマネージャー の選択**
今回は `Turborepo` で管理するので `pnpm` を選択します。
※ お好みで選んでください。

```shell
Which package manager do you want to install dependencies with?
> pnpm
```

```shell:実行ログ全文
┌  Welcome to the Svelte CLI! (v0.6.4)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  pnpm
│
◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd apps/svelte-client                                                          │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: pnpm dev --open                                                      │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!
```

今回はモノレポで管理しているので`apps`配下に`svelte-client`という名前でミニマムテンプレートのプロジェクトを作成しました。

https://svelte.dev/docs/cli/sv-create

## SvelteKit プロジェクトの立ち上げ

```shell
# モノレポの場合 (ルートで実行)
pnpm --filter svelte-client dev
```

```shell
# 単体の場合
cd my-app
npm install
npm run dev
```

## ブラウザで確認

ブラウザで http://localhost:5175 を開くと、"Welcome to SvelteKit" と表示されます。

![svelte-welcome-minimal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/21d9ec80-eac2-985d-2705-991a9ab54242.png)

## おわりに

SvelteKit のセットアップは非常にスムーズで、モダンな開発体験を感じました。

本記事が少しでも Svelte 入門の参考になれば幸いです。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 3 記事目です。
次の記事はこちら [Svelte(Kit)の世界: UI 構築とトランジション #3](https://qiita.com/nuinteedev/private/151fc32522dc306df5d6)