はじめに

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

この記事では、Svelte と SvelteKit のプロジェクトセットアップ方法について書きました。

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

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

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

もくじ

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

前提

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

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

SvelteKit の導入

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

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

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

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

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

Which template would you like?
> SvelteKit minimal

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

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

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

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

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

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

実行ログ全文

┌  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という名前でミニマムテンプレートのプロジェクトを作成しました。

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

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

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

ブラウザで確認

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

おわりに

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

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

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

この記事はフロントエンドの世界 Advent Calendar 2024の 3 記事目です。
次の記事はこちら Svelte(Kit)の世界: UI 構築とトランジション #3