Svelte簡単入門ガイド:プロジェクト構築からコンポーネントの相互作用とルーティング設定まで
- 1215単語
- 6分
- 29 Jun, 2024
本記事では、Viteを使用してSvelte + TypeScriptプロジェクトを構築する方法を詳しく説明し、コンポーネントの相互作用(親子コンポーネント、コンポーネント間のデータ伝達とイベント伝達)、ストアの多様な使用方法、およびルーティング設定についてもカバーします。
Svelteとは?
Svelteはモダンなフロントエンドフレームワークで、従来のフレームワーク(ReactやVueなど)とは異なり、Svelteはビルド時にコンポーネントを効率的なネイティブJavaScriptコードにコンパイルします。これにより、フレームワークのオーバーヘッドが減少し、パフォーマンスが向上し、コード構造が簡素化されます。
Svelteでできること
Svelteは、モダンでレスポンシブなフロントエンドアプリケーションを構築するために使用できます。コンポーネント化開発、状態管理、ルーティングなど、モダンなフロントエンド開発に必要な機能をサポートしています。以下は一般的な使用シナリオです:
- シングルページアプリケーション(SPA)
- 複雑なフォームとデータ処理
- リアルタイムデータ更新のダッシュボード
- インタラクティブなユーザーインターフェース
gpt-4-turboのリリースにより、画像を処理し理解するシステムも構築できるようになりました。
Svelteの利点
- 高性能:Svelteはビルド時にコードをネイティブJavaScriptにコンパイルするため、ランタイムのオーバーヘッドが減少し、パフォーマンスが向上します。
- 簡潔な構文:Svelteの構文は簡潔で理解しやすく、ボイラープレートコードが少ないため、開発効率が向上します。
- 仮想DOMなし:Svelteは仮想DOMを使用せず、直接DOMを操作するため、更新がより効率的です。
- 軽量:生成されるコードのサイズが小さく、ロード速度が速いです。
SvelteとVue、Reactの比較
コンパイル時 vs ランタイム
- Svelte:ビルド時にコードを効率的なネイティブJavaScriptにコンパイルします。
- ReactとVue:ランタイムでコードを解釈し、仮想DOMを介して更新します。
構文と開発体験
- Svelte:構文が簡潔で、ボイラープレートコードが少なく、初心者にも優しいです。
- React:JSX構文を使用し、柔軟ですがやや複雑です。
- Vue:テンプレート構文を使用し、SvelteとReactの中間に位置し、理解しやすいです。
パフォーマンス
- Svelte:コンパイル時の最適化により、通常はReactやVueよりも優れたパフォーマンスを発揮します。
- ReactとVue:仮想DOMを介して良好なパフォーマンスを提供しますが、極端な場合にはSvelteに劣ることがあります。
プロジェクトの初期化
まず、Viteを使用して新しいSvelteプロジェクトを作成し、初期化します:
1npm create vite@latest svelte-ts-app -- --template svelte-ts2cd svelte-ts-app3npm install
プロジェクト構造
プロジェクト構造は以下の通りです:
1svelte-ts-app/2├── node_modules/3├── public/4│ └── favicon.ico5├── src/6│ ├── assets/7│ ├── components/8│ │ ├── ChildComponent.svelte9│ │ ├── ParentComponent.svelte10│ │ └── SiblingComponent.svelte11│ ├── routes/12│ │ ├── Home.svelte13│ │ └── About.svelte14│ ├── stores/15│ │ └── counter.ts16│ ├── App.svelte17│ ├── main.ts18│ └── index.css19├── .gitignore20├── index.html21├── package.json22├── tsconfig.json23├── vite.config.ts24└── README.md
TailwindCSSの設定(必須ではありません)
TailwindCSSをインストールします:
1npm install -D tailwindcss postcss autoprefixer2npx tailwindcss init -p
tailwind.config.cjs
でTailwindCSSを設定します:
1/** @type {import('tailwindcss').Config} */2module.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ファイルをインポートします:
1import "./index.css";2import App from "./App.svelte";3
4const app = new App({5 target: document.body,6});7
8export 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 <button15 on:click={handleClick}16 class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Notify Parent</button17 >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 <ChildComponent16 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はwritable
、readable
、derived
など、さまざまなタイプのストアを提供しており、異なるニーズに対応します。
stores/counter.ts
1import { writable } from "svelte/store";2
3export 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 <button7 on:click={() => ($counter += 1)}8 class="bg-red-500 text-white px-4 py-2 rounded">Increment</button9 >10 <p>Counter: {$counter}</p>11</div>
ルーティングの使用
SvelteKitルーティングのインストール
1npm 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>
プロジェクトの実行
すべての依存関係がインストールされていることを確認し、プロジェクトを実行します:
1npm run dev
まとめ
- コンポーネントの相互作用:親子コンポーネント間のメッセージ伝達とイベント伝達、および兄弟コンポーネント間のデータ伝達を示しました。
- ストアの使用:Svelteのwritableストアを使用してグローバル状態を管理する方法を示しました。
- ルーティングの使用:SvelteKitルーティングを使用してルートを設定し、使用する方法を示しました。