こんにちは！
Garoonプラグイン開発チームでリードエンジニアをしてます、久保です。
今回は、Garoonプラグイン開発チームの技術スタックについて紹介しようと思います。
まずは、そもそも Garoon とは？ Garoon プラグインとは？というお話を少しできればと思います。
Garoon とは、中堅・大規模組織向けのグループウェアです。API を利用した連携性・拡張性も Garoon の 1つの大きな特徴となっており、それを提供するための機能が「プラグイン」です。
プラグインを使うことでユーザーは API などの知識がなくても、簡単に Garoon の機能を拡張することが可能となります。プラグインは、サイボウズからはもちろんですが、パートナー企業からも多数リリースされており、「エコシステム戦略」の観点からも重要度の高い機能になっています。
サイボウズからは現在6つのプラグインがリリースされていて、これらプラグインの開発・メンテをしています。ここでは1例として、直近リリースした予定複製プラグインを記載します。
また、プラグイン開発ツールをOSSとしても作成し、メンテしています。
garoon-plugin-uploader：
Garoonプラグイン開発チームでは、スクラム開発を採用していて、1週間1スプリントで運用しています。
誰もがすぐバックログを作成できる文化が存在していて、概要や受け入れ条件など記載し、議論してストーリーポイントを付与しています。
基本的にはリファイメントで議論して共通認識を合わせてから、バックログに着手する開発体制です。
また、バックログやチーム状況に応じて、「モブプロかソロでやるのか」を柔軟に選択しています。
ツールとしてはGithubをフル活用していて、要件はGithubのmilestones、バックログはIssues、全体の進捗はProjectsを使用しています。
Github Projectsを使用したバックログボード：
また、普段のコミュニケーションは自社サービスのkintoneを使用しています。Serverless Frameworkを用いて、Githubとの連携も実現していて、雑作業もできるだけ自動化しています。
プラグイン開発では、TypeScript, Reactをベースとしたweb フロントエンドの技術を使用しています。
また、Yarn Workspacesを用いたmonorepoにより、コードの影響範囲の最小化、認知負荷の最小化を実現しています。
採用している主要技術は以下です。
ここでは、どんな技術的な取り組みをしているのか、順を追って詳細に紹介します！
プラグインを複数リリースすると同じコンポーネントや同じデザインの箇所が発生するため、共通コンポーネントライブラリをプロジェクト内で用意しています。
これらのコンポーネントでは、高い水準でデザインの統一感とコンポーネントの品質を担保するために、Storybookをchromaticでホスティングして、かつテストを記述しています。
テストコードの例：
また、サイボウズではアクセシビリティを品質の一部として考えているので、@storybook/addon-a11yを導入したり、専門チームにレビューを依頼することで高い品質を実現しています。
monorepo内のpackageは20個近く存在していて、それら全てで使う設定ファイルを修正すると手間がかかります。また、全てで設定を変更すると言った場合の認知負荷は大きいでしょう。
したがって、Garoonプラグインチームではlint, tsconfig, webpackの設定をそれぞれでpackage化して、使う箇所でimport or extendsして使用します。
ちなみに、vercel/turboを見ている時に、「これはいい！」と思い、採用しました。
ESLintはサイボウズの全社ルールがあるので、それを使っています。
また、tsconfigに関してはtsconfig/strictestをベースとして一部カスタマイズした設定を導入してます。可能な限りの固い設定です。
上記tsconfigの設定でも伝えた通り、TypeScriptを使用している以上、型の恩恵を最大限に享受しようと工夫をしています。
そのため、APIの実行をすべて型推論させるようにして、型レベルでセキュアにAPIを叩けるようにしています。
Garoonでは、garoon.apiやgaroon.events.onといった記法でAPIを実行できる仕組みがあります。通常であれば、型のサポートはないのですが、自前で型定義と型推論が効くようにしています。
これらはTSのConditional Typesをうまく使って実現してます。そうすることで、テストでモックが難しかったり、コストがかかる部分の品質を型のレイヤーで簡単に担保しています。
プラグインの開発では、デザイナーがデザインに基づいてHTML、CSSの雛形を作成します。そのため、プラグイン開発チームのエンジニアはいただいた雛形をベースにロジックやReactで設計をして実装します。宣言的UIを意識しながらカスタムフックをベースに、コンポーネントをなるべく小さく分割していき、保守性を考慮したコードを意識しています。
ディレクトリ構成はbulletproof-reactをベースにして、実際の挙動のメンタルモデルに沿った構成にしています。
また、内部で新規にプラグインを作成するときのためのcreate-garoon-pluginというpackageを内部に用意してます。
これは、create-react-appやcreate-next-appのようなプロジェクト新規作成packageです。
これにより構成やそれぞれの設定などの統一を半自動化してます。(プロジェクト内ではスクリプトにエイリアスを付与してます)
テストに関しては、テスティングトロフィーの思想をベースに、コンポーネントとカスタムhooksに対してユニットテストを重点的に記述してます。
CIはGithub Actionsで実行していて、lintや型チェック、testの実行は一通り行っています。
QAメンバーもいることから、試験をしてからリリースするフローです。
冒頭でもお伝えした通り、Garoonのプラグインは外部の人でも開発可能です。
そのようなパートナー企業や個人に向けて、サイボウズのGaroonプラグインチームでは、プラグインだけでなく、開発ツールをOSSとして開発しています。
garoon-plugin-uploader：
現在はプラグイン自体の開発の優先度を高くしてますが、こういったツール開発もプロジェクトとして力を入れています。
色々新しい技術なども採用しているのですが、課題は山積みです！
大きく2つあります。
1つ目は開発速度です。
新規のプラグインのアイデアや企画はあるのですが、開発速度が追いついてない現状があります。
顧客に価値提供していくことを第一に考えて、チームとしての能力向上や生産性向上をして、開発速度が速くなるように尽力しています。
2つ目は古いプラグインのリファクタとテストの拡充です。
プロジェクト立ち上げ当初、リソースもなかったことからテストやコードの品質があまりよくない箇所が存在しています。それはそのときの判断として良いのですが、現在に照らした際に機能改修やコードリーディングするときにかなり負担になっています。この部分を徐々にリファクタリングしているのと、設計を良くして品質を可視化するためにテストを追加しています。
他にも課題は色々あるのですが、そんな中でもチームメンバー全員で協力して楽しく開発をしています！
Garoonプラグインチームは、技術的な挑戦ができる環境で、フロントエンドが好きな人にとってとても良い環境だと思います。
そして、弊チームは積極的に採用活動中です。
興味持ったかたはぜひカジュアル面談からご相談ください！
/assets/images/26682/original/d418eb01-d780-4a88-b1db-420635dbd27f?1666663395)
/assets/images/26682/original/d418eb01-d780-4a88-b1db-420635dbd27f?1666663395)
/assets/images/26682/original/d418eb01-d780-4a88-b1db-420635dbd27f?1666663395)
/assets/images/26682/original/d418eb01-d780-4a88-b1db-420635dbd27f?1666663395){kind=avatar}
