svelte5-single-page-application

このリポジトリーは、技術書典17「いまからはじめる Svelte 5」付録のサンプルコードです。

• サイト全体にCSSを適用する
• Web APIを使う
• コンポーネントにアクションを取り付ける
• Vitestでユニットテストを実行する
• Storybookでコンポーネントテストを実行する
• Lintツールで静的解析する

サンプルコードの試しかた

リポジトリーをクローンしたら、npmパッケージをインストールします。

cd svelte5-single-page-application
npm ci

そして、Viteのモジュール・バンドル処理を実行し...

npm run dev

ウェブブラウザーでlocalhost:5173にアクセスします。

開発環境

• Svelte v5.x
• svelte-check v4.x
• Biome v1.x
• TypeScript v5.x
• Vitest v2.x
• Vite v5.x
• Tailwind CSS v3.x

開発の進めかた

コードを書き換えたら、Lintツール（svelte-check・Biome）で静的解析します。

npm run check
npm run biome:lint

もしBiomeがエラーを報告したら...

npm run biome:lint:autofix

エラーを解消できたら、ユニットテスト（Vitest）を実行します。

npm run test