はじめに

クラウドワークス Advent Calendar 2023 の22日目の記事です。

株式会社クラウドワークスの甲斐です。

エンジニアとして「クラウドログ」という工数管理システムの主にアプリケーション部分(Backend,Frontend)の開発を行なっています。

今回は私の2023年を振り返えりつつ、「クラウドログのエンジニアの働き方」や「どのような課題に取り組んでいるか」が少しでも伝われば幸いです。

開発したもの/技術的な取り組み

外部勤怠システム連携

2023年は外部サービスとの連携に力を入れた年でした。
主に工数管理を行う上で必要な勤怠情報に関して外部から取り込む勤怠連携機能をリリースし下記3つのシステムと連携を完了させました。

また勤怠システムとの連携強化にあたり、バッチ処理の仕組みを見直し
バックグラウンドで実行される機能について統一的に処理できる仕組みを構築しました。
下記の図のように「機能の呼び出し」と「実行」をSQSとLambdaを利用して分割する仕組みを採用しました。
バッチ処理に関してはk8sのCronJobを利用しています。

フルスクラッチUI開発

クラウドログとしては初めてのフルスクラッチでのUI開発を行いました。
(普段はReactを用いてReact bootstrapをカスタマイズする形で多くのUIを作成しています。)
クラウドログでは誰でも簡単に素早く工数入力ができることに拘っており
今年はさらなるUX向上のため工数入力部分をリニューアルしました。

下記が作成したUIです。

一見シンプルに見えますが、「お客さまによって工数の取り方が違う」というクラウドログの複雑な要件に対応するために内部は複雑な実装となっています。

こちらの開発ではuseReducerをうまく利用することで状態管理の複雑さを効果的に低減し、コードの可読性と保守性を向上させることができました。

下記は工数入力用のSelectboxのアクションの一例です。

export type SetActions =
  | SetProjectAction
  | SetProcess1Action
  | SetProcess2Action
  | SetProcess3Action
  | SetTaskAction
  | SetWorkAction;
export type ActionType =
  | GetFocusAction
  | CloseDropdownAction
  | InputKeywordAction
  | DownDeleteKeyAction
  | DeleteBadgeAction
  | OutFocusAction
  | ClearValueAction
  | SetMypatternAction
  | ChangeDropdown
  | SetActions;

export const createGetFocusAction = (): ActionType => ({ type: 'get_focus' });

const r = React.useCallback(
    (state: WorkSelectState, action: ActionType): WorkSelectState => {
      switch (action.type) {
        case 'get_focus': {
          // ドロップダウンの選択
          // ドロップダウンを開く
          // 表示名を計算
          // etc...
          return {
            ...state,
            // 更新する値
          };
        }
......................................................

例えばコンポーネントのinput部分にフォーカスがあったった場合を示すGetFocusActionの例です。

表示すべきドロップダウンを判定(6種類の中から)
ドロップダウンを開く
開かれるドロップダウンに応じて表示名を計算

上記のような処理が走るのですが、これをuseReducerを利用せずにコンポーネントが処理すべき入力ごとに個別にuseStateなどで管理するとかなり複雑な実装になってくるかと思います。(useEffectがいっぱい出てきたり)
その他キーボードでのドロップダウン内の移動制御にIntersection Observer APIを利用するなどチームとしても多数の知見が溜まった開発となりました。

メール通知機能

クラウドログとして初となる一斉送信メールの機能の実装にも取り組みました。
内容としては工数入力が完了していないユーザーに対してのリマインド通知機能です。
工数管理を行う上で、まずはユーザーに工数の入力をしてもらわなければ何も始まりません。
工数の管理者に負担をかけずにできる限りユーザーに工数入力を促し入力率を上げるための機能です。
こちらについても「外部勤怠システム連携」で紹介したバックグラウンド処理の実行の仕組みを利用して実装しました。

その他取り組み

社内勉強会

クラウドログ開発内でおこなっている勉強会「LogStudy」にも力を入れて取り組みました。

この勉強会は2年半ほど継続されており約80回実施されています(週一回程度実施)。

輪読会の実施

昨年までは単発のディスカッションやワークが多かったのですが、今年は輪読会を実施し1つのテーマで何週かにわたって参加者全員でテーマについての理解を深めていきました。

下記の輪読会を実施しました

1人だとどうしても積読になってしまいがちな技術書ですが、仲間と一緒に読み進めることで最後までモチベーションを維持し続けることができたのでとてもいい取り組みだったと感じています。

スクラム勉強会

スクラム開発についての勉強会も行いました。

クラウドログではスクラム開発を取り入れているのですが、改めて関係者全員で理解を深めるためにエンジニアだけでなくPdMやデザイナーも合同で行いました。

それまでは、人によってスクラム開発への理解がまちまちでしたがこちらの勉強会の中で全員で理解を深め、自分達ができていること、できていないことを改めて確認した上で「クラウドログ開発でどのようにスクラム開発を行うか」を検討できたと感じています。

コミットレポートの運用

「コミットレポート」と呼ばれる勉強会の成果を可視化するための取り組みも始めました。

これは、勉強会で学んだ知識が開発に活かされた場合にどのように活かされたのかを記録として残していく取り組みです。

まだ実験的ではありますが今後これを活用して「より効果的な勉強会の実施」や「社内外への発信」に役立てたいと考えています。

LogStudyに関しては以前エンジニアブログでも詳しく紹介しているので興味のある方はぜひご覧ください。

LogStudyで進化するCrowdLog - クラウドワークスエンジニアブログ

負債解消チーム発足

中長期的な視点で技術課題と向き合っていくためのチームを発足しました。

こちらはまだ始まったばかりの取り組みですが(2023年10月から)普段のロードマップ開発とは並行しながら徐々に「開発効率を上げるための取り組み」や「技術負債解消」に取り組んでいます。

Unit test高速化

直近ではUnit testの高速化を行いました。

Mysqlのtmpfsを利用してデータの書き込みをディスクからメモリに変更して実行時間を4分の1程度に削減できました。

今後こちらのチームでの取り組みは「クラウドワークスエンジニアブログ」でも発信していこうかと検討中です。

個人的なハイライト

エンジニアリングMVP

2024年9月期全体キックオフにてエンジニアリング部門のMVPに選んでいただきました。
こちらはでは「開発したもの/技術的な取り組み」でもご紹介した「フルスクラッチUI開発」の話や「オフショア開発メンバーとの開発」の話で登壇させていただきました。
人生で初めてこういった賞をいただけたのでとても誇らしかったです。
あがり症ということもあり当日緊張しないように自宅で100回くらい練習して臨みましたが
喋り出した瞬間マイクがうまく入っておらず頭が真っ白になりました。。。(笑)

EMへの挑戦

2023年の10月からマネージャー業務へも挑戦させていただいています。
お話しをいただいた時は「私がですか。。？」という想いでしたが
やってみると「チームメンバーのためにどんなことできるかな？」ということを日々考えたり、「目標達成への強い想い」が生まれていることを感じ、自分自身新たな発見でした。

まだまだわからないことだらけですが成果を出せるように精一杯頑張っていきます！

来年へ向けて

まずはロードマップに掲げた開発を期間内にしっかりと完了させ、さらに進化したクラウドログを皆んなに届けること。
そしてその上で開発組織として様々なことにチャレンジして、チームとしてできることを増やしていきたいと考えています。

個人としては、これまでアプリケーション側を担当することが多かったのでインフラ側の知見をより深められるように取り組んでいきたいと考えています。

(プライベートでは、ボイトレと家庭菜園にチャレンジしようと考えています。)

以上です！