この記事は、CYBOZU SUMMER BLOG FES '24 (Newcomer Stage) DAY 7 の記事です。
はじめに
こんにちは！24 卒フロントエンドエンジニア職能としてサイボウズにジョインした daiki (@k1tikurisu) と saku (@sakupi01) です！
今回は、私たちがサイボウズフロントエンドにジョインするまでの経緯やジョインしてからやってること・感じていることを対談してみました 🍮
この記事を通して、サイボウズのフロントエンド開発チームの雰囲気や、新卒エンジニアとしての成長の機会、kintone フロントエンド刷新プロジェクトの実態についてより具体的にイメージしてもらうことができれば嬉しいです。
自己紹介
daiki: 大学時代は React、TypeScript で Web サイト制作やクラウドサービスの開発をするアルバイトを 1 年ほど行っていました。大学では社会情報学を専攻し、ソフトウェア保守、特に後方互換性に関する研究をしていました。
saku: 日本の大学の情報系学部卒で、大学３年生の夏からは約１年間オーストラリアに交換留学しており、その間に留学先のスタートアップ企業でエンジニアインターンをしていました。当初からフロントエンド技術に対しての興味が強く、Next.js・React・Typescript などを主に使用してハッカソンや個人開発をしていました。
どんな大学時代だった？
──（saku）: daiki は就活前何してたん？
daiki: プロコンとかビジコンとかに積極的に参加したり、Web サービス開発のアルバイトしたりしてたかなー。最初は 1 年生の時に YouTube 見て Web 開発に興味を持ったのが始まりで、Progate とかから始めた。そのあと、同期とか先輩で興味ある人募集したりして、Web 開発の団体を立ち上げて 2 年間くらい運営してた。ここで Web サイトとかサービス作ったり運営周りの自動化スクリプト作ったりしてだいぶ基礎固めになったかな。
──（daiki）: saku は就活前どんな大学生活やったん？
saku: まず、大学では芸術工学を学びたかったんだけど前期で失敗してしまって、理工学（情報工学）を学ぶ大学に入ったことから始まったな〜。 その中で、「Web デザイン」ていうのがあるのを知って、芸術工学に関連しそうな響きで興味が湧いた。最初は Figma でデザインするだけだったけど、動かないと面白くないと思うようになって、そこからプログラミング（特に Web フロントエンド）に興味が移っていったかな〜
──（daiki）: プログラミングに関しては学生時代どう取り組んできた？
saku: 大学 2 年後期に学部内であったアプリコンテストをきっかけに開発熱がついて、そこからハッカソンや留学先でのインターンで技術を磨いてきたかな。特にフロントエンド技術に興味があって、React や TypeScript での開発を中心にやって、フロントエンドエンジニアとして就活してた。
どうしてサイボウズを選んだ？
saku: 「フロントエンドに特化した仕事ができそうだった」ことと「サイボウズの社風が自分に合いそうだなって強く思った」ことかな。 Vue.js で作ったサービスを React に移行した経験から、サイボウズのフロントエンドがやってることとの共通点を感じられた。 あと、プログラミングを始めたきっかけが Web デザインだったのもあって、目に見える形の価値をユーザーに提供できるフロントエンドに特にやりがいや楽しさを感じてたかな。
──（daiki）: なるほど、カルチャー面ではどんなところが合ってた？
saku: 「楽しく働きたい」っていうのが大前提としてあって、それを面接の楽しさで測ってたかな。 就活でその会社の雰囲気を知れるのって、社員さんと実際に話すことでしか得られないと思ってて、就活当時海外にいた私にとっては、その機会が面接しかなかったから、面接での会話が楽しかったかどうかで決めてた。
──（saku）: daiki はどうしてサイボウズのフロントエンドに興味を持った？
daiki: フロントエンドエキスパートチームの活動を ブログ とかイベントとかで見ていて知ってたのが大きいかな。就活するぞ！ってなってから、制度面とか事業内容とかちゃんと調べて、そこにも興味持てたから応募した感じ。
──（saku）: カルチャー面ではどんなところがマッチした？
daiki: 団体運営してたのもあってチーム開発することが多く、チームで自分ができることを越えた成果物が生まれる瞬間が好きで、チームワークあふれる社会を作るっていう理念がいいな〜と思えた。
内定者バイトしてどうやったか
私たちは入社前年(2023 年)の 10 月から内定者アルバイトとしてフロントエンド刷新プロジェクトに参加しました。
──（saku）: daiki は Mira チームでの刷新だったけど、どんなことやってたの？
daiki: 週 2 で kintone 管理画面の React 化をやってた。 まず kintone のコードベースの大きさにびっくりした。大きいのに、チームによってコードベースが分割されていて、それぞれがオーナーシップを持って取り組めるようになっていた。Mira チームを始め、サイボウズの開発チームはだいたい専属の QA エンジニアがいて、テスト自動化も妥協しないので、品質に対する意識の高さが良いな〜と思った。レビューも丁寧で、すごい勉強になった。 雰囲気は、面接とか面談で外から見える感じのままで、居心地よかった。
──（daiki）: saku は内定者アルバイトでどんなことやってたの？
saku: kintone のアプリ作成機能を担当している Reactone チームで刷新をしていて、そのページは Drag&Drop とか複雑な UI で実現されているような画面だった。Reactone では React・TypeScript・Redux など、馴染みのある技術スタックが採用されていて、技術的に心配な要素は少なかったかな。ただ、Reactone のコードベースはテストも含めてかなり抽象化されていて、最初のうちは読むのに時間がかかった記憶。一つ機能を追加するだけでも影響範囲が大きくて、テストのモックを一つ追加するとテストがめちゃくちゃ落ちるのに慣れなくて......修正に丸一日かかってしまうこともあった。 あと、同じページを複数人で刷新するため、同じファイルを触ることが多くて、多発するコンフリクトに苦しめられたこともあったな。それに対して助言を求めたら、割とすぐ改善タスクを積んでくれて、ファイルの分割単位が変わり、コンフリクトしにくくなった記憶がある。こういう柔軟性を持ってるとても素敵なチームだったなと思う！ Reactone でのお仕事に関しての詳細は個人ブログに詳しく書いたので、ぜひ参考にしてみてください。
配属先ではどんな業務に取り組んでいる？
saku: kintone 内でアプリを作る機能の、React 化に取り組んでます！
daiki: アプリ機能は、kintone の顔となる機能なので、考慮事項も多く、ただ React 化すれば良いだけじゃない点が面白いなと感じてる。
saku: 確かに、UI/UX の改善も加えているので、kintone Design System Team や kintone Design Team とも連携をとってるよね。toB プロダクトの刷新業務ながらも、エンジニアサイドからユーザー体験を意識して取り組むことができるのは、とてもやりがいに繋がっているポイントかな。
daiki: 最近だと、2 人でモブでがっつり PR レビューする時間をとったり、ブログのレビューや執筆をハドルで一緒にしたり、気軽に話せていいなと思ってる！
saku: うん、同じチームに配属になったことで、心理的にも安心感があって良かった。お互いに相談し合えるし、一緒に成長していけてる感があって楽しい！
kintone のフロントエンド刷新の現状
kintone フロントエンドリアーキテクチャプロジェクト（フロリア）は、次の 3 つの目標を掲げて、2022 年に発足しました。
- 全てのページが React によって表示されている
- フロントエンドが技術的にもチーム的にも分割されている
- ユーザー体験に関する指標に対する計測が行なわれており、チームの関心ごとになっている
プロジェクト発足から 2 年経った今、当初掲げられていた目標との差分について、新卒としてフロリアに参画した私たちが感じたことを話し合いました。
saku: 「全てのページが React によって表示されている」に関しては、依然として React 化されていないページは残るものの、部分的には刷新は完了して本番リリースできているチームが出てきたね。
daiki: そうだね。とはいえ、React 化されていないページがまだまだあるので、今後もさらにスピードアップしていく必要があるし、そこに貢献していきたいと思う。
saku: 「フロントエンドが技術的にもチーム的にも分割されている」に関しては、kintone のフロントエンドはチーム単位で分割された Monorepo 構成になっているから、技術的な課題に対しても各チームが自律的に取り組んだり、技術選定などの意思決定もチーム単位で行うことができていると思う。加えて、フロリア内でのコミュニケーションも活発なので、他チームの進捗や技術的な課題についても ADR などを通じて共有されていて、フロリア内の他チームのナレッジを自チームで吸収しやすい形になっているように感じる。
saku: 加えて、「ユーザー体験に関する指標に対する計測が行なわれており、チームの関心ごとになっている」に関しては、kintone の UI/UX やアクセシビリティに関して専門的に取り組んでいる kintone Design System Team や kintone Design Team が提供するデザインシステムを積極的に用いて開発を進めることができていると思う。また、恒常的に kintone Design System Team との連携を取れる体制になっているため、デザインやユーザー体験に関する課題に対しても迅速かつ専門的に対応できるようになっていると感じる。加えて、フロントエンドエキスパートチームの存在や有志でパフォーマンス大臣という活動があるなど、フロントエンドサイドから kintone の非機能要件に関する取り組みも積極的に行なわれていて、ただ技術の刷新をしているだけじゃないと感じられるな。
daiki: 確かに、月１で kintone の各ページのパフォーマンス計測結果を確認する会もあるね。
saku: フロリア発足当初からの差分という文脈だと、フロリアでは最近刷新業務が終わったチームが出てきたことで、チームのあり方が変わったように感じるな。
daiki: もともとフロリアはフロントエンド刷新専門チームだったけど、今は新機能開発チームと共同で刷新を進める方針にシフトチェンジしてる。刷新専門チームの頃に比べるとチームの人数も多くなるので、うまく連携するために kintone のドメイン知識をつける優先度が高くなったと思う。刷新だけを考えるのではなくて、kintone 全体のことを考えながら優先度付けしていく動き方が必要になってきたように感じる。
saku: そうやね、今後 kintone 全体とフロリアの関わりが密になることで、フロリアで採用しているチーム体制やアプリケーション分割などのナレッジが全体に波及していけるかもしれないな〜
まとめ
今回は、2024 年度新卒としてサイボウズのフロントエンドエンジニア職能にジョインした daiki と saku が、入社までの経緯や現在の業務内容、kintone フロントエンド刷新プロジェクト（フロリア）の現状について対談形式で語りました。
この記事を通じて、サイボウズのフロントエンド開発チームの雰囲気や、新卒エンジニアとしての成長の機会、kintone フロントエンド刷新プロジェクトの実態についてより具体的にイメージしてもらうことができれば嬉しいです！
この記事を読んでサイボウズやフロリアに興味を持った方は、次のリンクからのご応募お待ちしています！
