Upgrade to Pro — share decks privately, control downloads, hide ads and more …

新卒研修2週間で一つのWebサービスをチームで作り切った話

NkiHrk
December 13, 2021

 新卒研修2週間で一つのWebサービスをチームで作り切った話

Think ! FrontEnd by DMM #4

NkiHrk

December 13, 2021
Tweet

Other Decks in Programming

Transcript

  1. © DMM.com 今回の目的 • 話すこと ◦ Webサービスに関して ◦ フロントエンド領域での工夫 ◦

    短期間で作り切るために何をしたか • 話さないこと ◦ 新卒研修の詳細 ◦ バックエンド・インフラなど今回の趣旨から外れ る技術の詳細
  2. © DMM.com 使用した技術 7 7 linaria • CSS in JSのライブラリ

    • ビルド時にJSファイルからCSSを解析して CSSファイルとして書き出してくれる • styleの解析にかかる時間が削減できるの でパフォーマンス ⭕ vite • HMR(Hot Module Replacement)など、 ネイティブのESモジュールに対して豊富な 機能拡張を提供するビルドツール • Rollupで高速バンドル • Vue での使用例が目につくが、ちゃんと React でも使える!!
  3. © DMM.com 使用した技術 8 8 linaria • CSS in JSのライブラリ

    • ビルド時にJSファイルからCSSを解析して CSSファイルとして書き出してくれる • styleの解析にかかる時間が削減できるの でパフォーマンス ◦ vite • HMR(Hot Module Replacement)など、 ネイティブのESモジュールに対して豊富な 機能拡張を提供するビルドツール • Rollupで高速バンドル • Vue での使用例が目につくが、ちゃんと React でも使える!!
  4. © DMM.com 今回行った開発の流れ 11 11 1. サービス企画 2. ワイヤーフレームの作成 3.

    必要機能の抽出&着手の優先順位付け 4. プロジェクトの環境構築&準備(フロント&バックエンド&デザイン) 5. デザイン作成 6. 必要機能の再抽出&やる・やらないの決定 7. デイリースクラムで進捗のボトルネックを再整理し、潰す一手を打つ 8. 7を繰り返し、完成を目指す
  5. © DMM.com 課題点 15 15 • チームメンバーの役割が不明瞭になる恐れ 意思決定権のレイヤーを分割して解決(以下は、実際に行ったチーム体制) • プロダクトオーナー:Aさん(エンジニア)

    • スクラムマスター:Bさん(エンジニア) • フロントエンド:Cさん(エンジニア) • バックエンド&インフラ:Dさん(エンジニア) • デザイン:Eさん(デザイナー)
  6. © DMM.com 課題点 17 17 • チームメンバーの得意な技術領域にばらつきがあった ⇒ 開発に必要な画面数が多く、フロントエンドの比重が大きい ⇒

    フロントエンドへの重点的な開発リソースの投下が必要 ⇒ メンバーのフロントエンドへの理解力に偏り があった
  7. © DMM.com 課題点 18 18 • チームメンバーの得意な技術領域にばらつきがあった CSSのBEM(Block Element Modifier)記法をコード規約として設定し、

    その勉強会を開いて対応。主に、以下の形式でチームの共通認識を作りました • Block:要素のレイアウトを行う • Element:要素自体のデザイン • Modifier:要素にあるデザイン差分の追加
  8. © DMM.com 課題点 21 21 • デザイナーとエンジニアの意思共有が難しい プロダクトオーナーがデザインの助っ人 として参加する •

    2倍の進捗になるため、開発メンバーにスムーズなタスク割り振りが可能 • デザイナーとデザインでコミュニケーションすることで、 POの目指すゴールを伝えやすくする • エンジニアの観点から、出戻りの発生しにくい(開発しやすい)デザインの提案 が可能