タムサイト テックブログ

2026年1月17日

フロントエンドの開発手順を言語化する

必要な要素を整理

  • 要検定義

    • ユーザーシナリオを達成する

  • Figma

    • 適切なVariable Tokensをコードでも活用する
      • プリミティブ、セマンティックの認知
      • 色や余白、大きさなど
    • FigmaのコンポーネントとReactのコンポーネントを一致させる
    • 画面では既存のコンポーネントを活用して、組み合わせるだけにする

  • UI/UX

    • staticなUI
    • dynamicなUI
      • GET APIを活用して取得したデータを表示
      • POST, PUT, DELETE APIや状態管理を活用して更新されたデータを表示
    • UX
      • ユーザー操作, 通知など...

【ボトムアップ】フロントエンドの画面設計流れ

  • 見た目を作る → 振る舞いを作る
    • 見た目: 静的な見た目 → 動的な見た目
    • 振る舞い: スコープが小さい振る舞い → スコープが大きい振る舞い
  1. 静的なUIと動的なUIを用いた画面構築を設計
  • 画面に必要な静的UIと動的UIを洗い出し、コンポーネント名を定義(Figmaも確認)
  • アトミックデザインの5層で言うとボトムアップに実装をしていく
    • atomを作って最終的にpagesで表示する
  • 取得データやユーザー操作によって達成するユーザーシナリオを言語化する
    • ユーザーシナリオとしてテストケースを作成
      • UIごとに必要なテストを記載
      • Storybookやvitestなどを用いる。
        • VRTやSnapshotテストや結合テスト、単体テストを行う
  1. 静的なUI構築を設計
  • Figmaの画面をどのようにコンポーネント分割するできるかを考える
    • 命名(責務)とそのコンポーネントの独立したシナリオを考える
    • Atomレベルから考える
      • DRY原則として既存のAtomsを使うのか、新規のAtomを作るのか
    • その後にMoleculesも考える
  1. 動的なUI構築を設計
  • 動的な箇所を見つける
    • 作成ずみのAPIを元に必要なデータを確認
    • 動的な表示(データ)の発見
    • 状態管理の検討
      • 状態管理ライブラリ or React Hook or Browser Storage(Local Storageなど)
  • どのAtomsやMoleculesを使ってOrganismsを作成できるかの検討
  1. 他に必要な振る舞いの使用があれば設計する
  • ログインチェックやエラーモーダルの表示など

実装の流れ

  • 共通

    1. 見た目、振る舞いを実装
    2. Story登録して、テストを記載
    3. propsに応じた見た目、振る舞いを実装
    4. Story編集して、テストを記載
    5. テストファイルにテストを記載

  • 流れ

    1. Atom, Moleculesを実装
    2. Organismsを実装
    3. Pageを実装(Story登録およびテストは行わない)

参考