TypeScript | 1 日 90 分 × 7 日アプリ学習：超初級編

5日目のゴールと今日やること

5日目のテーマは
「型を“組み合わせて再利用する力”を身につけ、アプリの設計を一段階レベルアップさせる」
ことです。

ここまでであなたは、

• 基本の型（number / string / boolean）
• オブジェクトの型
• 配列の型
• ユニオン型
• オプショナルプロパティ
• 部分的な更新（Partial）

といった、TypeScript の基礎をしっかり触ってきました。

5日目は、いよいよ
「型を組み合わせて、アプリの設計を楽にする」
という段階に入ります。

今日のゴールは次の 3 つ。

型を再利用できるようになる。
型を組み合わせて“複雑なデータ”を扱えるようになる。
型の分割（小さくして管理）を体験する。

型を「再利用」できるとアプリが一気に楽になる

まずは型をそのまま書いてしまう例

const user = {
  name: "Alice",
  age: 25,
  address: {
    city: "Tokyo",
    zip: "100-0001"
  }
};

const user = {
  name: "Alice",
  age: 25,
  address: {
    city: "Tokyo",
    zip: "100-0001"
  }
};

この user の型を関数で使いたくなると、
こう書くことになります。

function printUser(u: {
  name: string;
  age: number;
  address: {
    city: string;
    zip: string;
  };
}) {
  console.log(u.name);
}

function printUser(u: {
  name: string;
  age: number;
  address: {
    city: string;
    zip: string;
  };
}) {
  console.log(u.name);
}

これはつらい。

深掘りポイント：型を“その場で書く”のは初心者が最初にぶつかる壁

• 長い
• 読みにくい
• 修正しにくい
• 再利用できない

TypeScript の強みは、
「型に名前を付けて、何度でも使える」
という点にあります。

型を分割して「小さな部品」にする

住所の型を分ける

type Address = {
  city: string;
  zip: string;
};

type Address = {
  city: string;
  zip: string;
};

User 型に組み込む

type User = {
  name: string;
  age: number;
  address: Address;
};

type User = {
  name: string;
  age: number;
  address: Address;
};

これでコードが一気に読みやすくなる

function printUser(u: User) {
  console.log(`${u.name} (${u.age}) - ${u.address.city}`);
}

function printUser(u: User) {
  console.log(`${u.name} (${u.age}) - ${u.address.city}`);
}

深掘りポイント：型を分割すると“設計図”が見える

User の中に Address を入れることで、
「User は Address を持つ」
という関係が明確になります。

これは、
現実のアプリでデータ構造を考えるときに
とても大切な考え方です。

型を組み合わせて「複雑なデータ」を扱う

例：Todo アプリのデータ構造を考える

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

ここに「ユーザーが作った Todo」という概念を追加します。

User と Todo を組み合わせる

type User = {
  id: number;
  name: string;
  todos: Todo[];
};

type User = {
  id: number;
  name: string;
  todos: Todo[];
};

実際のデータ例

const user: User = {
  id: 1,
  name: "Alice",
  todos: [
    { id: 1, title: "買い物に行く", done: false },
    { id: 2, title: "メール返信", done: true }
  ]
};

const user: User = {
  id: 1,
  name: "Alice",
  todos: [
    { id: 1, title: "買い物に行く", done: false },
    { id: 2, title: "メール返信", done: true }
  ]
};

深掘りポイント：型を組み合わせると“アプリの世界”が作れる

User
Todo
Address
Setting
Notification

こういった「アプリの世界」を
型で表現できるようになると、
TypeScript の楽しさが一気に広がります。

型の再利用をさらに強化する「共通型」を作る

例：API のレスポンス型

アプリでは、
「成功したとき」と「失敗したとき」で
データの形が変わることがよくあります。

成功パターン

type Success<T> = {
  ok: true;
  data: T;
};

type Success<T> = {
  ok: true;
  data: T;
};

失敗パターン

type Failure = {
  ok: false;
  error: string;
};

type Failure = {
  ok: false;
  error: string;
};

これを組み合わせる

type Result<T> = Success<T> | Failure;

type Result<T> = Success<T> | Failure;

実際に使う

function getUser(): Result<User> {
  return {
    ok: true,
    data: {
      id: 1,
      name: "Alice",
      todos: []
    }
  };
}

function getUser(): Result<User> {
  return {
    ok: true,
    data: {
      id: 1,
      name: "Alice",
      todos: []
    }
  };
}

深掘りポイント：型の再利用は「アプリの安全性」を底上げする

Result<T> のような型を作っておくと、

• 成功時の data の型が保証される
• 失敗時の error の型も保証される
• 間違った形のレスポンスを返せない

というメリットがあります。

5日目のミニアプリ：Todo 管理の型を作る

Todo 型

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

Todo の配列

const todos: Todo[] = [];

const todos: Todo[] = [];

Todo を追加する関数

function addTodo(title: string): Todo {
  const newTodo: Todo = {
    id: Date.now(),
    title,
    done: false
  };
  todos.push(newTodo);
  return newTodo;
}

function addTodo(title: string): Todo {
  const newTodo: Todo = {
    id: Date.now(),
    title,
    done: false
  };
  todos.push(newTodo);
  return newTodo;
}

Todo を完了にする関数

function completeTodo(id: number): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.done = true;
  }
}

function completeTodo(id: number): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.done = true;
  }
}

深掘りポイント：型があるから“安心して書ける”

• todos は Todo[]
• addTodo は Todo を返す
• completeTodo は void
• todo.done は boolean

TypeScript が
「この関数は何を受け取って、何を返すのか」
を常に守ってくれるので、
アプリが壊れにくくなります。

あえて間違えて「型のありがたさ」を再確認する

わざと done を文字列にしてみる

todo.done = "yes"; // エラー

todo.done = "yes"; // エラー

TypeScript はこう言います。

“done は boolean だよ？
文字列は危ないよ？”

JavaScript なら普通に動いてしまい、
あとで「完了判定が壊れた」というバグになります。

TypeScript は
「未来の自分を守るための安全装置」
だということが、ここでも実感できます。

5日目のまとめ

今日あなたがやったことを整理するとこうです。

型を分割して「小さな部品」にした。
型を組み合わせて「複雑なデータ」を扱えるようになった。
共通型（Result<T>）で「型の再利用」を体験した。
Todo アプリのデータ構造を型で表現した。
わざと間違えて、TypeScript のエラーが「守ってくれている」感覚を再確認した。

今日いちばん深く理解してほしいこと

5日目の本質は、

「型は“設計図”であり、組み合わせることでアプリの世界を作れる」

ということです。

型を分割する。
型を組み合わせる。
型に名前を付けて再利用する。

これらができるようになると、
TypeScript はただの“型チェックツール”ではなく、
“アプリ設計を助けてくれる相棒” に変わります。

6日目では、
「関数の型」や「コールバックの型」 を扱い、
アプリの動きを型で守る世界に進みます。