プロダクト管理画面にSvelteKitを選定して開発した話

こんにちは！
株式会社villioに業務委託として関わっています。石井(@shichisan737373)とウォーリー(@SagaseW)です。

前回は、実際にユーザー様に使っていただいているプロダクトの技術選定についての紹介を行いました。

今回は、運用担当者（villio社内）で使用される管理画面をプロダクト本体とは違う技術スタック(Svelte-Kit+Typescript)で作りましたので、その経緯と結果についてお伝えします。

管理画面を新しい技術で作るモチベーション

社内で管理画面を作る話が持ち上がってきたときに、「どうせならNext.js ではない技術で作っても良いのでは」と言い出しっぺになったウォーリーです。そう考えた背景みたいなところを書きます。

Next.js以外で管理画面を作うと良いのではと考えた理由は以下です。

1. StateOfJS2022をvillioフロントエンジニアで眺める会をやったときに「使ったことないのが多いな…」「React以外の選択肢もどんどん増えてきてるんだな…」とキャッチアップできてない焦りを感じていたので、僕個人としてReact・Next.js以外の保守・運用の知識・経験を積みたかった

   • 仕事の中で学べるならそんなに嬉しいことはないですよね！！

2. 会社、チームメンバーにとってもReact・Next.js以外の保守・運用の知識・経験が貯まることはプラスになると考えた

3. 会社のアピール材料の1つにもなると考えた

   • 新しい技術を積極的に採用していますというのもそうですが、副業メンバーでも声を上げやすく、その一声が実際にプロダクトに反映される風通しの良さ、発言のしやすさがvillioにはあります…！あります！！！

そんなことを思いながら「Next.js以外で作るのもありじゃね？」と声をあげてみたところ、エンジニア社員1号の石黒(@yuuis0)も快くOKしてくれて、実際に技術選定段階へと進みました。

(後日、新しい技術使うことに対しては特に懸念はなかったのか？と社員エンジニアの石黒や他のバックエンドエンジニアに聞いてみたところ
「楽しいやつ使うのがよいよね！」
「 フロントエンドは技術update早いのでこういうのキャッチアップするの大事そう」
と、前向きに捉えてくれてました…！)

選定フローについて（選定結果と理由も同じセクションにて記載）

管理画面の技術選定にあたり、以下のような選定の観点整理を行いました。

選定の観点

• フロントエンドメンバーのモチベーションになる技術かどうか

• 今後も継続的に開発がされる技術かどうか

• 今後の管理画面拡張に関して、拡張性をもった状態を作り続けられるかどうか

• 認証や実装すべき機能を技術的に実現可能かどうか

• 現段階である程度成熟しているか（正式リリースしているかどうかも一つの観点となりうる）

列挙した観点は、どれも重視しましたが、特にメンバーのモチベーションになるかどうかはチームメンバーにも共有し、メンバーの意見も吸収しながら意思決定していきました。

次に、上記観点を踏まえながらStateOfJS2022に記載されている技術から使いたい技術をリストアップしました。

選定技術スタック候補

フロントエンドフレームワーク

• Svelte

• SolidJS

• Qwik

レンダリングフレームワーク

• Remix

• Astro

• SolidStart

• SvelteKit

ビルドツール(optional)

• vite

• esbuild

テストツール

• vitest

• testing-library

• Playwright

モノレポツール

• turborepo

リンターツール

• Rome

その他のツール

• zod

選定結果

最終的には SvelteKit + TypeScriptを基本構成とする方針に決まりました。
選定理由としては以下です。

• SvelteKitがここ2年かけてProduction Readyな状態になっていること

• メンバーと話し合って、 vite , vitest , Playwright を使いたいという話になり、これらすべてがデフォルトで導入されている + 導入が容易であること

• 今回は、普段使用している技術とは少し違うものに挑戦したいというチームのモチベーションもあったため

その他細かいライブラリなどは以下を導入しています。

• TailwindCSS

• zod

• Romeは使用してみたかったのですが、HTMLやCSSのリンター、フォーマッターの機能が現時点（2023/3）ではないため、ESLint + Prettierの方式を採用する方針に決めました。

実際に作ってみてどうだったのか

• 実際にSvelteKitを導入するに当たり、Svelteのインプットから始めましたが、チュートリアルがインタラクティブでとてもわかり易く、素早くキャッチアップすることができました。

• SvelteはどちらかというとVueと似ていて、Reactとは違う考え方・書き方なので結構戸惑いはしますが、その違いに面白さを感じています(リアクティブプログラミングはReactはuseEffectのdepsとかで書き手が頑張る、Svelteはコンパイラが頑張る、みたいな違いがあるのかなと)。

• vite,vitestの圧倒的処理速度に感動しています。

まとめ

今回は管理画面の技術選定についてお話しました。

管理画面はこれから機能拡充されたり開発は継続されるため、新しい技術での知見が貯まるのがとても楽しみです。

株式会社villioではこのように積極的に新しい技術を触ることができるメンバーの価値観や文化がありますので興味のある方はこちらの採用ページを見てみてください！

villio Entrance Book