当社プロダクトにおけるフロントエンド技術スタックの展望
はじめに
こんにちは。Skillnoteでフロントエンジニアをしてる顧です。本記事は Skillnote Advent Calendar 2025 の14日目の記事です。
今回の記事はSkillnoteのフロントエンドで現在採用している技術スタックと、今後の展望について紹介します。
現在のフロントエンド技術スタック
Skillnoteでは、バックエンドにSpringBootを採用し、画面のベースとなるHTMLはThymeleafを用いてサーバーサイドで生成しています。この構造でルーティングをサーバー側で管理しつつ、フロントエンドでの動的な表現はVue.jsで実装している形となっています。
また、Vue.jsについては基本Vue3とTypescriptを使っていますが、現在Vue2で開発されたコンポーネントも残っているため、この部分を順次にVue3に移行しています。
今後の展望
-
Vue3 x TypeScriptへの完全移行
今後のフロントエンドにおける重要な取り込みの一つとして、残っているVue2部分をVue3へ完全移行を進めていく方針です。
現在はVue2とVue3が併存している状態ですが、Vue3への移行を段階的に進めることで、将来的な保守性の向上と技術負債の解消を目指します。
移行にあたっては、既存機能への影響を最小限に抑えることを優先し、大規模な一括置き換えではなく、機能改修やリファクタリングのタイミングに合わせて順次Vue3へ移行していくと同時に、型安全性を重視したTypeScriptを採用しています。
また、新規開発については原則としてVue3を採用し、Composition APIとTypeScriptを中心とした設計に統一していきます。これによりフロントエンドの開発・保守のしやすさと型安全性の向上を目指しています。 -
vue-routerでクライアントサイドルーティングへの移行とSPAを実現
サーバーサイドで管理している画面遷移を、vue-routerによるクライアントサイドルーティングへ移行し、SPA化を進めていく方針です。
現在の構成では、SpringBootとThymeleafによってルーティングと画面遷移を制御し、その上でVueを用いてUIを動的に描画しています。画面遷移のたびにサーバー側のテンプレートに依存するため、フロントエンド側の設計自由度や拡張性が制約せされることがあります。
今後は、vue-routerを用いて画面遷移をフロントエンドで一元管理し、状態管理やUIロジックを含めたSPA構成へ段階的な移行を計画しています。
SPA化することで、共通レイアウトのHTMLを画面ごとに重複して実装する必要がなくなり、ユーザー情報などのAPIも初回表示時に一度取得すれば済むようになります。また、画面遷移時には必要な差分のみを更新するため、画面切り替えが高速になり、ユーザー体験の向上が期待できます。
さらに、URLを単なる画面遷移のためだけでなく、ユーザーの閲覧モードや入力状態を表現する手段として活用できる点もメリットの一つです。例えば、URLの末尾に/editを付与することで、同じ画面を編集モードで直接開くといった制御が可能になります。
フロントエンドとバックエンドの責務分離によって、フロント実装の自由度とユーザ体験の向上する、一石二鳥の効果が期待できると思います。 -
モダンなエコシステムへの対応
フロントエンド基盤の進化に合わせて、今後はよりモダンなエコシステムの活用も視野に入れています。
その一例として、ビルドツールにはWebPackを廃止しViteを採用することで、煩雑なconfigファイルの設定から解放されるや、開発時の起動速度アップで開発体験の向上を目指しています。特にアプリケーションの機能の拡大に伴ってビルドの待ち時間を削減することは開発者体験に大きく貢献できると思います。
状態管理について、上記のvue-routerの導入によってPiniaの導入も検討しています（一部画面ではすでに使用しています）。PiniaはVue3との親和性が良く、シンプルで見通しの良いAPIにより、画面を跨いだの状態管理が可能です。これによって無駄なサーバー通信も削減することができ、localStorageに頼っている実装も捨てることが可能になります。
その他開発者体験へ寄与できるライブラリやツールについても、今後積極的に取り入れて開発者が開発しやすい環境を作っていきたいと思います。
Discussion