こんにちは。フロントエンドエキスパートチームの@nakajmgです。
私が所属しているフロントエンドエキスパートチームは、プロダクトのフロントエンドを横断的に支援するチームです。今回はフロントエンドエキスパートチームが行っている、プロダクトへの支援活動について紹介します。
フロントエンドエキスパートチームがどういったチームかに関しては、次の記事をご覧ください。
フロントエンドエキスパートチームの活動
サイボウズは主力プロダクトとしてGaroonとkintoneを提供しています。この 2 つのプロダクトはそれぞれ提供開始の時期が 2002 年と 2011 年となっており、浅くない歴史を持っています。
サイボウズの Web フロントエンドは、フロントエンド専任ではないエンジニアがバックエンドと合わせて担当しています。そうした背景もあり、フロントエンドをモダンなスタックへ移行する対応などは積極的に行われていないという状況があります。
フロントエンドエキスパートチームは発足して 2 年ほどのチームですが、このような状況でチームが行ってきた、または行っている活動はおもに次のようなものです。
- プロダクトの問題を解決する
- kintone で使われていた Compass の依存解消
- Garoon への Sass 導入
- 社外の開発体験を向上させる
- kintone カスタマイズやプラグインの開発に使う SDK の改善
- 社内の開発体験を向上させる
- Closure Tools から React + TypeScript への置き換え
- 最新技術の調査と共有
- ブラウザの最新動向チェック
- プロダクトチームを交えたモブプロ
ここで挙げた以外にも、Web サイトの改善、社内勉強会やFrontend Weekly ランチといったフロントエンドの情報を社内に共有する会などを行っています。
プロダクトが抱えているレガシーに向き合う
脱 Compass や Sass の導入といった項目だけをみると、2020 年にもなった今になってそんなことをやっているの？と思われるかもしれません。
しかしながら、プロダクトが抱えている技術的な負債の返却は一朝一夕で行えるものではありません。前述したとおり、kintone も Garoon も歴史を積み重ねており、コードベースが巨大なものになっています。いかにデグレを起こすことなく、問題を解決して開発体験の向上が図れるか、そういった観点から慎重に対応する必要がありました。
段階的な脱レガシー
脱 Compass と Sass の導入にしても、もっと最新のイケてる技術で置き換えればいいのではと思いがちですが、動いているコードは様々な積み重ねでできていることを忘れてはいけません。
脱レガシーを目的として行う置き換えやリファクタリングは、エンジニアの開発体験を向上させるとともに、ユーザーへ価値を届ける速度や品質が落ちないようにするためのものです。これによって不具合を出してしまっては本末転倒になります。
そういった中で取る対応は、現実的なコストで、いかに既存の機能に影響を与えることなく、少しでも多くの負債を返済することだと考えています。
kintone や Garoon の場合はそれが脱 Compass や Sass の導入といったものでした。小さな一歩のように見えますが、プロダクトに関わるメンバーにとっては決して小さくないです。
大規模なレガシーに向き合うためには、腰を据えて段階的に改善をすすめていくのが最善手であると考えています。
開発体験の向上支援
脱レガシーへの対応と合わせて、開発体験の向上支援もフロントエンドエキスパートチームの重要な活動の一つです。この活動は社内に限らず、社外に向けた活動もあります。
サイボウズが提供している kintone は、HTML や JS や CSS を使ってユーザーが見た目をカスタマイズしたり、プラグインを作って機能を拡張できる仕組みがあります。カスタマイズやプラグインの開発を行う企業や個人の方が増えており、kintone のエコシステムは広がりを見せています。
フロントエンドエキスパートチームでは、このエコシステムの拡大を目指すとともに、カスタマイズやプラグインを開発するユーザーの体験を向上するための取り組みを行っています。
関連ツールやエディター連携、メタデータの管理やテストとデプロイなど、開発する上でのライフサイクル全般でベストプラクティスが実現できるような環境を作りたいという思いで取り組んでいます。
具体的な活動内容としては kintone のREST API Clientの開発を行っており、この活動は GitHub 上でオープンにロードマップを公開しながら進めています。
プロダクトに関わるユーザーの体験向上も、プロダクトの改善と同じように重要だと考えています。
次の段階
フロントエンドエキスパートチームは、前述した以外にもいろいろな活動をしています。
その中でも、現在は kintone で使っている Closure Tools を React + TypeScript へと置き換える取り組みに力を入れて進めています。
この React 化の取り組みも一度にすべてを置き換えるような計画はしていません。段階的に部分部分を置き換えていって、徐々に React で書かれている部分を増やし、最終的にコードベースのほとんどが React で書かれている状況を目指しています。
既存コードと向き合いながら少しずつ前進しており、確かな手応えを感じています。
React 化の取り組みは現在フロントエンドエキスパートチームが主導していますが、これは近いうちにプロダクトチームが主導する形へと引き継がれる予定です。
フロントエンドエキスパートチームは特定のプロダクトに属するチームではないので、全てをフロントエンドエキスパートチームが行ってしまうと、プロダクトチームにとって別の形で負債となってしまいかねません。
プロダクトチームが主導できるように、フロントエンドに関する技術の共有や、勉強会などを行って支援しています。
おわりに
今回はフロントエンドエキスパートチームの活動について紹介しました。
大規模フロントエンドの脱レガシーは根気がいるものですが、チームとして焦らず着実に向き合っていきたいと思います。
そんなフロントエンドエキスパートチームでは、Web フロントエンド技術が好きな方の応募をお待ちしております。脱レガシーをはじめとした開発体験の向上に一緒に取り組みましょう。
サイボウズでは働く場所に縛りはありません。東京、大阪、広島、福岡、そのほかどんな場所からでも歓迎しています。
