概要

アプリケーションの設計は、どの層から始めるかによって構造や開発効率が大きく変わります。
本記事では、三層アーキテクチャを前提として、次の3つの設計アプローチを整理します。

UI（プレゼンテーション）ファースト
データ（永続化・スキーマ）ファースト
ロジック（ビジネスルール）ファースト

それぞれの設計思想、設計順序、そして実際にコードへ落とすまでの流れを、
以下のサンプルアプリを判例として具体的に解説します。

判例コード：Book管理アプリ（3層構造）

// ==============================
// 1. import / 初期設定セクション
// ==============================
import "./styles.css";

// ==============================
// 2. DOM参照キャッシュ / 定数セクション
// ==============================
const titleInput = document.getElementById("title");
const authorInput = document.getElementById("author");
const dateInput = document.getElementById("date");
const noteInput = document.getElementById("note");
const readingListEl = document.getElementById("readingList");
const completedListEl = document.getElementById("completedList");
const addBtn = document.getElementById("addBtn");

// ==============================
// 3. 関数定義セクション
// ==============================
// ------------------------------
// 3.1 データアクセス関数
// ------------------------------
const outputLocalStorage = () => {
  const stored = localStorage.getItem("books"); // 保存データを取得（文字列 or null）
  const jsonString = stored || "[]"; // null の場合は "[]" を使う
  const data = JSON.parse(jsonString); // JSON文字列 → JS配列
  return data; // 配列として返す
};
const inputLocalStorage = (books) =>
  localStorage.setItem("books", JSON.stringify(books));

// ------------------------------
// 3.2 データ操作（ビジネスロジック）関数セクション
// ------------------------------
/**
 * 本データを追加（永続化）
 */
const addBookData = (title, author, date, note) => {
  const newBook = { title, author, date, note, status: "reading" };
  const books = outputLocalStorage();
  books.push(newBook);
  inputLocalStorage(books);
};
/**
 * 本データを削除
 */
const deleteBookDate = (index) => {
  const books = outputLocalStorage();
  books.splice(index, 1);
  inputLocalStorage(books);
  displayBooks();
};
/**
 * 読了状態に変更
 */
const completeBookDate = (index) => {
  const books = outputLocalStorage();
  books[index].status = "completed";
  inputLocalStorage(books);
  displayBooks();
};
// ------------------------------
// 3.3 イベントハンドラー関数セクション
// ------------------------------
/**
 * 「追加」ボタン押下時の処理
 */
const addBook = () => {
  // 入力値の取得
  const title = titleInput.value;
  const author = authorInput.value;
  const date = dateInput.value;
  const note = noteInput.value;

  // バリデーション
  if (!title || !author || !date) {
    alert("タイトル・著者・日付は必須です");
    return;
  }

  // データ操作関数を呼び出して保存
  addBookData(title, author, date, note);
  // フォームリセット
  clearForm();
  // UI更新
  displayBooks();
};

/**
 * 入力フォームをリセット
 */
const clearForm = () => {
  titleInput.value = "";
  authorInput.value = "";
  dateInput.value = "";
  noteInput.value = "";
};

// ------------------------------
// 3.4 UI更新関数セクション（副作用を内包）
// ------------------------------
/**
 * 本リストを画面に描画
 */
const displayBooks = () => {
  readingListEl.innerHTML = "";
  completedListEl.innerHTML = "";
  const books = outputLocalStorage();
  books.forEach((book, index) => {
    // ------------------------------
    // 3.4.1 要素生成・属性設定
    // ------------------------------
    const div = document.createElement("div");
    div.className = "book";

    const titleEl = document.createElement("strong");
    titleEl.textContent = book.title;

    const infoEl = document.createElement("p");
    infoEl.innerHTML = `（${book.author}）
    <br>📅 ${book.date}
    <br>📝 ${book.note || "（メモなし）"}`;

    // ------------------------------
    // 3.4.2 イベント付与
    // ------------------------------
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "削除";
    deleteBtn.classList.add("delete"); 
    deleteBtn.addEventListener("click", () => deleteBookDate(index));

    // 読書中の本のみ「読了」ボタンを追加
    if (book.status === "reading") {
      const completeBtn = document.createElement("button");
      completeBtn.textContent = "読了";
      completeBtn.classList.add("complete");
      completeBtn.addEventListener("click", () => completeBookDate(index));

      // ------------------------------
      // 3.4.3 構造組み立て（appendChildでネスト構築）
      // ------------------------------
      div.appendChild(titleEl);
      div.appendChild(document.createElement("br"));
      div.appendChild(infoEl);
      div.appendChild(completeBtn);
      div.appendChild(deleteBtn);

      // ------------------------------
      // 3.4.4 DOM挿入（appendで画面反映）
      // ------------------------------
      readingListEl.appendChild(div);
      
    } else if (book.status === "completed") {
      // ------------------------------
      // 3.4.3 構造組み立て（appendChildでネスト構築）
      // ------------------------------
      div.appendChild(titleEl);
      div.appendChild(document.createElement("br"));
      div.appendChild(infoEl);
      div.appendChild(deleteBtn);
      
      // ------------------------------
      // 3.4.4 DOM挿入（appendで画面反映）
      // ------------------------------
      completedListEl.appendChild(div);
    }
  });
};
// ==============================
// 4. 初期化 / イベント登録
// ==============================
displayBooks();
addBtn.addEventListener("click", addBook);

1. 設計アプローチの分類と背景

層	対応セクション	主な責務	例
UI層	3.3, 3.4	ユーザー操作の受け取り・画面更新	クリック時に反応、DOM再描画
ビジネスロジック層	3.2	状態の変化ルール	本を追加・削除・読了状態に変更
データアクセス層	3.1	永続化・データI/O	localStorageやDB操作

設計を始める際に、
この3層のどれを「起点」として考えるかによって、コード構造が変化します。

2. UIファースト設計（Presentation-First）

1. 概要

UIファースト設計は「画面」や「ユーザー操作」から設計を始める手法です。
プロトタイピングやUXを重視するフロントエンド開発で多く用いられます。

2. 設計フロー

手順	内容	対応層
1	画面モックを作成し操作パターンを整理	UI層
2	各ボタンやイベントの動作を定義	イベント層
3	必要なデータ操作関数を設計	ロジック層
4	データ保存・取得関数を実装	データ層

3. 判例コードにおける該当部分

addBtn.addEventListener("click", addBook);

「クリックイベントから逆算して設計する」ことで、
必要なビジネスロジック (addBookData) や UI更新 (displayBooks) を後付けしていきます。

4. 特徴

項目	内容
向いている分野	React・VueなどのSPA
メリット	開発初期に画面がすぐ見える
デメリット	ロジック・データ設計が後手になる
別名	Presentation-Driven Development

3. データファースト設計（Data-First）

1. 概要

データファースト設計は「アプリで扱うデータ構造」から設計を始めます。
DBスキーマ・オブジェクト構造・永続化を重視したアプローチです。

2. 設計フロー

手順	内容	対応層
1	データ構造（スキーマ）を定義	データ層
2	CRUD操作（Create, Read, Update, Delete）を設計	データ層
3	データ変更ルールを実装	ロジック層
4	UIからそれらを呼び出す	UI層

3. 判例コードにおける該当部分

const outputLocalStorage = () => {
  const stored = localStorage.getItem("books");
  const jsonString = stored || "[]";
  const data = JSON.parse(jsonString);
  return data;
};

このようにまず「どのデータを扱うか」「どう保存するか」から設計します。

4. 特徴

項目	内容
向いている分野	バックエンド・API・DB設計
メリット	データ整合性が高い
デメリット	UIの完成が遅れる
別名	Schema-First Design, Data-Driven Design

4. ロジックファースト設計（Domain-Driven / Logic-First）

1. 概要

ロジックファースト設計は、UIやDBに依存せず**アプリのルール（状態変化）**を中心に考えます。
クリーンアーキテクチャやドメイン駆動設計（DDD）と近い発想です。

2. 設計フロー

手順	内容	対応層
1	アプリの状態（books）とルールを定義	ロジック層
2	状態の永続化方法を実装	データ層
3	状態変化をUIイベントに接続	UI層

3. 判例コードにおける該当部分

const completeBookDate = (index) => {
  const books = outputLocalStorage();
  books[index].status = "completed";
  inputLocalStorage(books);
  displayBooks();
};

ビジネスルール（読書中→読了）はここで定義され、
UIやDBの具体的実装には依存していません。

4. 特徴

項目	内容
向いている分野	大規模・複雑なドメイン設計
メリット	再利用性・テスト容易性が高い
デメリット	初期設計コストが高い
別名	Domain-Driven Design, Clean Architecture

5. 現在の主流と選び方

開発分野	主流のアプローチ	理由
モダンWeb開発（React, Vue）	UIファースト＋ロジック分離	UX重視、Hooksなどでロジック抽出
API／DB設計	データファースト	PrismaやTypeORMが代表的
大規模ドメインアプリ	ロジックファースト	クリーンアーキテクチャやDDDの流れ

多くの現場では、

初期プロトタイプ → UIファースト
本番実装 → ロジックファースト

というハイブリッド型が一般的です。

6. まとめ

設計タイプ	中心	主な利点	想定対象
UIファースト	画面・体験	早期に動作確認できる	フロント主導開発
データファースト	データ構造	整合性と保守性	API・DB設計
ロジックファースト	アプリルール	再利用性・テスト性	DDD・大規模開発

参考リンク