CAMPFIRE のフロントエンドに Svelte を採用しました
こんにちは。CAMPFIRE でフロントエンドエンジニアをしています、tkhs0813 です。
CAMPFIRE は Ruby on Rails で長い間開発・運用されていますが、年々プロダクトが成長し、機能が複雑化するにつれて技術的負債が溜まっている状態でした。
その解決のためにフロントエンド部分を Svelte(Kit) で分離する取り組みを行っており、すでにトップページ、検索ページ、プロジェクト詳細ページを Svelte でリリースしています。
今回は Svelte を選んだ理由や、実際に利用して感じたメリットとデメリットについて紹介します。
Svelte とは
Svelte は React や Vue.js と同じく宣言的に UI を記述できるフロントエンドライブラリです。
大きな特徴として、Svelte はコンパイラであり仮想 DOM を使用していないという点があります。
仮想 DOM はブラウザ上で差分計算を行いますが、Svelte はコンパイル時に差分を検知して DOM 操作を行う Javascript コードに変換を行います。
これにより、ランタイムのオーバーヘッドが大幅に削減され軽量で高速な Web アプリケーションを構築できるという強みがあります。
Svelte を選んだ理由
一部ページで採用している Vue.js と近い
一部のページやパーツで Vue.js を利用していますが、Svelte も Vue.js と同様にコンポーネントを SFC（Single File Component）で構築でき、記法も似ているため、Vue.js の経験があるエンジニアにとって馴染みやすいです。
新しい技術を取り入れて採用に繋げたい
Svelte という新しい技術を取り入れることで、採用活動にもプラスになると考えました。
グループ会社 Livefor での採用実績がある
グループ会社の Livefor で Svelte を採用しており、社内に Svelte の知見があることも、CAMPFIRE での採用を後押しする要因となりました。
Svelte を業務で使ってよかったこと
Typescript との相性が良い
Sveltekit では開発サーバーを立ち上げると `.svelte-kit/types` に型を生成し、サーバー・クライアント間で TypeSafe に開発を行うことができます。
また、後述する svelte-check を利用することで CI でのチェックも行うことができます。
svelte-check が便利
未使用の CSS の検知
Svelte A11yの検知
TypeScript コンパイルエラーの検知
を行なってくれるツールで、デフォルトで組み込まれておりとても便利でした。
パフォーマンス
トップページ、検索ページ、プロジェクト詳細ページを Svelte でリリースしていますが、どれもパフォーマンス向上しています。
特に 8 月にリリースしたプロジェクト詳細ページでは LightHouse のパフォーマンス値を大幅に向上しました。
PC: 83 から 91 に改善
SP: 33 から 60 に改善
採用
Svelte を選んだ理由でも記載しましたが、Svelte を利用したことでフロントエンドエンジニアを 3 名採用することができました。
(私もその中の一人です)
悪かったこと
一方、デメリットとしては、React や Vue.js と比べると利用者が少なくコミュニティが小さいのでエコシステムが小さいという点があります。
スタイリング、状態管理、アニメーションなど Web アプリケーションに必要な機能はビルトインで用意されているので CAMPFIRE ではそこまで大きな問題となっていませんが、チームによっては採用を検討する際の課題になるかもしれません。
最後に
CAMPFIRE はフロントエンドエンジニアを募集中です！
CAMPFIRE での取り組みに興味を持たれた方は下記もぜひチェックしてみてください！
