Svelte簡単入門ガイド:プロジェクト構築からコンポーネントの相互作用とルーティング設定まで

本記事では、Viteを使用してSvelte + TypeScriptプロジェクトを構築する方法を詳しく説明し、コンポーネントの相互作用(親子コンポーネント、コンポーネント間のデータ伝達とイベント伝達)、ストアの多様な使用方法、およびルーティング設定についてもカバーします。

Svelteとは?

Svelteはモダンなフロントエンドフレームワークで、従来のフレームワーク(ReactやVueなど)とは異なり、Svelteはビルド時にコンポーネントを効率的なネイティブJavaScriptコードにコンパイルします。これにより、フレームワークのオーバーヘッドが減少し、パフォーマンスが向上し、コード構造が簡素化されます。

Svelteでできること

Svelteは、モダンでレスポンシブなフロントエンドアプリケーションを構築するために使用できます。コンポーネント化開発、状態管理、ルーティングなど、モダンなフロントエンド開発に必要な機能をサポートしています。以下は一般的な使用シナリオです:

  • シングルページアプリケーション(SPA)
  • 複雑なフォームとデータ処理
  • リアルタイムデータ更新のダッシュボード
  • インタラクティブなユーザーインターフェース

gpt-4-turboのリリースにより、画像を処理し理解するシステムも構築できるようになりました。

Svelteの利点

  1. 高性能:Svelteはビルド時にコードをネイティブJavaScriptにコンパイルするため、ランタイムのオーバーヘッドが減少し、パフォーマンスが向上します。
  2. 簡潔な構文:Svelteの構文は簡潔で理解しやすく、ボイラープレートコードが少ないため、開発効率が向上します。
  3. 仮想DOMなし:Svelteは仮想DOMを使用せず、直接DOMを操作するため、更新がより効率的です。
  4. 軽量:生成されるコードのサイズが小さく、ロード速度が速いです。

SvelteとVue、Reactの比較

コンパイル時 vs ランタイム

  • Svelte:ビルド時にコードを効率的なネイティブJavaScriptにコンパイルします。
  • ReactとVue:ランタイムでコードを解釈し、仮想DOMを介して更新します。

構文と開発体験

  • Svelte:構文が簡潔で、ボイラープレートコードが少なく、初心者にも優しいです。
  • React:JSX構文を使用し、柔軟ですがやや複雑です。
  • Vue:テンプレート構文を使用し、SvelteとReactの中間に位置し、理解しやすいです。

パフォーマンス

  • Svelte:コンパイル時の最適化により、通常はReactやVueよりも優れたパフォーマンスを発揮します。
  • ReactとVue:仮想DOMを介して良好なパフォーマンスを提供しますが、極端な場合にはSvelteに劣ることがあります。

プロジェクトの初期化

まず、Viteを使用して新しいSvelteプロジェクトを作成し、初期化します:

Terminal window
1
npm create vite@latest svelte-ts-app -- --template svelte-ts
2
cd svelte-ts-app
3
npm install

プロジェクト構造

プロジェクト構造は以下の通りです:

1
svelte-ts-app/
2
├── node_modules/
3
├── public/
4
│ └── favicon.ico
5
├── src/
6
│ ├── assets/
7
│ ├── components/
8
│ │ ├── ChildComponent.svelte
9
│ │ ├── ParentComponent.svelte
10
│ │ └── SiblingComponent.svelte
11
│ ├── routes/
12
│ │ ├── Home.svelte
13
│ │ └── About.svelte
14
│ ├── stores/
15
│ │ └── counter.ts
16
│ ├── App.svelte
17
│ ├── main.ts
18
│ └── index.css
19
├── .gitignore
20
├── index.html
21
├── package.json
22
├── tsconfig.json
23
├── vite.config.ts
24
└── README.md

TailwindCSSの設定(必須ではありません)

TailwindCSSをインストールします:

Terminal window
1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

tailwind.config.cjsでTailwindCSSを設定します:

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
content: ["./src/**/*.{html,js,svelte,ts}"],
4
theme: {
5
extend: {},
6
},
7
plugins: [],
8
};

srcディレクトリにindex.cssファイルを作成し、以下の内容を追加します:

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

main.tsでこのCSSファイルをインポートします:

1
import "./index.css";
2
import App from "./App.svelte";
3
4
const app = new App({
5
target: document.body,
6
});
7
8
export default app;

コンポーネントの作成

ChildComponent.svelte

1
<script lang="ts">
2
import { createEventDispatcher } from "svelte";
3
4
export let message: string;
5
const dispatch = createEventDispatcher();
6
7
function handleClick() {
8
dispatch("notify", { text: "Hello from ChildComponent!" });
9
}
10
</script>
11
12
<div class="p-4 bg-blue-100 rounded">
13
<p>{message}</p>
14
<button
15
on:click={handleClick}
16
class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Notify Parent</button
17
>
18
</div>

ParentComponent.svelte

1
<script lang="ts">
2
import ChildComponent from "./ChildComponent.svelte";
3
import SiblingComponent from "./SiblingComponent.svelte";
4
5
let parentMessage = "Message from ParentComponent";
6
let childMessage = "";
7
8
function handleNotify(event) {
9
childMessage = event.detail.text;
10
}
11
</script>
12
13
<div class="p-4 bg-green-100 rounded">
14
<p>{parentMessage}</p>
15
<ChildComponent
16
message="Message from ParentComponent to ChildComponent"
17
on:notify={handleNotify}
18
/>
19
<SiblingComponent message={childMessage} />
20
</div>

SiblingComponent.svelte

1
<script lang="ts">
2
export let message: string;
3
</script>
4
5
<div class="p-4 bg-yellow-100 rounded">
6
<p>{message}</p>
7
</div>

ストアの使用

Svelteでは、ストアはアプリケーションの状態を管理するためのメカニズムであり、Vuex(Vue)やRedux(React)に似ています。Svelteはwritablereadablederivedなど、さまざまなタイプのストアを提供しており、異なるニーズに対応します。

stores/counter.ts

1
import { writable } from "svelte/store";
2
3
export const counter = writable(0);

コンポーネントでストアを使用する

1
<script lang="ts">
2
import { counter } from "../stores/counter";
3
</script>
4
5
<div class="p-4 bg-red-100 rounded">
6
<button
7
on:click={() => ($counter += 1)}
8
class="bg-red-500 text-white px-4 py-2 rounded">Increment</button
9
>
10
<p>Counter: {$counter}</p>
11
</div>

ルーティングの使用

SvelteKitルーティングのインストール

Terminal window
1
npm install @sveltejs/kit

ルーティングの設定

src/routesディレクトリにルートコンポーネントを作成します:

Home.svelte

1
<script lang="ts">
2
import ParentComponent from "../components/ParentComponent.svelte";
3
</script>
4
5
<div class="p-4">
6
<h1 class="text-2xl">Home</h1>
7
<ParentComponent />
8
</div>

About.svelte

1
<script lang="ts">
2
import { counter } from "../stores/counter";
3
</script>
4
5
<div class="p-4">
6
<h1 class="text-2xl">About</h1>
7
<p>Counter: {$counter}</p>
8
</div>

ルーティングの設定

src/App.svelteでルーティングを設定します:

1
<script lang="ts">
2
import { Router, Route } from "@sveltejs/kit";
3
import Home from "./routes/Home.svelte";
4
import About from "./routes/About.svelte";
5
</script>
6
7
<Router>
8
<Route path="/" component={Home} />
9
<Route path="/about" component={About} />
10
</Router>

プロジェクトの実行

すべての依存関係がインストールされていることを確認し、プロジェクトを実行します:

Terminal window
1
npm run dev

まとめ

  • コンポーネントの相互作用:親子コンポーネント間のメッセージ伝達とイベント伝達、および兄弟コンポーネント間のデータ伝達を示しました。
  • ストアの使用:Svelteのwritableストアを使用してグローバル状態を管理する方法を示しました。
  • ルーティングの使用:SvelteKitルーティングを使用してルートを設定し、使用する方法を示しました。