この記事は、CYBOZU SUMMER BLOG FES '25 の記事です。
はじめに
こんにちは、サイボウズでフロントエンドエンジニアをしている daiki です。
現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools を React をはじめとした技術スタックに移行する取り組みを進めています。
フロントエンド刷新の取り組みの詳細については次の記事をご覧ください。
今回は、kintone のフロントエンド技術の移行期における、オンボーディング資料の課題と、それを改善した話を書こうと思います。
背景
kintone では、「Basic Training」と呼ばれる充実したオンボーディング資料があります。ハンズオン形式で、ページの作り方から Web API の実装まで、 kintone のコードを幅広く知ることができるコンテンツです。
しかし、「Basic Training」のフロントエンドハンズオン部分は、Closure Tools での開発を前提としており、React での開発が主流となっている現状とは乖離がありました。 さらに、オンボーディングフローに「Basic Training」の実施が入っていないチームもあり、特にフロントエンドを専門とするエンジニアには広く利用されていないのが現状でした。
また、フロントエンド刷新をスムーズに行うために作られた仕組みは、のちに捨てられる可能性もあるためあまり言語化されず、みんなその仕組みを使うが、その仕組みがどうやって動いているのかは作った人だけ知っている、みたいな状態になっていました。
ミニプロジェクトとしての取り組み
kintone 開発チームでは、フロントエンドエンジニアを中心にミニプロジェクトという取り組みを推進しています。これは、「誰もがオーナーシップを持って、やりたいかつ必要なことをプロジェクトとして実行できる」という枠組みです。メンバーが主体的に課題を見つけ、改善提案から実装まで責任を持って進められる仕組みになっています。
今回のオンボーディング資料の改善も、このミニプロジェクトの一環として実施しました。
ミッション
今回のオンボーディング改善では次のようなミッションを設定しました。
- フロントエンドエンジニア含む、kintone 開発に携わる全員に価値のある資料にする
- kintone フロントエンドの技術標準へのアクセスガイドとなるようにする
- kintone フロントエンドの技術標準については、後日@mugi_unoさんが記事を執筆予定のため、執筆後リンクを貼ります
- 暗黙知を形式知化する
- 日々使っている仕組みの動作原理を説明できるようにする
アプローチ
フロントエンド刷新途中の画面では、元の Closure Tools のコードを読み書きすることもあるため、既存の「Basic Training」を上書きするのではなく、新しく「モダンフロントエンドトレーニング」として作成することにしました。
また、kintoneの開発チームはいくつかのサブチームに分かれており、そのサブチーム固有の話や React 固有の知識の解説ではなく、kintone フロントエンド開発全体に共通する内容や、kintone の開発環境や仕組みの説明に重点を置くようにしました。
成果物
次のような資料を新しく作成しました。
Vite のビルド設定から、機能フラグ、多言語対応、テストの実装、MPA での FastRefresh の実現方法など「あ、これ雰囲気でやってた...」と思う部分を潰していくようなコンテンツになっています。ハンズオンの合間合間にコラムを用意したり、既存ナレッジへの導線を作ることで、体系的に学べるようにしました。
知らなくても業務に参加できる知識は多いですが、環境問題で詰まった時に、どのような仕組みで構築されているのかを知っているのと知らないのでは、あたりをつけながら環境を再構築できるかどうかに差が出ます。
オンボーディング自体は、新入社員向けに作成したものですが、「雰囲気でやってた」を詳しく解説する部分は、既存メンバーにとっても価値のあるものになっていると思います。
たとえば、Java のテンプレートエンジンと Vite をどのように統合して Fast Refresh を実現しているかなどは、自分も知りませんでした。オンボーディング資料の作成を通じて、「なんとなく動いているもの」の仕組みを言語化できたのは自分にとっても良かったです。
いただいたフィードバック
毎年ドキュメントを改善していくためにフィードバックを募集し、以下のような感想もいただきました。
バックエンドとの通信、機能フラグ、多言語化までかなり丁寧で、すぐ開発業務に入れる状態になるイメージ持てました そしてバックエンド側のオンボーディングコンテンツも充実したい
Reactの世界線での開発に必要な情報がいい感じにまとめられて全体としては良いです！特にフロントエンドに留まらずkintoneの開発フローの中で必ず遭遇する話題（多言語とか）もカバーできてもはやOBOYです！
おわりに
作りながら知らない知識がたくさんあり、その辺りをちゃんと言語化し、新入社員に伝えられたのは良かったなと思います。
また、自分自身 2 年目なのですが、1 年目でこれ知りたかったな、を盛り込むことができたので、新人に近い視点で「何がわからないか」を把握できるのはメリットだったなと思っています。
ドキュメントは古くなりがちなので、定期的に更新していきたいですね。
