ネクストビートでは主幹プロダクトにSvelte/SvelteKitを採用しています
こんにちは！ネクストビートエンジニアの石川と申します。
以前こちらのブログでも紹介させていただきましたが、弊社ネクストビートでは、主幹事業である「保育士バンク！」にフロントエンドフレームワーク「SvelteKit」を採用しています。今回はそのSvelteKitおよびSvelteについて簡単に紹介しつつ、なぜ採用しているかについてお話しできればと思います。
Svelte/SvelteKitとは
まずはSvelteについてご紹介します。
Svelteは2016年に立ち上がったフロントエンドフレームワークです。ReactやVue.jsに次ぐフレームワークとして注目を浴びていて、State of JavaScript 2021の結果からも、Svelteに対する高い期待度が感じられます。
このSvelteにサーバ機能などを付与したものがSvelteKitになります。Reactに対するNext.js、Vue.jsに対するNuxt.jsのような立ち位置になります。
なぜSvelte/SvelteKitを採用しているか
ここからは、なぜ「保育士バンク！」でSvelteKitを採用しているかについて、採用にいたった経緯も合わせてお話ししたいと思います。
保育士バンク！は弊社の中でも最も歴の長いプロダクトです。どのプロダクトでも稼働歴が長くなるとともに負債の蓄積は避けては通れない道だとは思いますが、保育士バンク！もその例に漏れず様々な負債を抱えた状態になっていました。
この負債を解消し、なおかつ生産性の向上を図るべく、2022年から技術構成刷新のプロジェクトが立ち上がりました。
保育士バンク！はそのプロダクトの特性上、求人情報などの基本的なコンテンツの表示や、サイト登録などのフォームの機能等が実現できればよく、Webアプリケーションとしてはシンプルなものになります。弊社ネクストビートでは、全社的に PlayFramework(Scala) + Angularという技術構成で開発を行なっているのですが、この特性を考えた時に、Scala + Angularでの開発はやや冗長であり、また学習コストも比較的高いことが課題として挙げられます。
上記の課題を解消する上で、Svelte/SvelteKitは非常に良い選択肢となります。
Svelteの特徴（というよりは思想）の一つとして、Write less codeが挙げられます。
こちらの記事にもあるように、コード量を減らせば他のことに充てられる時間が増えます。保育士バンク！は様々な施策を素早く回していくことがより重要になるプロダクトなので、この恩恵を受けやすく、プロダクトのグロースに注力することができると言えます。
またSvelteは学習コストも非常に小さい言語です。上記のWrite less codeは学習コストという面でも活きてくる特徴です。
その他にも、Svelte公式サイトで提供されているREPLが学習面で非常に役立ちます。このREPL内でSvelte自体の確認は一通りでき、少し複雑な処理の実現方法を調べる際にも、REPLを使用して共有されているものが多く、その場で処理を確認することができます。初学者がコードを書いていく上で、学習をこのREPL上で完結できることは非常にメリットになります。
これらの理由から、保育士バンク！ではSvelte/SvelteKitを採用することになりました。現在は過渡期であり、今年中にサイト全てが刷新される予定です。
Svelte/Sveltekit開発の感想
筆者自身、刷新プロジェクトでSvelte/Sveltekitを書いていますが、特に学習コストの低さを実感しています。筆者はネクストビートに入社するまでフロントエンド開発の経験がほぼなく、Svelteが初めてのフロントエンド開発に等しいのですが、すんなりプロジェクトに入ることができました。
要因としては、上述したREPLによる学習も効果的ですし、viewに関わる記述（HTML, script, css）が1ファイルで完結しており、HTMLをそのまま書いている感覚に近いところも、キャッチアップ速度の向上につながっていると感じました。
まとめ
今回は、弊社ネクストビートでなぜSvelte/SvelteKitを採用しているかをお話ししました。今後は保育士バンク！以外のプロダクトにもSvelteKitを採用していく予定であり、Svelte/SvelteKitに関する技術的な知見等も増えていきますので、情報発信していければと思っております。
最後まで読んでいただきありがとうございました！
We are hiring!
「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
