新卒1年目の業務の振り返り
にっしーです。今年度から Cybozu で Web エンジニアとして働いています。
この記事では、正式に kintone チームに配属された 2021 年 7 月から 2021 年 11 月までに行った業務内容について、その一部を振り返りたいと思います。
業務内容の振り返り
OJT 期間の業務
今年の kintone チームでは、まず配属されると新卒でチームを組み、通常の新規機能の開発プロセスを OJT 形式で約 2 ヶ月間学びました。OJT の際には、新卒 2 年目の方々がメンターとして参加し、わからないことがあればその都度質問できる状況だったので、新卒チームとしても最終的には多くの開発に携わる事ができました。
各機能ページの概要の修正とヘルプページへの導線の追加
kintone は、「結局、何ができるの？」とお客様からよく言われるほど、多数の機能を備えている製品です。そのため、kintone の各機能のページにも、各機能の役割・設定方法・設定例などについて簡単に知ることができるように、概要を追加したり、ヘルプページへの導線を作る必要がありました。
このタスクは、6 月から他のチームが開発していたので、新卒チームは作業を引き継ぎ、残っていたページの実装を行いました。実装については、もともと利用されていたコンポーネントを今回の要件にも合うように適宜リファクタリング等を行い、進めていきました。この仕事では、開発プロセスを把握し、PM との仕様の相談、QA との試験設計、デザイナーとのデザイン調整等、kintone を開発する様々なチームとのコミュニケーションの方法を学ぶことができました。
実際にリリースされた機能：https://kintone.cybozu.co.jp/update/main/2021-09.html#point3
フォーム保存時のエラーページダイアログの表示
kintone における最も基本的な機能は、統一されたフォーマットでデータを蓄積・一覧・検索できるアプリを作成することです。アプリを作成する際には、ユーザーがドラッグ＆ドロップで自由なフォーマットを定義できますが、不正なフォーマットの場合にはその旨をユーザーに伝える必要があります。そこで、画面上部からエラーの起きている箇所をダイアログで表示することで、不正なフォーマットに気づきやすくするようにしました。
このタスクでは、kintone のアプリに関するドメイン知識について深く習得することができました。アプリは自由なフォーマットを指定できることから、今までの開発経験の中でもデータ構造については最も複雑でした。このため、今まで以上に細かなコーナーケースを意識しながら実装する必要があり、非常にやりがいがありました。
実際にリリースされた機能：https://kintone.cybozu.co.jp/update/main/2021-10.html#point1
アクセシビリティに関する不具合修正
アクセシビリティに関しては、アクセシビリティへの取り組みにもあるように、kintone でも製品の重要な品質として開発を行っています。新卒チームでは、不具合修正の進め方を学ぶタスクとして、ユーザーから報告されたキーボード操作に関する不具合を扱いました。
今回調査した不具合については、OS の違いによって発生するものが多く、アクセシビリティ対応の際におけるクロスプラットフォームでの検証の大切さを学びました。MDN のドキュメントや Chromium のバグレポートを読む機会も多く、なるべく 1 次ソースに近い情報を当たる重要性も再確認できました。
フロントエンド刷新チームでの業務
OJT 期間の後は、自分はフロントエンド刷新チームに所属し、kintone の管理画面の React 化を行っています。もともと、アルバイトで React を利用した開発を行っていたので、自分の知識や経験を活かせるチームへの配属を希望しました。
管理画面の React 化
フロントエンド刷新チームでは、管理画面の各ページにメンバーをアサインし、React 化を進めています。自分がチームに参加した時点では、汎用的に利用されるコンポーネントの多くがすでに実装されていたので、自分がアサインされた画面の実装もスムーズにすすめることができました。フロントエンドのロジックについては、仕様書と既存の Closure Library で書かれているコードを参考にしながら React に置き換えていきました。
実装に関しては、データのアクセス権限のような重要なドメイン知識を扱うことが多かったです。また、アクセス権限のようなデータは複雑になることが多く、個人開発等では感じられなかった Redux の強みを意識しながら複雑な状態管理の方法を学ぶことができました。
また React 化に合わせて、デザインやアクセシビリティについての改善も行いました。デザインに関しては、React 化に合わせて大きく刷新するので、Figma で共有された新規のデザインを元に実装を行いました。細かいデザイン調整の際には、開発中のデザインをデザイナーの手元でも確認できるように準備し、話し合いながら調整を行いました。アクセシビリティについては、DOM が正しく構築されているか、aria 属性が正しく設定されているかなどの確認を通じて、アクセシビリティのベストプラクティスについて学ぶとても良い機会となっています。
コンボボックスの実装
汎用的に利用されるコンポーネントの多くはすでに実装されていると先ほど紹介したのですが、残っているコンポーネントもあり、そのうちの１つのコンボボックスの実装も行いました。
コンボボックスの実装を始める際には、WAI-ARIA のドキュメントを読んだり、MUI や SmartHR のコンポーネントを参考にしました。これらのドキュメントや実装を見ることで、普段はライブラリを使ってしまうようなプリミティブなコンポーネントの実装の大変さを初めて理解しました。
細かな実装面では、React の ref の使い方を学んだり、React Testing Library で細かいキーボード操作やマウス操作のテストを書いたりと、あまり経験のない API やツールに向き合うことができました。
まとめ
今年の kintone チームで携わった業務内容の一部を紹介しました。これまで紹介した業務を振り返ってみると、フロントエンド刷新チームに所属していることもあって、ほとんどがフロントエンドに関する開発でした。個人的には、スクラム開発のプロセスを学び、エンジニアだけではなく、PM、QA、デザイナーなどの多くの関係者とコミュニケーションをとりながら開発する経験は、今までになく貴重だったと感じています。
また、今回取り上げた業務以外では、以下のようなことにも取り組みました。
- 属人化していた知識のドキュメント化
- Projector や Code With Me を利用した、モブプロ効率化への探求
- React 化によるパフォーマンスの影響を調査する基盤を整える
- Generics を利用したコンポーネントの型改善
今月からは、フロントエンド刷新チームは細分化され、1 人 1 人がやりたいことに対して挑戦しやすい環境で開発を進めています。自分も、1 から技術選定に携わったりするなど、今まで以上に裁量のある開発を行うことができています。
最後に、Cybozu の kintone チームでは、フロントエンドを刷新するメンバーを募集しています。この記事を読んで、興味をもってくれる学生の方がいれば幸いです。
https://cybozu.co.jp/company/job/recruitment/list/front_end_engineer_kintone.html