SmartHR のフロントエンドエンジニアはプロダクト開発以外で何をやっているのかという話

こんにちは！フロントエンドエンジニアの髙田です！
先日 @diescake から SmartHR UI の運用についての紹介がありました。

tech.smarthr.jp

今回は SmartHR のフロントエンドエンジニアがプロダクト開発以外で何をやっているのかを紹介したいと思います！

SmartHR のエンジニアの特徴

SmartHR のすべてのエンジニア（フロントエンド・バックエンド）にはそれぞれ担当のプロダクトあります。
普段は担当プロダクトを爆速かつ高品質に開発できるよう自身の仕事に注力しています。
横断組織はありますがその組織にフルコミットすることはありません。

横断組織のひとつであるアジャイル推進室（仮）を紹介する記事もあります。ぜひご覧ください！

tech.smarthr.jp

もちろん、フロントエンドエンジニアにも担当プロダクトがあり、日々プロダクト開発に集中していると次のような課題が出てきました。

担当外のプロダクトでどんな開発をしているのかわからない
担当者のいないプロダクト(SmartHR UI など)の開発が進まない

それらを解決するために後述する取り組みをしています。

フロントエンド MTG

先述の通り SmartHR のフロントエンドエンジニアは普段は担当のプロダクトの開発に注力してます。
そのため、各プロダクトのフロントエンドエンジニアとのつながりが希薄になるという課題が出てきました。

それを解決するためにフロントエンド MTG が 2019年2月から始まりました。
この頃はフロントエンドエンジニアが3人でしたが10人になった今も続いています。

フロントエンド MTG は毎週1時間あり、プロダクトをまたいだフロントエンドエンジニアの情報共有の場としています。

（ちなみにフロントエンド MTG という名前ではありますが、職種関係なく参加可能です。バックエンドエンジニアやプロダクトデザイナーも数人参加しています！）

フロントエンド MTG では CodiMD という共同編集できるWeb エディタを使って議題を集めます。 CodiMD に各項目が用意されているので話し合いたい事柄をミーティングまでに記入します。

フロントエンド MTG は下記の内容で進行していきます。各議題の説明は次の項目で説明します。

ファシリガチャ
前回の TODO
相談したいこと
今週のギョームトピック
今週の技術トピック
フロントエンド改善デイでやること
フロントエンド情報 from koba04

フロントエンド MTG の議題

ファシリガチャ

ファシリテーションする人を決めます。
こういった定例 MTG ではファシリテーションする人が固定されがちなため取り入れました。
👇 をブラウザの devtools で実行しています。お手軽にランダムで人を抽出できるのでおすすめです。

(xs => xs[Math.floor(Math.random() * xs.length)])(['nabeliwo', 'atsushim', 'takata', 'wakui', 'cidermitaina', 'ouji', 'meganemura', 'kinoppyd', 'tokky', 'diescake', 'jin', 'tafu', 'zoshigayan', 'wmoai'])

前回の TODO

MTG 中に調査や調整などが必要になったら、その担当者を決めて TODO として残しています。
前回の MTG で出た TODO の進捗を確認します。
プロダクト開発が忙しいなどの理由で TODO を消化しづらい時は担当者を変更するなどしています。

相談したいこと

相談事項がある人は相談しよう！という時間です。そのままですね！

直近で出たトピックス 👇

SmartHR UI のコンポーネントの Props 名の命名規則について
理想の SmartHR のフロントエンドチームについて語りたい
新しく入社したフロントエンドエンジニア向けのオンボーディング資料を用意したい

今週のギョームトピック

業務で出くわしたバグやその解決策などを持ち寄って共有します。

直近で出たトピックス 👇

display: grid は1000行までしか表示されない
kufu/renovate-config patch version のオートマージされてなかったよ！😭
polished と webpack が特定のversionで組み合わさるとIE11でランタイムエラーになる現象が起きてます

今週の技術トピック

ここでは、フロントエンドかどうかに関わらず好きな技術のトピックを共有しています。

直近で出たトピックス 👇

Deno が v1 になった 🎉
Next.js 9.4 の Incremental Static Regeneration がすごかった

フロントエンド改善デイでやること

毎週金曜日にフロントエンド改善デイという取り組みをしています。フロントエンド改善デイで何をやりたいかをここで話し合います。フロントエンド改善デイ自体については次の章で説明します！

フロントエンド情報 from koba04

技術顧問の @koba04 さんからフロントエンド情報を共有されます！共有される情報をざっくりとまとめると下記のようなものです。

React やその周辺技術のアップデート情報や Tips
TypeScript やその周辺技術のアップデート情報や Tips
各ブラウザのアップデート情報や Tips

このようにフロントエンド MTG を通して知見を共有し、担当プロダクトを爆速で開発できるように知識のアップデートをしています！

フロントエンド改善デイ

フロントエンド改善デイは SmartHR のフロントエンドをより良いものにしていく取り組みです。毎週金曜日に行われていて任意で参加します。

金曜日まるごとを自分の担当プロダクトから離れて改善活動をする人もいれば、そうでない人もいます。

SmartHR では自分の仕事の進め方に裁量があるので担当プロダクトとのバランスを取りつつ個人の事情に合わせてフロントエンド改善デイに参加しています。

直近では、 SmartHR のプロダクト間共通コンポーネントである SmartHR UI や、エンジニア採用サイトをモブプロで開発しました。

モブプロは、3人以上のエンジニアで一つの画面を共有しながらコードを書いていく開発手法です。コードを書く人（ドライバー）と、それを見ながら意見を言う人（ナビゲータ）に別れて開発を進めます。実装過程をリアルタイムに共有することで、ハマりやすいポイントやドメイン知識なども共有でき、素早く高品質なアウトプットが出せる開発手法です。

このモブプロも SmartHR のエンジニア（フロントエンド・バックエンド関わらず）を象徴する活動です。過去にモブプロについて書いた記事もあるので気になる方はチェックしてみてくださいね！

tech.smarthr.jp

ちなみに、 SmartHR UI とエンジニア採用サイトはパブリックな GitHub リポジトリで開発されています！ぜひ下記リンクからアクセスしてみてください！もちろん Issue や PR もお待ちしております！

github.com github.com

このようにフロンエンド改善デイに取り組むことで、自身の担当外のプロダクトにも当事者意識が生まれ、担当者がいないプロダクトも継続的に質の高いアウトプットができるようになりました。