このエントリは、SmartHR Advent Calendar 2024 シリーズ1の20日目の記事です。
こんにちは、SmartHR の @chanMisa です。
今年も SmartHR UI の振り返りの時期がやってきました。SmartHR UI は OSS として公開されているコンポーネントライブラリで、主に社内のコアメンバーによって運営されています。今まで SmartHR UI がどのように成長してきたか毎年振り返りをしています。
- SmartHR UIの現在地 ~2023年12月編~
- プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから
- 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話
今回の記事では、『SmartHR UI の2024年を振り返る』というタイトルで、SmartHR UI を運営している我々から2024年12月時点の SmartHR UI の最新情報をお届けしたいと思います。
メトリクス
まずはメトリクスです。
| 項目名 | 2023/12/18 | 2024/12/13 |
|---|---|---|
| バージョン | v40.1.0 | v62.2.0 |
| コンポーネント数*1 | 82 | 100 |
| ソースコード規模*2 | 31,412 | 32,108 |
| コミット数*3 | 4,498 | 5,754 |
| コントリビューター人数*4 | 68人 | 83人 |
今年もメジャーバージョンが40から62まで上がるなど、活発に活動が行われました。また、コントリビューターの数も更に増え、今まで手が届かなかった整備範囲もカバーできるようになってきています。
コンポーネント数の計測は若干計測方法が変わっているものの、新しいコンポーネントがいくつもリリースされました。
ユーザー（ author ）ごとのコミット数
次はユーザー（ author ）ごとのコミット数です。
| コミット数 | コントリビューター |
|---|---|
| 191 | KANAMORI Yu |
| 60 | shingo.sasaki |
| 38 | Mizoue Atsushi |
| 23 | Misako Tateiwa |
| 21 | Atsushi Kawamura |
| 17 | たふみ |
| 13 | Masakatsu Tokita |
| 10 | f440 |
| 8 | oti |
| 7 | Soichi Masuda |
※ コマンド git shortlog -nseP --since="2023-12-18" --until="2023-12-13" --author='^(?!renovate|dependabot|github-actions).*$' を使って集計。同一 committer で計測が分かれていたものはまとめています。
※ 上位10位までを抜粋
去年と比べると全体的にコミット数が増加し、かつメンバーの入れ替わりが発生しています。
今年はSmartHR UIコアメンバーでミッションを策定して取り組んでいたため、ミッションに参加していたメンバーのコミット数が増加しています。
開発・運用体制
2024年12月現在、SmartHR UI の開発チームはコアメンバー10名（エンジニア7名、デザイナー3名）により構成されています。専任メンバーはおらず、有志のメンバーで取り組んでいます。コアメンバーは出入り自由で、流動性は高いです。またこれらのメンバーで週次で定例を行なっており、やろうと思っていること、作業中に発生した問題点の解決方法の相談などを行なっています。
今年は SmartHR UI コアメンバーに気軽に相談したり、SmartHR UI 起因の問題かもしれない時に声を上げやすいよう、Slack のワークフローを作成するなどに取り組んできました。これらの活動により、コアメンバー以外のメンバーに関しても気軽に相談するフローが確立されています。日々1~2件は何かしらの相談が来ている状態です。今年は少なくとも207件の相談を受け、回答や修正を行うことができました。
リリース作業
SmartHR UI のリリースの頻度について見ていきます。
リリース作業が自動化され、Slack からポチポチしていくだけでリリースができるようになりました。
リリース自体は週1回コアメンバーが持ち回りで担当しています。リリース頻度も去年に引き続き右肩上がりで活発な活動ができています。
アクセシビリティ
ESLint
新たな取組として SmartHR 独自の ESLint ルールを作成し始めました。
アクセシビリティに関するルールは16, それ以外は19、合わせて35のルールが作られました。 大半のルールはプロダクト開始時点で エラー状態で導入されており、既存のプロダクトも順次対応されています。 独自ルール導入により、マークアップの知見が薄くとも、修正すべき箇所・方法がわかるようになり、各プロダクトでルールに違反するマークアップが改善・効率化されました。
プロダクト側で簡易チェックリスト
プロダクト側で簡易チェックリストを使ってチェックをするのがスタンダードになりつつあります。また、今年は SmartHR UI を使えば SmartHR のアクセシビリティ品質を達成できる状況まで持っていくことができました。
SmartHR UI のうち、簡易チェックリストをパスできないコンポーネントに関する改善がなされ、全てのコンポーネントでチェックが通るようになりました。
今後は WCAG 2.0 AA の達成を進めていきたいと思っています。
ミッション
今年は SmartHR UI コアチームで初めてミッションを策定し、目標を持って SmartHR UI を成長させていくことができました。 ミッションが策定されたことにより、開発者もよりコミットしやすくなった実感があります。
また、ミッションを通じて改善されたことも多くあり、コミット数の増加なども含めミッションの策定の効果を感じています。
前期
前期のミッションは以下でした。未達成の点はあるものの、フィードバックサイクルが改善されたり、Tailwind CSS の導入など、後期に向けての土台を作ることができました。
- フィードバックサイクルが改善されていること
- Slack のワークフローに SmartHR UI コアメンバーへの相談窓口を設けることができました。
- コアメンバーの定例では相談窓口に寄せられた相談の確認を行い、認識漏れ・対応漏れがないかをチェックしたり、対応方針を決定したりなどの活動が行えるようになりました。
- SmartHR UI 最新版にアクティブな全プロダクトが追従していること
- 残念ならがらこのミッションは未達でした。
- 活動としてはプロダクトごとのバージョンを確認し、追随できていない理由をヒアリングしたりアップデートを促す活動を行いました。
- コンポーネントライブラリとしての質が向上していること
- 全てのコンポーネントを Tailwind CSS 化することができました！
- また、社内のスクリーンリーダーユーザーによるドックフーディングを行い、問題点を洗い出して対応するなどができました。
後期
前期を受け、後期はより具体的なミッションを策定しました。ミッションの策定がより事業や組織の目標に沿うようにプロダクトデザイン企画室のメンバーにもミッション立案に関わってもらいました。 また、ミッションオーナーをそれぞれのミッションに立て、ミッションを推進する役割を担いました。
- プロダクト開発シーンにおいて SmartHR UI を利用しやすい環境を提供すること
- ５つの指標を設けて、それぞれにおいて利用しやすい環境を提供するための施策を行いました。
- SmartHR UI をモバイル対応する
- SmartHR UI をサーバーコンポーネント(RSC)対応する
- SmartHR UI 内で翻訳機構を検討・提供する
- 利用者がバージョン追従をより行いやすくできるよう、Pull Request・リリースノート・ChangeLog の書き方を見直す
- SmartHR UI 自体の品質担保の仕組みを強化し、バージョンアップによるリグレッションを防止する
- 指標が大盛りで非常にハンドルが大変でしたが、それぞれの項目で活動を進め、全体的に進捗を出すことができました。
- ５つの指標を設けて、それぞれにおいて利用しやすい環境を提供するための施策を行いました。
- SmartHR UI を利用することでプロダクトのアクセシビリティ品質を向上できること
- アクセシビリティ簡易チェックリストの充足、ヘッダーのコントラスト比の改善、WCAG 2.0 AA の試験の実施などを行うことができました。
- ヘッダーのコントラスト比の改善はまだ各プロダクトに組み込めてはいませんが、今後も継続して行なっていく予定です。
- SmartHR UI が継続的・安定的に価値を届けるための基盤を整備すること
- Storybook ドキュメントを見やすくすることで SmartHR UI 開発者もプロダクト開発者もデザインシステムとして迷わずに必要な情報を参照できていると言える状態を目指しました。
- Story の改善率は75%を超えました。また、Story の内容が人によってぶれなくなったこと、すごく見やすくなり使いやすくなったのが良かったという声が聞かれました。
後期の振り返りでは以下のような点が挙がりました。全体的には良い進捗を出せたため、ミッションの取り組みは成功したと言えると思います。
- 1のミッションの指標が多すぎたので別のミッションとして分けても良かったかもしれない。
- プロダクト開発との時間配分が難しかった。
- ミッションがあることで以前よりは取り組みやすくなった。
- アクセシビリティ簡易チェックの NG 以外にも、気づいたアクセシビリティに関する改善対応もできたことが良かった。
- Storybook の改善で良い進捗を出せて良かった。
- Step ダイアログの実装がミッション3の進捗を妨げてしまったかもしれないので、対応完了時期を相談すれば良かった。
来期の目標
来期は以下のようなことをやっていきたいという話が出ました。 後期のミッションから派生してかなり幅広くやっていきたいことが出てきているかと思います。ある程度絞って実施していくことにはなるかと思いますが、来期もミッションを掲げて取り組んでいきたいと思います。 もちろん、一緒に更に SmartHR UI を進化させてくださる仲間も募集中です！
- 多言語対応の完了
- モバイル対応の完了
- SmartHR UI のリリースの簡素化
- RSC にすべきコンポーネントの RSC 化
- ウェブサイト上で SmartHR UI を使って見ることができる sandbox 環境の作成
- SmartHR UI を組み合わせたテンプレートをコピーできるようにする
- SmartHR UI の高齢者対応
- デザインシステムサイトとの連携を強める
- SmartHR UI のアクセシブルな使い方の情報を提供する
最後に
今年の SmartHR UI の振り返りはいかがでしたでしょうか。全体的に組織としてしっかりと歩みを進めることができた一年だったと思います。 来年もやっていきたいことが山盛りのため、しっかり高い山を登っていけるように歩みを進めていきたいと思います。
SmartHR では SmartHR UI をはじめ、SmartHR のプロダクトを一緒に開発してくれるフロントエンドエンジニア・デザイナーを絶賛募集しています！ 本記事を読んで少しでも興味を持っていただけた方はぜひカジュアル面談でざっくばらんにお話しできると嬉しいです。
