.png){kind=small}
こんにちは、はけまるです！
2023/06/22に弊社が主催した、豪華5社によるフロントエンドイベント「Front-end Deep Dive Online」についてのレポートを書かせていただきます！
ご参加いただいた5社☆
- 株式会社クラスメソッド
- 株式会社ゆめみ
- 株式会社SmartHR
- 株式会社HRBrain
- 株式会社Another works
目次
- イベントの概要
- LT登壇内容
- 「巨大tableのパフォーマンスを改善する」
- 「フロントエンド開発エクササイズ」
- 「改善活動に戦略と秩序を持たせる」
- 「HRBrainの生態系を支えるフロントエンドチームの取り組み」
- 「頑張りすぎない、開発生産性を上げるフロントエンドテスト戦略」
- おわりに
イベントの概要
Another worksでは、技術力を磨きたい、あるいは他社のチームの取り組みについて知りたいと考えている方々向けに定期的にイベントを開催しています！
今回は、各社のCTOやテックリード、エンジニアリングマネジャー、フロントエンドエンジニアの方々に技術や生産性、チームの成長、実装時の考え方など様々なテーマで登壇いただきました！
参加人数は120名を超え、 #AwEngineerMeetup のハッシュタグでたくさんの方にTweetしていただけました！
LT登壇内容
- 株式会社クラスメソッド 高橋 ゆうき様：「巨大tableのパフォーマンスを改善する」
- 株式会社ゆめみ スー様：「フロントエンド開発エクササイズ」
- 株式会社SmartHR 山本 裕太様：「改善活動に戦略と秩序を持たせる」
- 株式会社HRBrain 山口 祐司様：「HRBrainの生態系を支えるフロントエンドチームの取り組み」
- 株式会社Another works 塩原 基弘：「頑張りすぎない、開発生産性を上げるフロントエンドテスト戦略」
1.「巨大tableのパフォーマンスを改善する」
株式会社クラスメソッド 高橋 ゆうき様
内容
- 巨大テーブルのパフォーマンス改善に立ち向かう
- requestIdleCallbackにより、CPUに余裕があるときに順次表示するDeferコンポーネント
- IntersectionObserverで最下部まで到達したら以降のコンテンツを読み込む
- uiがブロックされるとき、useTransitionが使える
サンプルサイトはこちら！
はけまるレポート
requestIdleCallbackやIntersectionObserverは聞いたことはありましたが、実際に使ったことは初めてだったのでとても勉強になりました！
「最初に思い浮かんだ方法が唯一の解決方法とは限らない」という考え方はプロダクト開発者としてとても大切にしていきたいです！
2.「フロントエンド開発エクササイズ」」
株式会社ゆめみ スー様
内容
- より良いコードを書くためのガイドラインをエクササイズ形式で伝授
- エクササイズ項目はこちら！
- classNameプロパティ禁止
- optionalプロパティ禁止
- プロパティは最大3つ
- exportするものは全体でユニークな名前にする
- スナップショットテストの導入役割ごとにファイルを分ける
はけまるレポート
すーさんの話す「じゃあやめましょう」がとても聞き心地がよく、癖になりました！笑
特にoptionalプロパティを使いすぎると条件分岐が増えてつらい思いをしたことがあるので、共感しました。すぐに実践できる内容も多く、今後の実装時に意識していきたいと思います！
3.「改善活動に戦略と秩序を持たせる」
株式会社SmartHR 山本 裕太様
内容
- フロントエンドエンジニアの横串チームにおける、改善活動の課題と、実際に行った施策のお話
- 大規模スクラム（LeSS）で開発する組織の中で、チーム外の活動に対し、いかにメンバーが戦略を理解し、活動を自分ごと化できるようにしていったかのアプローチを解説
- 「横串会」を改善するために実際にやったこと
- 目的の言語化
- 課題の発散から収束（洗い出し→現状理解→優先度づけ）
- 課題の可視化（zatsuバックログの作成）
はけまるレポート
サイドワーク的な側面と明確な行動目的、どちらも兼ね備えた「横串会」が、とても魅力的でした！
サイドワーク的な側面が強すぎると、成果があまり出ないことが多く、やるからにはしっかり目的を持って行動することが大切だと再認識。
フロントエンドやエンジニアはもちろん、様々な職種で使える考え方を学ぶことができ、とても有意義な内容でした！
4.「HRBrainの生態系を支えるフロントエンドチームの取り組み」
株式会社HRBrain 山口 祐司様
内容
- マルチプロダクト×フロントエンドの不を改善する
- デザインシステムとUIコンポーネントライブラリ
- 活躍人材の再現性を高めるための改善
- フロントエンドオフィスアワー
- コミュニケーションの可視化
はけまるレポート
メンバーが活躍できるようにするために様々なアプローチがあることを知り、視野が広がりました！特にコミュニケーション量の可視化でこんなことがわかるのかと、とても驚きました。笑
フロントエンドオフィスアワーで実施されていたTypeChallenge、昔ひとりで挑戦して数問で挫折したので、弊社メンバーでもやってみたいな〜
5.「頑張りすぎない、開発生産性を上げるフロントエンドテスト戦略」
株式会社Another works 塩原 基弘
内容
- 開発生産性を向上させるという目的でテストを書くことで安定性と開発の効率化を促す直近の取り組みについて
- テストは小さく始める（あれもこれも手を出さない）
- 取り組み事例
- playwrightを利用したクロスブラウザQAを動画で行う
- PR差分に対してのカバレッジレポートを導入
- バグが発生したときにみんなで集まって、テストを書く
はけまるレポート
テストはあと回しにしがちなので、最初は小さくはじめ、重要かつ簡単な部分から始めることで導入がよりしやすくなるというのはとても共感しました！
また、複数の主要ブラウザをすべてQAするのは難しいので動画を取ってくれるplaywriteはとても便利ですね〜
今後はテストをうまく使って楽をしていきたいと思います！
LT後交流会
LT後は登壇者のメンバーで意見交流会を実施！
横串会やテストについてなど各社の開発体制によって様々な意見があり、とても勉強になりました〜！
おわりに
Another worksでは7月, 8月と毎月イベントを開催していく予定です！
#AwEngineerMeetup のハッシュタグ付きでツイートで一緒に盛り上げいただけると嬉しいです！
Connpassでグループメンバーになっていただけると開催通知が送られますので、以下より是非グループメンバー登録をよろしくお願いします！
Share this post