こんにちは！kintone フロントエンド刷新プロジェクト（通称フロリア）にてエンジニアをしている
キム テフンです。今日は フロントエンド職で新卒入社後にできることの一例として、「フロリア」の「Mira チーム」に合流してから 2 ヶ月間やってきたこと、そして学んだことを紹介します！
目次
軽く自己紹介
私は名前からご想像の通り韓国出身です:)
日本で文系の大学を卒業後、一度帰国してから約 1 年間 1 からプログラミングの勉強をしました。
サイボウズに入社したのはその直後で、当時持っていた経験としては、5~6 人チームでの単純な web app や web game の開発経験があり、フロントエンドの実装を担当していました。
このように入社前からフロントエンド開発に興味を持っていたので、現在は kintone のフロントエンド刷新プロジェクト（通称フロリア）に加わり、最速での React コード置換を目指すチーム（Mira チーム）にてフロントエンドの脱レガシー化を進めています。
Mira でのお仕事 1：ページの刷新を担当
私は Mira チームに配属された直後、早速 1 つのページの刷新を丸々担当することになりました。その過程で学んだことは主に以下の 2 点になります。
1. 大規模ユーザーを持つウェブサービスのフロントエンドの厳重な刷新プロセスが経験できた
フロリアの中でも「1 人 1 ページ刷新担当」という独特な方針をもつ Mira チームだからこそ、短期間で 1 つのページのフロントエンド刷新の一連の流れに関わることができました。
ページの規模によって刷新プロセスの規模も異なりますが、基本的には上の画像のような大まかな流れになります。上記のプロセスはあくまでベースでありまして、状況次第で柔軟にタスクを分割や統合して作業を進めることもありました。
そして、実装を伴う各プロセスではテストコードも実装していました。
テストコードに初めて触れたのもありまして、社内勉強会で「コードカバレッジ」というコンセプトを学びましが、コードカバレッジの率が高いということは、コードの隅々に安全装置を組み込んでいるとのことです。実際に、気づかず別の箇所で不具合を起こしてしまったところを、自動テストが拾ってくれたことが何度かありました。
これをもとに上の画像を見れば、Mira チームがどれほど不具合予防に本気なのかが伝わると思います。Mira チームのテスト手法の詳細はこちらを参考してください。
2. 大規模ウェブサービスのフロントエンド構造を学べた
長期的なサービス提供のためには、フロントエンドの規模による適切なソースコードの保守・運用性や拡張性などを考慮した設計が必要です。
これらを実現するために Mira チームではいくつかの策を練っていますが、これらの基盤となるファイル構造を主に紹介します。mira チームのファイル構造の概要は上の画像の通りで、以下の 3 つのポイントがあります。
- グローバル実装とローカル実装が分かれている
- テストコードと実装コードが分かれている
- 各ページごとに、UI 操作をページに反映するまでの流れが単方向かつモジュール化されている
それから、この構造に沿って実装をする過程で以下のメリットを経験できました。
- 体系的にテストコードの実装ができる
- モジュール化のおかげでテストされていな部分を見逃しにくく、
テストのために関数をモックする方法も直観的であるため手間が省ける
- モジュール化のおかげでテストされていな部分を見逃しにくく、
- 新入りでも比較的に早くコードの全般的な流れを把握することができる
- 予想より mira 全体刷新速度があまり落ちなかった
- ファイル別に区切りよくタスクを分割できて、コードレビューもしやすい
このように Mira チームのファイル構造のメリットを体験して、長期的なサービス提供の方法とは結局人的資源の入れ替えをスムーズにできること、つまり誰にでもわかりやすいコードを目指せば上手くいくのではないかと思いました。
Mira でのお仕事 2：コードレビュー
Mira チームでは相互レビュー方式でコードレビューをしています。チームメンバーのコードをレビューすることで、以下のような学びもありました。
1. コードレビューのメリット
良いコードレビューの仕方の勉強は社内資料とネット検索資料などを参考しましたが、コードレビューのメリットは実際やっていくうちに学ぶことができました。
以前までは、コードレビューはコードを改善するためのものでしか認識していませんでした。なので最初は自信がなく、どうしても優秀な先輩方々のコードをレビューに消極的になりがちでした。しかし、チームから積極的に進められてコードレビューをやっていく内に、コードレビューは学ぶためでもあることに気づきました。
その一例として、上の画像のようにコードレビューを通してuseSWRという hook を学びました。
2. Mira でのコードレビュー
時々私の作業速度が遅すぎて、コードレビューの時間を短縮すれば目標への所要時間を短縮できる状況がありました。 こういう時のために Mira チームには独自の「アルティメットスキル」がありまして、以下がその概要になります。
- 毎日「タスクピックアップ」を決めて、そのタスクの持ち主は「キャプテン」と任命される
- キャプテンの命令は絶対で、最優先で遂行する
上記の話は直接コードレビューに関わる話ではないかもしれませんが、コードレビューをする過程で起こり得る問題に柔軟に対応できる Mira チームの方針の 1 つとして紹介させて頂きました :)
Mira でのお仕事 3：その他
上記の 2 つの Mira でのお仕事以外にも、以下のようにいくつか細かい作業にも取り組めました。
- ライブラリのアップデート対応
- 突発性不具合対応
- E2E テストの改善作業
- インターン生受け入れ準備のお手伝い
- ブログ記事の執筆 などなど！
上記の他にも沢山できることがありましたが、自分の能力範囲外であると判断して諦めたものもいくつかあります。 このように、新卒でもやる気さえあれば Mira チームではたくさんの貢献と成長のチャンスが儲けられます！
あとがき
ご覧頂いた通り、新卒にも関わらず私はこの 2 ヶ月でたくさんのことを経験できましたが、これは Mira チームの厚いサポートがあったからこそ可能だったと思います。
そのサポートは質問応答のような直接的なサポートに限らず、例えばどのチームメンバーからの意見でも考慮してくれる雰囲気を保つことで個人のやる気を推進するような間接的なサポートも含みます。
このようなチームに恵まれている以上、私はこれから少しづつでも良いので刷新の過程で改善可能なところを発見及び対応することでチームに貢献していきたいと思っています。
以上、新卒入社後 Mira チームで学んだことを紹介させて頂きました！
