DMM.com_フロントエンド開発室_部門紹介

Transcript

1. 合同会社 DMM.com フロントエンド開発室 ©DMM
2. アジェンダ ©DMM 01 ABOUT US ｜ 組織とミッション 02 OUR ACTIVITIES ｜ 活動内容とアプローチ 03 CASE STUDIES ｜ 実践と発信 04 FUTURE & HIRING ｜ これからの展望と採用
3. 組織とミッション ABOUT US フロントエンド開発室のミッションと、 組織における存在意義、そして現在の体制について。 ©DMM 01
4. MISSION 現場支援と職能活性化を通じて、 DMM のフロントエンド開発力を高める フロントエンド開発室は、次の2つを両輪に活動しています。 1. 現場支援 2. 職能活性化 事業・プロダクトの開発現場に入り込む フロントエンド職能全体の 横断的な開発支援 知見共有・発信・活性化を進める その積み上げを通じて、事業をまたいだ知見循環を促進します。 ©DMM
5. 01 組織とミッション 実践知が循環するイメージ 横断フロントエンド組織の 存在意義 事業・プロダクト 多様な事業・プロダクトで得られる実践知を、 組織全体へ循環させる DMMには、多様な事業・プロダクトがあります。 それぞれの現場には、異なるフロントエンド課題や改善知見があり ます。 フロントエンド開発室は、現場ごとの文脈を理解しながら、 実践から得た知見を整理し、他の現場や職能全体へ展開していきま す。 ©DMM 実践知 組織全体 実践から得た知見を整理し、 他の現場や職能全体へ展開していく
6. 01 組織とミッション 現在の体制 フロントエンド開発室 の現在地 室長 • 開発室の運営 • 全社のフロントエンドエンジニア採用 2026年3月に発足した、 横断フロントエンド組織 • フロントエンド職能に限定しない開発組織横断施策を 担当(兼務) 現在は3名体制で活動しています。 現場支援・採用・発信・技術検証を進めながら、 横断フロントエンド組織としての活動の型を作っています。 ©DMM メンバー • 開発現場へのダイブイン支援を中心に、横断活動にも参加
7. 活動内容とアプローチ OUR ACTIVITIES ミッション達成のための5つの活動領域と、 現場支援・職能活性化の具体的なアプローチ。 ©DMM 02
8. 02 活動内容とアプローチ 5 つの活動領域 活動の全体像 現場に入り込む 開発支援 フロントエンド開発室の 5つの活動領域 開発改善・リスク対応 の型づくり ミッション達成のための 5つの活動領域と、 現場支援・職能活性化の具体的なアプローチ。 フロントエンド 開発室 採用・発信・外部連携 ©DMM フロントエンド 職能の活性化 開発環境の変化に 向き合う知見の 蓄積と展開
9. 02 活動内容とアプローチ 主な支援スタイル 現場に入り込む開発支援 開発現場に入り チームと共に 設計・実装・改善 課題解決と知見獲得 一時的なリソース補填ではなく、 伴走型の支援を行う フロントエンド開発室では、事業・プロダクトの開発現場に 入り、チームと共に設計・実装・改善を進めます。 現場の背景や制約を理解したうえで、課題解決と知見獲得の 両方を行います。 ©DMM ダイブイン支援 アドバイザリー支援 開発現場に入り、チーム 改善活動や技術判断に と一緒に開発する 対して助言する
10. 02 活動内容とアプローチ 取り組み内容 フロントエンド職能の 活性化 フロントエンドジャンクション 部門メンバーが主催する、 毎週開催のフロントエンド情報共有の場です。 知見・課題・人のつながりを作る フロントエンドに関するテーマを幅広く扱っています。 フロントエンド開発室では、 社内のフロントエンド職能活性化のため、継続的な接点づくりにも取 り組んでいます。 フロントエンド技術 AI活用 気になるニュース 相談ごと 現場課題 etc... その他取り組み • • • • ©DMM Slack チャンネルでの情報共有 社内勉強会・社内記事・ナレッジ投稿 フロントエンド職能へのヒアリング 社外登壇やテックブログへの接続
11. 02 活動内容とアプローチ 知見を広げる 4 ステップ 知見還元のサイクル 支援先チームで 活用する 現場で得た知見を、段階的に広げていく 現場支援で得た知見は、 価値を見極めながら段階的に展開します。 社外発信や 外部コミュニティへ 還元する フロントエンド 開発室内で ナレッジ化する 社内の フロントエンド職能へ 展開する ©DMM
12. 実践と発信 CASE STUDIES 現場での技術改善の実践事例と、 得られた知見の社内外への展開・発信事例。 ©DMM 03
13. 03 実践と発信 この事例で取り組んだこと 開発改善の実践例 大規模SPAのJavaScriptを TypeScriptへ移行 長期運用されてきた大規模 SPAに対して、 JavaScriptからTypeScriptへの段階的な移行を実施しました。 中規模〜大規模 SPAの改善 TypeScript 導入 既存コードとの向き合い 開発効率・保守性の改善 掲載リンク 5万行弱ある SPAのJavaScriptをTypeScriptに移行した話 ©DMM
14. 03 実践と発信 取り組みの流れ 外部知見と社内実践の往復 社内の フロントエンドキーマンと 連携し、 DX Criteria公開前に 監修者としてコミット DX Criteria フロントエンド版を、 現場改善と外部還元につなげる 他部署への 活用アドバイスにも 展開 実際の開発現場で 改善の軸として活用 日本CTO協会のWebフロントエンド版 DX Criteriaに関わり、 公開前の監修 や現場での活用 を進めてきました。 室長は、 Webフロントエンド版 DX Criteria ワーキンググループの メンバーです。 ©DMM DX Criteria ワーキンググループへ 還元 改善活動の中で得た 課題や学びを整理
15. 03 実践と発信 発表で取り上げたテーマ 実践知の発信例 大規模 SPA の技術負債解消 大規模プロダクト改善の失敗と学びを共有 JavaScript から TypeScript への移行 フロントエンド開発室のメンバーは、 DMM Tech Conference 2025で、 長期運用プロダクトの改善事例を発表しました。 Redux-Sagaから TanStack Queryへの移行 DMM Tech Conferenceは、 DMM社内で開催された技術カンファレンスです。 当日の様子は、 DMM insideの記事でも紹介されています。 Playwright による E2E テスト導入 品質担保や変更粒度に関する失敗と学び DMM insideの記事でも紹介 ©DMM
16. これからの展望と採用 FUTURE & HIRING これから私たちが向き合っていくテーマと、 一緒に組織を創っていく仲間の募集について。 ©DMM 04
17. 04 これからの展望と採用 3 つの重点テーマ 現在の注力テーマ 現場理解・改善の型化・接点づくりを進める 現在は、次の 3つを重点テーマとして進めています。 1. 現場を知る 2. 改善とリスク対応 の型をつくる 3. 接点を作る 各事業・プロダクトのフロント フロントエンド領域で継続的に フロントエンドジャンクションや エンド状況を整理し、支援や 向き合うべき改善テーマやリ 知見共有会を通じて、フロント 改善の前提となる情報を可視 スク対応について、検知・判 エンド領域の接点を増やす。 化する。 断・共有の考え方を整理し、 継続可能な運営にしていく。 ©DMM
18. 04 これからの展望と採用 これからの重点テーマ これから向き合うテーマ AIの活用 開発環境の変化に、現場から向き合う 品質・セキュリティ・ 保守性 UI AIを含む新しい開発手法の実践と知見共有 開発環境の変化に伴う品質・セキュリティリスク AIの活用を含め、 ソフトウェア開発の進め方は大きく変化しつつあります。 フロントエンド開発室では、生産性向上だけでなく、 品質・セキュリティ・保守性・ UIへの影響にも向き合います。 人間が使う UIを、これからどう作っていくか 現場で得た知見の横展開 フロントエンド開発の新しい型づくり ©DMM
19. We are hiring フロントエンド開発室では、 事業・プロダクトの現場に入り込みながら、 得られた知見を職能全体に広げていく仲間を求めています。 こんなテーマに関われます さらに広げる活動 • 多様な事業・プロダクトのフロントエンド開発支援 • 開発環境の変化に向き合う技術検証・知見展開 • 大規模プロダクトの改善・技術負債解消 • 社内外への技術発信・職能活性化 DMM フロントエンドエンジニア オープンポジション https://dmm-corp.com/recruit/engineer/1859/ ©DMM