Svelteのコンセプトに心打たれ、触れてみて書きやすさに感動し、Runeの使いやすさに涙した…けど、たった一点の理由で結局Vueに帰還したお話

先日バージョン5が公開されたSvelteを二週間ほど触ってみました。
仮想DOMを使わず、コンパイラーでコードを出力し高速な処理を実現するというコンセプトや、サンプルコードの見やすさに感心し興味が湧いたからです。

実際に使ってみるとまぁ本当にコードが書きやすい。
私は元々Vue開発の経験があったのですが、Vueで「めんどくさいなぁ」と感じた諸々の箇所がとても分かりやすくなってたのが非常に好印象でした。

個人的にsvelteがステキだと思った要素は以下の通り。

リアクティブ変数の仕様がシンプル

まず、Vueでコードを書く際に多用するrefやreactiveはsvelteだと必要ありません。常時全ての変数がリアクティブです。
算出プロパティを表現するのも$記号一つで済みます。

vue

import { ref, reactive } from 'vue';
const hoge = ref(0)
const fuga = reactive({
    hage: true,
    boke: ""
})
const honya = computed(() => hoge + 1)

svelte

let hoge = 0
let fuga = {
    hage: true,
    boke: ""
}
$: honya = hoge + 1

値にアクセスするのにvalueを参照しなくていいため書き間違えも起こしにくいです。

HTML部分の記述もシンプル

HTML部分の記述ルールもsvelteは大幅に簡素化されており、vueではdiv要素などにv-ifやv-forを付けて実装していたDOMの分岐・繰り返し処理も、専用の{#if}や{#each}のブロックで実装できるため処理の区切りがとても分かりやすいです。

vue

<div v-if="...">
 ...
</div>
<div v-else-if="...">
 ...
</div>
<div v-else="...">
 ...
</div>

<div v-for="... in ...">
 ...
</div>

svelte

{#if}
 ....
{:else}
 ....
{/if}

{#each ... as ...}
 ....
{/each}

ね、一目瞭然でしょう？

この分かりやすさに心打たれ、ここ二週間ずっと暇さえあればSvelteの学習に励んでいました。

ちょうど同時期にTauriも勉強してたため、しばらくSvelte+Tauriの構成でデスクトップアプリ開発に励み、
試行錯誤の結果、Elin Portrait EditerとElin Auto Backup Toolという二種類のアプリもリリースしています。

新機能Runeも良い感じ

Auto Backup Toolを開発した段階ではsvelteにもだいぶ慣れてきたので、V5からの新機能であるRuneにも手を出してみました。

Runeとは、分かりやすく言うとVueやReactのstateです。
.svelteファイル以外のjs/tsファイルでも、拡張子の前に「.svelte.」が付いていればsvelteの構文が使えるため、コンポーネントの外でstateの宣言が可能です。
Vueのpiniaでも外部のtsファイルでstateの宣言が出来ますが、Runeはimportもキーワードも不要でよりシンプルに記述できます。

nantara.ts

import { defineStore } from "pinia"

export const hogeStore = defineStore("sample", {
    state: () => {
        return {
            hoge: "",
            fuga: ""
        }
    }
})

nantara.svelte.ts

export const myState = $state({
    hoge: "",
    fuga: ""
})

Runeの便利なところは宣言したStateのオブジェクトをそのままコンポーネントでimportして値にアクセスできること。
piniaも同じことが出来ますが、Runeは宣言不要で取り出してすぐ中の値にアクセスできます。
(エクスポートした値そのものは変更できないので注意)

honyarara.vue

import { hogeStore } from './other-store'
const hoge = hogeStore()

hoge.$patch = { hoge: "hoge" }

honyarara.svelte

import { myState } from './other-store'
myState.hoge = "hoge"

Svelteめっちゃ快適！！しかし……

以上のようにVueと比較すると大幅に簡略化され便利になっているsvelteですが、ある一点の理由で残念ながらしばらく採用を断念せざるを得ませんでした。それは……

最新版に対応したdevtoolが無い

これが本当に残念でならない。
svelteもvueやreactと同じくコンポーネント内のリアクティブな変数の変更はdevtool無しでは検出が難しいです。
しかし、現段階では最新のSvelte V5に対応したdevtoolはまだリリースされていません。
せっかく使えるようになったRuneも、コンポーネントを超えて値を保持するstateをdevtool無しで運用していくのはナン ノブ マイ ビジネス（夜に影を探すようなもの)、
ちょっと厳しいです。

まとめ

というわけで、しばらくの間はVue主軸で開発を続けようと思います。
Svelteの快適さは本当に魅力なので早くv5対応のdevtool(欲を言えばスタンドアロン版も)出てほしいなぁ