0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Svelteの好きになれないところ by Vue.js派

0
Posted at

1) リアクティビティにもコンパイラ・マクロ

Runesは全てコンパイラ・マクロです。

Runes記法は、コンパイラ・マクロありきの記法です。

コンパイラ・マクロとは、コンパイラが解釈し、等価なコードに変換する、コンパイラ用の構文です。シンタックス・シュガー(糖衣構文)の変換によく利用されます。

SvelteのSFC(Single File Component)の外で、SvelteのRunesの機能を利用するには、拡張子を「.svelte.(js|ts)」にしなくてはなりません。

SvelteのRuneのリアクティブ機能の1つである$stateは、シンタックス・シュガーに過ぎないため、カスタマイズ生成に欠けています。

$stateで定義した変数はコンパイラにより、proxy or getter/setter(define property)に変換されます。

Runesのリアクティブ機能がVue.jsのリアクティブ機能より優れている点は、覚えることが少なくてすみコードを短く記述できることだけです、汎用性や柔軟性では劣っています。

Vue.jsでは、リアクティビティにコンパイラ・マクロを導入するリアクティビティ・トランスフォームが実験的に導入されましたが、SFC外では使えず、SFC内でも、記法の異なるコードが混在することがあり、紛らわしく、後方互換性もないため、正式採用されることなく、廃止されました。

SFC外でコンパイラ・マクロを使うにために、Svelteライクに、拡張子「.vue.(js|ts)」を導入して、コンパイラにコンパイル対象であることを認識させるテもあったはずですが、採用はされませんでした。

Vue.jsでは、新たなコンパイラ・マクロ「$ref etc」をデフォルト導入し、コンパイラ・マクロをより広範囲に使用するようにする案は実験的導入の末、却下されました。

Vue.jsのコンパイラ・マクロ(define〜)は、型情報をSFCコンパイラに提供する機能であり、SFCコンパイラは、与えられた型情報をもとに、SFCの<script setup>を等価なsetup関数に変換し、出力します。

Vue.jsでは、customRefにより、カスタマイズしたRefを作成できます。

また、shallowRefにより、トレードオフ(オブジェクトの中身の変更検知には手動での変更のトリガーが必要)はあるものの、変更の検知に掛かるコストを低減できます。

2) コンパイラ頼み、すぎる

Svelteは、コンパイラによるコード変換を多用しすぎています。

Svelteは、コンパイラを介することなく、コードを書くことはできません。

Svelteがマジックすぎる、といわれる所以です。

Vue.jsは、コードが長くなったり、面倒だったりはしますが、コンパイラを介することなく、コードを記述することはできます。

(Vue.jsのSFCコンパイラはSFCを等価なコードに変換し、テンプレート・コンパイラ はHTMLテンプレートを等価なレンダー関数に変換します。)

3) Runesの命名etcにReactみ

useState→$state、useEffect→$effect

命名や設計まわりにReactみを感じます。

Svelteの原作者がVercelにJoinした影響かと思われます。

4) グローバルな状態管理が微妙

グローバルな状態管理については、JSのグローバルな変数として定義して共有する形になっていて、Vue.jsではアンチ・パターンになっている形で書かざるを得ず、微妙な感じです。

5) Svelte Kitが微妙

ファイルベース・ルーティングのファイル名の命名規則)が微妙だったり、Remote Functionが導入されたり、して、Nuxtに慣れてると、「これ、どうなの」感があります。

v2がRunes登場前にリリースされ、サーバーサイドとの連携まわりが後付けでRune対応していってる印象。

v2はRunes登場前に設計されているので、Runes登場時は、Runesを採用して書いたコードとv2のサーバーサイドのコードの連携の書き方がわからず、Svelte Kitのサーバーサイドまわりの勉強を放棄しました。

Svelte Kitは、メジャー・バージョンだけでなく、マイナーバージョンでも、結構、既存の機能への変更が入ります。

v2でのわりと大きな変更としては、Viteまわりへの変更があります。ViteのEnvironment APIへの対応で、Viteの設定ファイルの記述が変わり、Svelte Kitの設定まわりが、Viteの設定ファイルに一元化されました。

マイナーバージョンのアップデートでは、コードを変更しなくても動作するので、変更に追従していなくても困りませんが、変更内容によっては、メジャーバージョンのアップ時に変更前のコードが動作しなくなったりするので、マイナーバージョンのアップデート時に変更に追従しておくことをオススメします。

この前、v2で書いた小規模なコードをv3にアップデートしたところ、簡単に移行できました。(手書きでの移行方法がドキュメントになかったので、移行コマンドを使用。)

マイナーアップデート時に変更に追従していた、ので、移行コマンド一発で済みましたが、変更に追従していなかった場合、移行コマンド一発で済んだかは不明です。

Svelte Kitも、Svelteの原作者がVercelにJoinした影響からか、ReactやNext.jsの影響を色濃く受けている感があります。

Loaderまわりは、Remix v2の影響をもろに受けてる感じです。

推敲中 かも…

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?