【IT】Svelte v5 で導入された Runesについて（＄： 〜）
皆さま
こんにちは
今日は、Svelte v5 で導入された Runesについて
あらためて確認します。
今回は、「$: 〜」でリアクティブに監視していた
変数について確認します。
１．今回の環境
PC：MacBook Air(M1)
バージョン詳細は、以下の通り
<<OSバージョン>>
$ sw_vers
ProductName: macOS
ProductVersion: 15.5
<<SvelteKitバージョン>>
$ npm list svelte
my-app-v5@0.0.1 /Users/test/Runes-Test/my-app-v5
├─┬ @sveltejs/kit@2.26.1
│ └── svelte@5.36.17 deduped
├─┬ @sveltejs/vite-plugin-svelte@6.1.0
│ ├─┬ @sveltejs/vite-plugin-svelte-inspector@5.0.0
│ │ └── svelte@5.36.17 deduped
│ └── svelte@5.36.17 deduped
├─┬ prettier-plugin-svelte@3.4.0
│ └── svelte@5.36.17 deduped
├─┬ svelte-check@4.3.0
│ └── svelte@5.36.17 deduped
└── svelte@5.36.17２．検証環境の準備（SvelteKit）
任意のディレクトリで「npx sv create 検証APPフォルダー名」を
入力します。選択項目は、以下を参照ください。
$ npx sv create my-app-v5
┌ Welcome to the Svelte CLI! (v0.8.19)
│
◇ Which template would you like?
│ SvelteKit minimal
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◆ Project created
│
◇ What would you like to add to your project? (use arrow keys / space bar)
│ prettier, tailwindcss
│
◇ tailwindcss: Which plugins would you like to add?
│ none
│
◆ Successfully setup add-ons
│
◇ Which package manager do you want to install dependencies with?
│ npm
│
◆ Successfully installed dependencies
│
◇ Successfully formatted modified files
│
◇ What's next? ─────────────────────────────────────────────────────────────╮
│ │
│ 📁 Project steps │
│ │
│ 1: cd my-app-v5 │
│ 2: git init && git add -A && git commit -m "Initial commit" (optional) │
│ 3: npm run dev -- --open │
│ │
│ To close the dev server, hit Ctrl-C │
│ │
│ Stuck? Visit us at https://svelte.dev/chat │
│ │
├────────────────────────────────────────────────────────────────────────────╯
│
└ You're all set!
次にプロジェクトフォルダーへ移動してアプリを起動します。
※my-app-v5は、アプリプロジェクトフォルダー名です。
適宜変更ください。
「cd アプリプロジェクトフォルダー名」
「npm run dev -- --open」
$ cd my-app-v5
$ npm run dev -- --open３．フォルダー構成
今回の検証環境のフォルダー構成です。
※node_modulesは除いてあります。
$ tree -I "node_modules"
.
├── package-lock.json
├── package.json
├── README.md
├── src
│ ├── app.css
│ ├── app.d.ts
│ ├── app.html
│ ├── lib
│ │ └── index.ts
│ └── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── v4
│ │ └── +page.svelte
│ ├── v4and5
│ │ └── +page.svelte
│ └── v5
│ └── +page.svelte
├── static
│ └── favicon.svg
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
8 directories, 16 files４．Svelte v4までの従来の記載方法
リアクティブに計算される変数doubled4の前に「$: 」をつけています。
src/routes/v4/+page.svelte
<script>
let count4 = 0; // 状態の定義
$: doubled4 = count4 * 2; // 派生値（リアクティブ）
function handleClick() {
count4 += 1;
}
</script>
<main>
<h2>Svelte 4 従来のスタイル</h2>
<button
onclick={handleClick}
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow"
>
Clicked {count4} {count4 === 1 ? 'time' : 'times'}
</button>
<p>{count4} doubled is {doubled4}</p>
</main>
５．Svelte v5 Runesの記載方法
リアクティブに計算される変数doubled5へ$derivedを用いて代入しています。
src/routes/v5/+page.svelte
<script>
let count5 = $state(0); // 状態の定義
const doubled5 = $derived(() => count5 * 2); // 派生値（リアクティブ）
function handleClick() {
count5 += 1;
}
</script>
<main>
<!-- Runes構文の表示 -->
<h2>Svelte 5 Runes スタイル</h2>
<button
onclick={handleClick}
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow"
>
Clicked {count5} {count5 === 1 ? 'time' : 'times'}
</button>
<p>{count5} doubled is {doubled5()}</p>
</main>
６．注意点
a. v4以前とv5の記載方法の混在
派生値（リアクティブ）の書き方で新旧を一つのファイル
に記述はできません。
Runesの書き方（$derived や $effect）を使った場合に
旧の書き方（＄： 〜）はエラーとなります。
b. compilerOptionsについて
Svelte v5（正式リリース以降）では、svelte.config.jsに
compilerOptions: { runes: true }の追記が不要となったようです。
今回の検証でも設定は特に入れておりません。
では
