はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この記事では、Svelte と SvelteKit のプロジェクトセットアップ方法について書きました。
Svelte に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
前提
本シリーズでは 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