株式会社エス・エム・エス Advent Calendar 2024 シリーズ 2の12月19日の記事です。カイポケリニューアルプロジェクトでエンジニアリングマネージャーをしている荒巻( @hotpepsi )です。この記事では、カイポケリニューアルプロジェクトでのフロントエンドチームの2年間の活動をお伝えしたいと思います。
フロントエンドチームの発足
2022年末、ユースケースをもとに、フロントエンドとバックエンドそれぞれで開発していくことになり、フロントエンドチームが発足しました。
詳しい経緯はこちら: 大規模SaaS 「カイポケ」の未来を支えるフロントエンドの技術選定
二つのアプリケーションと土台の検討
プロジェクトの最初のターゲットとして、二つのアプリケーションから着手していくことが決まりました。 共通部分を見据えて、まずはデザインシステムや開発ガイドライン、ディレクトリ構成の検討やテストライブラリの導入など、土台を整備するところからスタートしました。
デザインシステムやコロケーションなどを採用しました。
必要最小限の構成のNext.js
アプリケーションを構築するにあたり、レンダリング方法やデプロイ方法が選択できるフレームワークとしてNext.jsやNuxtを検討し、土台のフレームワークとしてNext.js、GraphQLのクライアントとしてApollo Clientを採用しました。
まずは、できるだけシンプルにPages Routerでクライアント側のレンダリングのみで開発していきました。静的ファイルをCloudFrontで配信しており、リダイレクトとCloudFront Functionを活用することでDynamic Routesもハンドリングできるので、いまのところ配信用のNode.jsも不要になっています。
デザインシステム
デザイナー陣は、UIドラフトから決定稿までをFigma上で作成しています。デザイナーの意図通りのUIを実現するため、FigmaとReactコンポーネントの双方で利用可能なデザインシステムを整備することにしました。コンポーネント名を揃えて、フォントやトークンなどがそのまま使えるようにしたので、Figmaが実装後のレビューやQAチームの確認にも使えるようになっています。
フロントエンドの実装としては、Chakra UIをベースとして、StorybookとChromaticでカタログを構築しています。
コロケーション
当初はテストを __tests__ に置くなどしていたのですが、コンポーネントが増えていくことに伴い、テストやGraphQLのファイルを別のディレクトリに置くと、いちいち探す手間がかかるので、同じディレクトリに置くことにしました。(このブログ記事などを参考にしました。 https://www.mizdra.net/entry/2022/12/11/203940 )
pageExtensions に page.tsx を指定して、ページのディレクトリにストーリー (.stories.tsx) も配置しています。
@graphql-codegen/near-operation-file-preset を導入することでGraphQLのファイルもコンポーネントのディレクトリに配置できるようになりました。
その他
そのほか、たくさんの技術的チャレンジがありました。そのあたりは去年のアドベントカレンダーの記事「フロントエンドチームで今年やったこと100」に書きました。
長期的な技術課題への取り組み：Tech Lead Teamの発足
2023年も半ばが過ぎ、アプリケーションの開発が進み、デザインシステム・CI/CD・テスト・feature flagなど、リリースを見据えた技術的課題がどんどん出てきました。とはいえ日々の開発では、新しい機能を開発してプロダクトを前進させることに意識が向いており、急ぎの問題は気づいた人が対処したりしていました。
アプリケーション毎のチームで開発を進めていく中で、フロントエンド共通の長期的な技術課題に取り組んでいく必要性が出てきたものの、横断的組織やテックリードといったロールを置いていませんでした。
そこで、横断的技術イシューをピックアップし、それぞれのイシューごとにミニチームを組成する「Tech Lead Team」という枠組みをEMの @atsushisakai が提案しました。チームとしてテックリードの役割を担うことで、チームで議論しながら課題解決し、集合知として蓄積していくことができる仕組みです。
Tech Lead Team 第一期の活動
初期のTech Lead Teamとしては、3ヶ月間で以下のようなことに取り組みました。
- デザインシステムの現状のおさらいと、ロードマップや運用方針の策定
- Chakra UIの現状やロードマップ、周辺ライブラリの調査と、別のライブラリに乗り換えるべきかの検討
- WCAGなどアクセシビリティのガイドラインの調査や、プロダクトへの適用検討の土台として、ペルソナを設定
- デザイナーの主なツールであるFigmaに関して、仕様のやりとりなどの運用上の課題の整理や、より良い連携方法の検討
- カイポケの過去・現在・未来を見据えて、長期的にチームの指針となるような原則や実装方針の整理や議論
週あたりでは数時間の活動ではありますが、長期的にプロダクトを育てていくにあたっての様々な課題が明らかになりました。
Tech Lead Team 第二期の活動
Tech Lead Team第二期では、Design EngineeringとDevOpsという二つの分野で活動しました。
Design Engineering
- Figma APIでテキストやコメントを取得して、状態を管理したりlintにかけたりすることの実用性について検討
- デザインシステムをチームとして運用していく体制の準備
- 高さやシャドウの他社事例の調査や定義
- アクセシビリティの検査方法の検討
DevOps
- pull requestのメトリクスを可視化して、チーム開発やオンボーディングがうまくいっているかどうかなどを分析
- Lighthouseでボトルネックを調査し、バンドルサイズの削減に着手
- Jestの結果をQAチームが見やすいように整形してみる試行
- 別のUIライブラリに部分的に置換していけるかどうかの実験
Tech Lead Team 第三期の活動
第三期では、重要度のファクターを議論し、次のリリースマイルストーンで必要になりそうな課題や、開発体験や品質を上げる取り組みの優先度を上げて取り組みました。
- Webフロントエンド版DX Criteriaをみんなでスコアリングした。毎週45分、Miro上で議論しながら1/4ずつ進めていった
- 現在取り組んでいるプロダクトのフロントエンドの非機能要件について、網羅的にまとめた
- 導入したものの、現時点では最善ではないライブラリからの脱却
- ページヘッダのパターンの整理と共通レイアウトの整備
- 見た目の階層の整理と、ボックスシャドウのトークンの定義
- フォントを極大サイズにしたときの崩れの修正
まとめ
フロントエンドチームが発足して2年ほど経ちました。日々の活動としては職能横断のチームで活動しており、もはや一つのチームではないのですが、引き続き夕会や技術雑談などで全体でも会話する機会を持っています。
活動を振り返ってみて、フロントエンド領域はデザイナーとの連携、アクセシビリティ、パフォーマンス、開発体験など、幅広い視点を持つことの重要性が再認識できました。特にSaaSでは、短期的にはフィードバックを得ながら更新していきつつ、長期的には一貫性やメンテナンス性を保ち、より良いものへ置き換えていくなど、短期と長期のバランスを取る必要があります。
このようにエス・エム・エスは、長く使われるプロダクトへの経験が積める環境です。そして、土台は見えてきたものの、実はまだまだ、作りたいものが山積みな状況です。フロントエンドだけでなく、様々なポジションで開発メンバーを募集しています。興味を持った方は、ぜひお気軽にお声がけください。
