2024年 | コミュニティオのフロントエンド技術スタック

こんにちは！ 株式会社コミュニティオのしまだい(@cimadai)です。

コミュニティオは別の会社のR&D部門として活動していたチームが2019年にスピンアウトして設立した会社で、設立以前から使っていた技術スタックからさまざま変遷してきております。

そんなコミュニティオのフロントエンド技術スタックについて、2024年の状況をご紹介します！

プロダクトについて

現在コミュニティオでは、ブラウザやTeamsからサンクスカードを送ったりデジタルギフトを送ることができるTeamStickerというサービスと、Teams上で何万人であっても高速に一斉配信できるNewCommunicatorというサービスを提供しています。
https://teamsticker.jp
https://newcommunicator.net

TeamStickerは2019年の創業前から継続開発していたサービスで、NewCommunicatorは2023年にリリースしたサービスです。
これらのプロダクト以外にも、顧客テナントの管理用のバックエンドシステムや粒の小さなツール系も多くあり、全体的な技術スタックは以下にまとめてあります。

https://whatweuse.dev/company/communitio

フロントエンドまわりの技術スタック

フロントエンド周りは言語は100%TypeScriptで書いており、フレームワークとしてはVueとReact両方を使っています。

古くは、サーバーサイドのフレームワークである Play Frameworkによって提供される仕組みでMPAで構築されていました。
そこから「Playからの分離」「Vueの採用/SPAに移行」「Vuetifyの採用」など徐々に近代化してきたという流れになっています。

また、Vue2のEoL問題に端を発し、Vue3とReactの双方の検討を進める中で現時点ではどちらも利用している状況です。ここに関しては間違った選択だったと思っていて、Vue3に統一する方向で進めていく予定です。

ビルドシステムは以前はWebpackを利用していましたが、現在は主要プロダクトから徐々にViteに移行しています。

単体テストに関してはmocha、chai、jestなど変遷をしながら、現在はvitestを利用しています。
E2EテストについてはCypressを利用していますが今後はPlaywrightへの移行も検討しています。

コードスタイルについてはチームで共通のESLint設定/Prettier設定をまとめたものをprivate npm packageとして共有して利用しています。

選ばなかったもの、あるいは辞めたもの

技術の多様性、再利用性、独立した開発とデプロイ、といった面に誘われ、マイクロフロントエンドを採用することも検討していましたが、現在のチーム体制やプロダクトの規模、開発スピードなどを考慮して、採用を見送っています。

デザインフレームワークとして、Bootstrapを当初から利用していましたがVuetifyに移行しています。CSSは一貫してSCSSを利用しています。

ビルドシステムについて、WebpackからViteに移行しました。合わせてテストもjestからvitestに移行したことでCI/CDが非常に高速になりました。

また、Vueによる開発時にvue-cli-serviceを利用していましたが、viteのdevサーバーにすることで開発時の体験も格段に向上しました。

Vueに関してはもともとはClassComponentを利用していましたが、deprecatedになってしまったこともありCompositionAPIに移行しています。

このあたりの移行シリーズについては別の記事でそれぞれ解説していきます！

今後どうしていきたいか

技術の移り変わりが激しいフロントエンド技術スタックにおいて、会社やプロダクトの成熟度合い、チームとしてのスキル、開発スピードなどを考慮して様々に移り変わってきたコミュニティオのフロントエンド技術スタックですが、まだまだ進化の道半ばです。

今後はUIフレームワークに寄り添った実装にしていったり、非エンジニアとも具体的な画面を見ながら議論できるようにStorybookを導入していくなど、より開発効率を高めるための取り組みを進めていきたいと考えています。

コミュニティオでは今後更に多くのお客様に高品質で価値あるサービスを提供していきたいと考えており、一緒に働いてくれる仲間を募集しています！

ちょっと話聞いてみたい、と思っていただけましたらカジュアル面談もしておりますのでお気軽にお申し込みください！

https://pitta.me/matches/siCukXVECgxP