Contents
Svelte入門と最新環境設定
Svelteは、注目されている次世代フロントエンドフレームワークです。コンパイル時に最適化を行い、実行時のオーバーヘッドを最小限に抑えることが特徴です。この記事では、最新のツールチェーンを使用してSvelteアプリケーションを作成する手順をステップバイステップで解説します。「Svelte 入門 チュートリアル」というキーワードで検索された読者にとって、実用的な学習の第一歩となることを目指しています。
Node.jsと開発環境構築
Svelteを開発するには、Node.jsと適切なツールチェーンを整える必要があります。最新バージョンを確保することで、開発体験が向上します。
Node.jsのバージョン確認とインストール
まず、Node.jsが既にインストールされているか確認します。ターミナルで以下のように入力してください:
|
1 2 3 |
node -v npm -v |
推奨は最新LTS版（例: v20.x）です。古すぎるバージョンの場合は、nvmを使用してバージョン切り替えを行いましょう。
Svelteプロジェクト作成ツールの選択
Svelte CLIではなく、create-svelte（Viteベース）が公式で推奨されるケースが多いため、以下を参照してください。
|
1 2 |
npm create svelte@latest my-svelte-app |
インストール完了後、npx svelte --versionでバージョン確認を行います。
プロジェクト初期化と構成
Svelte CLIではなく、create-svelteコマンドを使用することで、ViteやTypeScriptなど最新ツールチェーンを含むプロジェクトが作成できます。
プロジェクト作成時のオプション指定
以下のように、テンプレートを選択します:
|
1 2 |
npm create svelte@latest my-svelte-app --template=vite-ts |
vite-ts: Vite + TypeScript + Svelte（推奨）basic: 最小限のテンプレート
生成されたファイル構成の概要
初期化が完了したプロジェクトには、以下のようなディレクトリ構成ができます:
| ディレクトリ/ファイル | 説明 |
|---|---|
| src/ | コンポーネントやページを配置する場所 |
| public/ | 静的リソース（画像、CSSなど）を配置 |
| package.json | プロジェクトの依存関係とスクリプト設定 |
| vite.config.js | Viteの設定ファイル |
プロジェクト初期化後は、npm run devで開発サーバーを起動してください。
Svelteのリアクティブ宣言
Svelteでは、JavaScriptのリアクティブ変数を$:で定義することで、データが変更されたときに自動的にUIが更新されます。
scriptセグメントでのリアクティブ変数定義
以下のように、$:で始まるステートメントを書くことで、リアクティブなデータを定義できます:
|
1 2 3 4 5 6 7 8 |
<script> let count = 0; $: doubledCount = count * 2; </script> <p>カウント値: {count}</p> <p>倍数: {doubledCount}</p> |
templateセグメントとのデータ連携
Svelteのテンプレートセグメントには、{}を使ってスクリプトセグメントで定義した変数を挿入できます。例えば:
|
1 2 3 4 5 6 |
<script> let message = "こんにちは"; </script> <h1>{message}</h1> |
コンポーネント間通信方法
Svelteでは、propsやカスタムイベントを使ってコンポーネント間でデータをやり取りできます。
propsによる親子コンポーネントのデータ受け渡し
親コンポーネントから子コンポーネントへデータを送るには、propsを使用します:
|
1 2 3 4 5 6 7 |
<!-- ParentComponent.svelte --> <script> import Child from './Child.svelte'; </script> <Child message="Hello, child!" /> |
|
1 2 3 4 5 6 7 |
<!-- ChildComponent.svelte --> <script> export let message; </script> <p>{message}</p> |
イベントエミットとカスタムイベントの利用
子コンポーネントから親にデータを送信するには、createEventDispatcherを使ってカスタムイベントを定義します:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- ChildComponent.svelte --> <script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); function handleClick() { dispatch('custom-event', { message: 'ボタンがクリックされました' }); } </script> <button on:click={handleClick}>送信</button> |
親コンポーネントでは、このイベントを監視して処理を行います:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- ParentComponent.svelte --> <script> import Child from './Child.svelte'; function handleCustomEvent(event) { console.log('受け取ったメッセージ:', event.detail.message); } </script> <Child on:custom-event={handleCustomEvent} /> |
最新ツールチェーンの導入法
Svelteは、ViteやTypeScriptとの統合で開発効率を高めています。以下に導入手順を示します。
ViteとRollupの統合構成
Viteを使用するには、create-svelteでプロジェクトを作成する際、--template=vite-tsなどのオプションを使います。
TypeScriptサポートの有効化
TypeScriptを活用するには、.svelteファイルに型定義を追加します:
|
1 2 3 4 5 6 |
<script lang="ts"> let count: number = 0; </script> <p>カウント値: {count}</p> |
Svelteで最初のアプリケーションを作成してみよう
Todoアプリを作って、Svelteの特徴を体感しましょう。
簡単なTodoアプリの作成例
src/Todo.svelteに以下のようにコードを記述します:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script> let newTask = ''; let tasks = []; function addTask() { if (newTask.trim()) { tasks = [...tasks, { id: Date.now(), text: newTask }]; newTask = ''; } } function deleteTask(id) { tasks = tasks.filter(task => task.id !== id); } </script> <h2>Todoリスト</h2> <input bind:value={newTask} placeholder="新しいタスクを入力" /> <button on:click={addTask}>追加</button> <ul> {#each tasks as task} <li> {task.text} <button on:click={() => deleteTask(task.id)}>削除</button> </li> {/each} </ul> |
今後の学習ステップ提案
- APIとの連携（例: JSONPlaceholderを使用）
- ストア管理（Svelte Storeの活用）
- ルーティング構成（Svelte Routerなど）
今回の記事で紹介した内容を実践することで、Svelte入門者として一歩踏み出せるようになります。次は、より高度な機能やツールチェーンとの連携に挑戦してみてください。