社内フロントエンド勉強会について

はじめに

こんにちは！
新車サブスク開発G、Osaka Tech Lab 所属の high-g（@high_g_engineer）です。
今回は、社内で立ち上げたフロントエンド勉強会について紹介します。

開催経緯

ある日、新車サブスク開発Gの上長との1on1で、TSKaigi 2024のタイムテーブルを見せる機会がありました。
それを見た上長からは「幅広いテーマが扱われていて、非常にいい教材だね。これを使って、各部署のフロントエンドエンジニア同士で知見を共有し、横のつながりを作る勉強会があったらいいね」という前向きな提案をもらいました。

その言葉をきっかけに、参加意欲の高そうなフロントエンドエンジニアを募り、社内勉強会の企画がスタートしました。

勉強会の目的

この勉強会では、以下の3つを目的に掲げています。

1. 学習：外部カンファレンスの発表内容やWeb標準仕様を共有、議論を通じて理解を深める
2. 実践：学んだ内容を実際のプロダクトに適用する
3. 共有：実践から得た知見や課題を参加者間で共有し、組織全体のナレッジとして蓄積する

単に知識を得て終わるのではなく、「実際に業務で使える状態になる」ことを目指した実践的な勉強会です。
週に1回、1時間の枠を確保し、読み合わせ・モブプログラミング・ハンズオンなど、内容に応じた形式で実施しています。

主なテーマと発展経緯

2024年9月30日から現在までに34回開催し、以下のような内容を取り組みました。

カンファレンスや技術イベントの知見共有（第1〜17回）

まずは、勉強会を定着させるために、TSKaigi 2024やJSConf JP 2024の発表内容を中心に、フロントエンド技術の最新動向を参加者で学習しました。

• Prettierの未来を考える（第1回）：コードフォーマッターの今後の方向性
• TypeScriptのパフォーマンス改善（第2回）：実際の業務コードでの課題と照らし合わせ
• 全てをTypeScriptで統一したらこうなった！（第3回）：フルスタック開発事例
• TypeScript化の旅: Helpfeelが辿った試行錯誤と成功の道のり（第5回）
• TanStack Routerで型安全かつ効率的なルーティング（第7回）
• Storybook駆動開発 UI開発の再現性と効率化（第9回）
• TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話（第10回）
• mizchiさんによる「LAPRAS 公開パフォーマンスチューニング」（第12〜13回）：外部事例から学ぶパフォーマンス改善
• Yahoo! JAPANトップページにおけるマイクロフロントエンド（第15回）：大規模組織での開発事例
• JavaScript のモジュール解決の相互運用性（第16回）
• You Don't Know Figma Yet - FigmaをJSでハックする（第17回）

チーム間知見共有と相互理解（第18〜24回）

参加者が増えたことで、個人のスキル共有や各部署のフロントエンドチームの状況共有を実施しました。
これにより、今後の勉強会の方向性を検討するとともに、各チームのプロジェクトをコードベースで確認し、KINTOテクノロジーズ全体のフロントエンド課題を共有できました。

• ここまでのふりかえり（第18回）：勉強会の方向性を議論
• 自己紹介 〜これまでのキャリアを添えて〜（第19回）：メンバー間の相互理解促進
• 各チームのフロントエンド開発状況共有会（第20〜24回）：5回シリーズで各チームの技術スタック、課題、取り組みを詳細に共有

Web標準の理解と実践（第25〜28回）

ふりかえり会で、Web仕様を理解したいという声があったため、Baselineを全員で掘り下げながら理解する取り組みをしました。

https://web.dev/baseline?hl=ja

• Baselineの理解（第25〜27回）：3回シリーズでWeb標準について体系的に学習
• Baselineの振り返り＆次回以降やること議論（第28回）：学習内容の整理と今後の方向性検討

実践的なパフォーマンス改善（第29回〜現在）

mizchiさんの公開パフォーマンスチューニングの動画を参考にし、実際のプロダクトのパフォーマンスチューニングを実践しました。

https://www.youtube.com/watch?v=j0MtGpJX81E

• FACTORYパフォーマンス改善（第29〜30回）：2回シリーズで具体的な改善施策と結果を共有
• TSKaigi 2025 登壇内容シェア会（第31回）：社内メンバーの登壇内容を事前共有
• KINTO ONE パフォーマンス改善（第32〜34回）：3回シリーズでモブプログラミング形式により全員で実際の改善作業を実施、最も実践的な学習を実現

継続的な開催による成果

参加者数の拡大と定着

当初5名から始まった勉強会は、継続開催を通じて、コンスタントに10名以上が参加する勉強会へと成長しました。参加者は新車サブスク開発Gだけでなく、他のグループからも参加者が増えてきて、横の繋がりを実現できています。
初期メンバーの多くが現在も参加を続けており、新しく参加したメンバーも定着率が高いことから、勉強会が参加者にとって価値のある時間になっていることが伺えます。

組織的な技術力の段階的向上

普段、カンファレンスや技術イベントで得た知識は、個人視点での学習範囲にとどまりがちですが、各部署にいる異なる課題感を持ったフロントエンドエンジニアたちで同時に学ぶ事により、組織全体にメリットがあるだけでなく、個人では気づきにくい観点からの学びにもつながっています。

BaselineシリーズでWeb標準について体系的に学習した継続参加メンバーは、これまで「なんとなく」使っていた技術について仕様レベルで理解できるようになり、業務での技術選択においてもより根拠を持った判断ができるようになっています。

実践的な問題解決能力の獲得

直近の勉強会では、KINTO ONE や KINTO FACTORY などの実際のプロダクトを対象に、モブプログラミング形式でパフォーマンス改善に取り組みました。

勉強会で得た知見をそのままプロダクトに適用し、実際に手を動かして確認することで、パフォーマンスチューニングへの苦手意識を払拭。売上向上にもつながる、実践的かつ価値のある取り組みとなりました。

チーム間の技術的連携の深化

開発状況の共有会を通じて、これまで把握しきれていなかった他チームの技術的な取り組みや課題を知る機会が増えました。
その結果、類似した課題を持つチーム同士が勉強会後に個別で相談し合うケースも増加しています。

勉強会は、単なる学習の場にとどまらず、実際の業務課題を解決するためのハブとしても機能し始めています。

まとめ

社内のフロントエンドエンジニア同士の横のつながりを強化する目的で始まったこの勉強会は、外部カンファレンスの知見共有からスタートし、現在では実プロダクトを題材にしたパフォーマンス改善へと発展しています。

今後も継続開催を通じて、つながりを育みながら、組織全体の技術力向上に貢献する場を目指していきます。