Vue 2 から Svelte への移行

• 2年間 Vue 2 を使ってきたが、今後は保守されないため移行を決定
• Vue 3 と Svelte で迷った末、Svelte を選んだ理由を整理

Svelte と Vue 3 の比較

• JS 開発者アンケートで Svelte のリテンションがより高い
• Svelte は
  • Type のサポートがより優れており、グローバルアクセスを制限する
  • （個人的には）文法がよりエレガントでユーザーフレンドリー
  • <template> のような追加の HTML が不要で、そのまま使える
  • スタイルが自動的にスコープ処理される
  • データを更新するために算出プロパティを必要としない。単に => 関数を書けばよい
  • 純粋な JS プラグインの追加がより簡単
  • 仮想 DOM なしでコンパイルされ、より最適化されて高速にタスクを完了できる
  • 宣言した変数によってデータが自動更新される

Svelte にも欠点はある

• 比較的小さなコミュニティ（2019年に登場したため）

どのように移行したのか？

• 時期 : アプリ利用者が減った 8 月にマイグレーションを実施
• 所要時間 : すべてのファイルを Vue から Svelte に移行するのに 2 週間かかった
• 開発者数: フロントエンド開発者 2 名が 2 週間フルタイムで作業し、もう 1 名が 1 週間フルタイムで加わり、合計 3 名
• ワークフロー : Notion で開発者にチケットを割り当て、新しいコンポーネントは Storybook に作成し、各開発者が決められたページを Svelte で書き直した
• スタートアップだったため、対象ファイルが何千件もあるわけではなく、作業は比較的簡単だった
  ただし、SvelteKit がまだ活発に開発中だった時期にリスクを取って移行したため、移行から 1 か月後に大規模な変更を実施しなければならなかった。しかし、SvelteKit チームが優れたマイグレーションガイドを提供してくれたおかげで、新しいアップデートにも簡単に適応できた。9 月には SvelteKit チームがフレームワークがついに RC 段階に入ったと発表し、安定性も確保された
• ファイル & コンポーネント構成 : SvelteKit の "folder-based routing" が大きな助けになった。各ページをサブページに分割でき、標準変数名である "loading" や "submit" などを再利用できる。さらに、レイアウトが関連するルートに統合されているため、アクセスがより簡単になった。

何を得られたか？

• より向上し、より滑らかなパフォーマンス
• より良い開発者体験
• 高速なコード実行
• SSR の稼働と運用
• 簡潔で理解しやすいコード
• 型チェックエラーの解消