Contents
Svelte 5 Runesとは
Svelte 5で導入されたRunesは、リアクティブなデータフローを直感的に記述できる仕組みです。従来のリアクティブシステムでは「$:」や「$: reactive」といった特殊な記法が必要でしたが、Runesを使うことでJavaScriptの文脈内で自然にリアクティブ性を実装できます。
注意点：Svelte 5はまだ正式リリースされていないため、本文の内容およびrune()関数の使用法などは変更される可能性があります。最新情報は公式ドキュメントで確認してください。
Runesの定義と目的
Runesとは、「魔法の呪文のように」「最小限のコードで最大の効果を得られる」という意味を持ちます。Svelte 5では、コンポーネント内の値変化に応じて自動的にUIを更新するリアクティブ性を、より簡潔な構文で実現できるようになりました。
従来のリアクティブシステムとの違い
| 項目 | 従来の方法 | Runes（Svelte 5） |
|---|---|---|
| リアクティブ宣言 | $: value = ... |
const value = rune(...) |
| 複雑な依存管理 | 明示的な変数管理が必須 | 依存関係を自動検出 |
以下に、従来のコードとRunesを使ったコードの違いを比較します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- 従来の書き方 --> <script> let count = 0; $: doubled = count * 2; </script> <p>現在の値：{count}</p> <p>倍の値：{doubled}</p> <!-- Runesを使った書き方 --> <script> const count = rune(0); const doubled = rune(() => count() * 2); </script> <p>現在の値：{count()}</p> <p>倍の値：{doubled()}</p> |
基本的な構文と使い方
Runesは、JavaScriptの関数や変数宣言を拡張した形で使うことができます。以下にステップバイステップで基本構文を解説します。
変数宣言の書き方
Svelte 5ではrune()関数を使ってリアクティブな値を生成します。初期値を設定する場合は、以下の形式になります。
|
1 2 3 4 |
<script> const count = rune(0); // 初期値0で変数を宣言 </script> |
リアクティブな式の記述方法
rune()内に計算式を記述することで、依存関係を持つリアクティブな値を作成できます。以下は、カウント値から倍数を算出する例です。
|
1 2 3 4 5 6 7 8 |
<script> const count = rune(0); const doubled = rune(() => count() * 2); // countの変化に応じて再計算 </script> <p>現在の値：{count()}</p> <p>倍の値：{doubled()}</p> |
関数内のRunes活用
関数内でリアクティブな処理が必要な場合は、rune()を使ってロジックを記述します。たとえば、カウントが偶数かどうか判定する場合：
|
1 2 3 4 5 6 7 8 |
<script> const count = rune(0); const isEven = rune(() => count() % 2 === 0); </script> <p>現在の値：{count()}</p> <p>偶数か？ {isEven() ? 'はい' : 'いいえ'}</p> |
コンポーネント間データ共有方法
Runesを用いたデータ共有では、イベント伝播とグローバルな状態管理（store）が有効です。以下に具体例を示します。
親子コンポーネント間のデータ流
親コンポーネントから子コンポーネントへデータを渡すには、propsで値を伝達します。逆方向はイベントを使って通知できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Parent.svelte --> <script> const count = rune(0); </script> <Child on:increment={handleIncrement} /> <p>親のカウント：{count()}</p> <script> function handleIncrement() { count(count() + 1); } </script> |
|
1 2 3 4 5 6 7 |
<!-- Child.svelte --> <script> export let increment; </script> <button on:click={increment}>+1</button> |
グローバル状態管理の実装例
グローバルな状態を扱うにはstoreを使用します。以下は、writableストアでカウントを管理する例です。
|
1 2 3 4 5 |
<!-- store.js --> import { writable } from 'svelte/store'; export const globalCount = writable(0); |
|
1 2 3 4 5 6 7 |
<!-- App.svelte --> <script> import { globalCount } from './store.js'; </script> <p>グローバルカウント：{globalCount()}</p> |
ViteとSvelte CLIとの連携手順
Runesを活用するには、プロジェクト構築からツール連携までの一連の手順が必要です。以下は公式ツール（Vite/Svelte CLI）を効率的に使う方法です。
Viteでのプロジェクト構築手順
npm create vite@latest my-svelte-project --template svelteでプロジェクトを作成cd my-svelte-project && npm installviteコマンドでローカルサーバーを起動
Viteプロジェクト生成ツールは、Svelte公式が推奨する高速開発環境構築ツールです。TypeScriptやCSS Preprocessorのサポートも充実しています。
Svelte CLIとの統合方法
Svelte CLIは、コンポーネントや構造のテンプレート作成に便利です。以下は基本的なCLIコマンド例です。
|
1 2 3 |
# コンポーネントを作成 npx svelte create component MyComponent.svelte |
Svelte CLIは、Svelte公式が提供するプロジェクト構築・コンポーネント生成ツールで、テンプレートを統一し開発効率を向上させます。
よくあるエラーの解決法
Runesを使う際に発生しやすい典型的な問題とその対処方法を紹介します。
リアクティブ性が働かないケース
原因：rune()内の関数で値を参照する際、()がない場合に依存関係が検出されない。
解決法：
|
1 2 3 4 5 6 |
// ❌ 間違った書き方（リアクティブ性なし） const doubled = rune(() => count * 2); // ✅ 正しい書き方（count()を参照する） const doubled = rune(() => count() * 2); |
コンパイルエラーメッセージの読み方
Svelteはコンパイル時に具体的なエラーメッセージを出力します。以下に代表的なケースと対処法を示します。
| エラー内容 | 原因 | 解決方法 |
|---|---|---|
Missing rune |
rune()が抜けている |
関数内でリアクティブな値を生成する際、rune()を使用する |
Invalid reference |
不適切な変数参照 | count()ではなくcountと誤って記述していないか確認 |
まとめ
- RunesはSvelte 5で導入されたリアクティブプログラミングの新機能
- 基本構文は
rune()関数を使って宣言する - コンポーネント間データ共有にはイベントやstoreを使う
- ViteやCLIを活用してツール連携を効率化
- エラーは具体的なメッセージから原因を探る