ハックデイを通して得られたもの

こんにちは！SmartHRで組織図機能の開発を担当している、エンジニアのmuranoです。組織図機能の開発チームでは、最近の取り組みとしてハックデイを取り入れてみました。今回はそのハックデイの取り組みについて紹介します🐶

ハックデイ is なに？

ハックデイは、ユニコーン企業のひみつ ―Spotifyで学んだソフトウェアづくりと働き方の中で登場したハックウィークという概念を、SmartHR向けにアレンジした言葉です。こちらの書籍の中でも元ネタとして参照されている、Googleの20％ルールに近いイメージの将来への投資的活動になります。（Googleが今も実践する｢20%ルール｣で、未来の自分に投資するメリット | ライフハッカー［日本版］）

組織図機能開発チームが行うハックデイでは、月に1日、通常のプロダクト開発から離れ、新しい技術の調査やトライを行っています。

ハックデイってなにが嬉しいの？

安定したスクラムでの開発に対して、新しい事が起こせる💡
スクラム開発でスプリントをこなしているとどうしても必要なタスクの消化に集中してしまい、新しい技術へのトライが難しくなる。
優先されないけれど大切なタスクを実施できる📝
エンジニア的には「これやったら気持ちよく開発できるんだけどな」みたいなタスクがあったりするが、そこに時間を割く判断は難しく、どうしても優先度が低くなってしまう。

具体的な運用

ということで、組織図機能開発チームでの取り組み方を簡単にご紹介します。取り組み方として、以下のような項目を最低限のガイドラインとして設定しています。

月末の金曜日に開催
ハックデイへの参加は任意
ハックデイの成果は評価に影響しない
ハックの内容は、SmartHRのプロダクトに関わる限り完全に自由
ハックデイの成果は、完成度に関わらず全てをドキュメントにまとめて社内公開する

このガイドラインは、過去に何度かエンジニア組織全体で取り組んだ際のものを踏襲しています。

ハックデイ当日の流れ

当日は以下のような流れで進めています。

Slackに、今回のハックデイで取り組む内容を投稿する
取り組むことは各々事前にある程度考えておくことが多いです。
一区切りついたらやったことをドキュメントにまとめる
一日の最後に成果発表会をする
各自やったことをデモを交えながら発表していきます。チームはフロントエンドエンジニアやバックエンドエンジニアなど幅広い職種で構成されており、取り組んだ内容も幅広くなっています。個人的には、チームのみんなが興味を持って取り組んだことが分かったり、実際に動くものが見れるこの時間がとても好きです。

実際にハックデイで取り組んだこと

過去2回のハックデイにて取り組んだことをいくつかを紹介します。

React Flow というライブラリを使って、組織図の詳細ビューを作ってみたよ

React Flow を使って組織図の詳細ビューを実装してみたというお話。Reactで自前で実装していたものを、React Flowに置き換えました。

実際にできたものは、とても良い操作感だったのでプロダクトへの導入も検討していきたいという意見が多くありました。

トランザクティブ・メモリー・システムについての調査

組織図機能の重要なコンセプトに関する概念をプロジェクトマネージャーが調査しました。ハックデイはエンジニア以外も参加しています。

gemを使ったN+1の調査

パフォーマンス的に致命的ではないですが、N+1が発生している箇所があったため、gemを使って全体的に発生箇所を調査したお話。 Railsで定番のbullet と最近社内の技術ミーティングで取り上げられた prosopite を使ったとのこと。

結果としては、bulletで検出できていなかった問題をprosopiteでは検出できました。 bulletは実行時に検出する仕組みのため、開発環境やテスト環境ですべての問題を検出できるような条件を整えるのはかなり難しい・工数がかかる印象でした。 prosopite は静的チェックのため、違う観点でチェックできるのも好印象でした。

サーバー間通信をREST API -> GraphQLに変えてパフォーマンスを改善する

組織図機能は、SmartHR基本機能のRailsサーバーとは分かれて構成されており、サーバー間通信をREST APIで行っています。 1回の組織図機能Railsサーバーの処理で、複数回のAPIコールをしているため、GraphQLを使ってこれをまとめることでパフォーマンスを改善しようと試みました。

今回は、REST APIを3回コールしている処理をGraphQLで1回のコールにまとめました。結果、1.2秒 -> 0.6秒に処理時間が短縮され、約50%の改善ができました。コードはとりあえず動くレベルでかつ開発環境での確認のため、本番環境で期待する改善効果は少し変わってきそうですが、いずれプロダクトに取り込みたいと思いました。

Webpack -> Vite

フロントエンドのバンドルにWebpackを使っている現状から、新たなデファクトスタンダードとなってきているViteへの置き換えをトライしました。

成果発表では、開発環境のホットリロードが爆速で歓声があがりました。

組織図の画像をダウンロード

ブラウザの印刷機能で対応できない部分を、画像生成ライブラリのhtml2canvas や dom-to-image を使って画像ダウンロードするための技術検証をしたというお話。

html2canvasとdom-to-imageを使い比べて、弊プロダクトの環境ではdom-to-imageの方が表示が崩れなくて良かったようです。こちらもプロダクトに導入していく流れになりそうです。

E2EテストにPlaywright

Selenium ＋ Capybaraで作られているエンドツーエンド（E2E）の自動テストを、Playwrightに置き換えてみようというお話。

成果発表では、Playwrightで1つのテストケースを実行デモをしてくれましたが、Playwrightの使い勝手の良さやVS Codeとの連携機能に参加者全員が好反応でした。

やってみてよかったこと

過去2回のハックデイを振り返ってみた感想です。

開発のモチベーションがあがる😊
- いつも最大パフォーマンスを出そうと思っていてもやはり人間なので、モチベーションがあがりづらくなってしまうことがあります。普段できない開発や技術に触れられて気持ちを新たに、また頑張れる気がしました。
試したことをプロダクトに還元することでプロダクトの価値が向上する💎
- 実際にやってみて、普段のスプリントではできない新しい流れを作ることができて、プロダクトの価値にも貢献できることを実感しました。
小さい単位で技術をアップデートしていきやすい🦍
- Webサービスを開発していると、同じ技術を使い続ける or プロジェクトを刷新するみたいな２択になってしまうことがありますが、ハックデイで小さく技術を試してプロダクトに取りこんでいくことで、二元論にならず随時技術スタックを改善していきやすくなると思います。
創発を促す🤝
- SmartHRでは普段の開発をスクラムで行っていて、その中で創発という考え方を大切しています。創発は複数のメンバーが共同で働くことによって、新しいアイデアを出しやすくしたり業務効率をアップさせるための概念ですが、ハックデイはさらにそれを加速できると感じました。
チームの自己効力感があがる👍
- 長くスクラム開発をしていると開発のリズムが煮詰まってしまうこともありますが、ハックデイを通して成果が1日で目に見えてできてくるとチームの自己効力感があがって、より雰囲気が明るくなるきっかけになると思いました。

ということで最近の月末の金曜日は、ハックデイをしてその成果発表会をするのが定例になりつつあり、そのままの流れでカシュをするというプレミアムなフライデーを過ごせるようになりました。カシュはSmartHRの福利厚生の一環で、18:00以降になるとオープンスペースでフリーアルコールを楽しむことができる制度です。（ハックデイもカシュもいずれも参加は任意です）

そんな訳で、今後もハックデイを通して楽しみながら新しい技術を取り入れ、プロダクトの価値を向上していければと思います。