7日目のゴールと今日やること
7日目のテーマは
「TypeScript 超初級編の総まとめとして、小さなアプリを“型の力で安全に作れる”状態になること」
です。
ここまで 6 日間であなたは、
- 基本の型（number / string / boolean）
- オブジェクトの型
- 配列の型
- ユニオン型
- オプショナルプロパティ
- 関数の型
- コールバックの型
- イベントの型
といった、TypeScript の“基礎の基礎”をすべて体験してきました。
7日目は、これらを ひとつの小さなアプリにまとめる ことで、
「型があるとアプリがどれだけ安全で書きやすいか」を実感してもらいます。
今日作るミニアプリ：簡単な「Todo 管理アプリ」
どんなアプリか
- Todo を追加できる
- Todo を完了にできる
- Todo の一覧を表示できる
JavaScript でも作れますが、
TypeScript を使うと “壊れにくいアプリ” になります。
Todo の型を作る（アプリの中心となる設計図）
Todo の形を決める
type Todo = {
id: number;
title: string;
done: boolean;
};
深掘りポイント：型は「アプリの世界のルール」
Todo は
id（number）
title（string）
done（boolean）
という “世界のルール” を TypeScript に教えています。
このルールがあるから、
間違ったデータが入った瞬間に TypeScript が止めてくれます。
Todo の配列に型を付ける
const todos: Todo[] = [];
深掘りポイント：配列の型は「中身のルール」
Todo[] は
「この配列の中身は全部 Todo 型だよ」
という意味です。
もし間違った形のデータを入れようとすると、
その場でエラーになります。
Todo を追加する関数に型を付ける
実装
function addTodo(title: string): Todo {
const newTodo: Todo = {
id: Date.now(),
title,
done: false
};
todos.push(newTodo);
return newTodo;
}
深掘りポイント：関数の型は「入口と出口の約束」
addTodo は
title（string）を受け取り、
Todo を返す。
この“入口と出口の型”があるだけで、
アプリの安全性が一気に上がります。
Todo を完了にする関数に型を付ける
function completeTodo(id: number): void {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.done = true;
}
}
深掘りポイント：void は「何も返さない」
completeTodo は
「Todo を更新するだけで、値は返さない」
という意味です。
関数の意図が明確になります。
Todo を表示する関数に型を付ける
function renderTodos(list: Todo[]): void {
list.forEach(todo => {
console.log(`${todo.title} - ${todo.done ? "完了" : "未完了"}`);
});
}
深掘りポイント：list の型が Todo[] だから安心して書ける
todo.title
todo.done
これらが補完され、
間違ったプロパティを呼ぶとエラーになります。
JavaScript では気づけないミスを、
TypeScript はその場で止めてくれます。
イベント処理にも型を付ける（アプリの動きを守る）
HTML を想定
<input id="titleInput" />
<button id="addButton">追加</button>
TypeScript 側
const titleInput = document.getElementById("titleInput") as HTMLInputElement;
const addButton = document.getElementById("addButton") as HTMLButtonElement;
addButton.addEventListener("click", (event: MouseEvent) => {
const title = titleInput.value.trim();
if (title) {
addTodo(title);
renderTodos(todos);
}
});
深掘りポイント：イベントの型があると“動き”が壊れない
event: MouseEvent
titleInput: HTMLInputElement
addButton: HTMLButtonElement
これらの型があることで、
- 存在しないプロパティを呼べない
- 間違った値を渡せない
- 補完が効いて書きやすい
というメリットがあります。
あえて間違えて「型のありがたさ」を再確認する
わざと done を文字列にしてみる
todo.done = "yes"; // エラー
TypeScript はこう言います。
“done は boolean だよ？
文字列は危ないよ？”
JavaScript なら普通に動いてしまい、
あとで「完了判定が壊れた」というバグになります。
TypeScript は
「未来の自分を守るための安全装置」
だということが、ここでも実感できます。
7日目のまとめ
今日あなたがやったことを整理するとこうです。
Todo 型を作って「アプリの世界のルール」を決めた。
Todo[] で「配列の中身の型」を守った。
関数の型で「入口と出口の約束」を作った。
イベント処理に型を付けて“動き”を安全にした。
小さな Todo アプリを TypeScript で完成させた。
わざと間違えて、TypeScript のエラーが「守ってくれている」感覚を再確認した。
今日いちばん深く理解してほしいこと
7日目の本質は、
「TypeScript は“型のルール”を使って、アプリ全体を安全にする」
ということです。
データの型
関数の型
イベントの型
状態の型
これらがそろうと、
アプリは“壊れにくく、読みやすく、直しやすい”ものになります。
あなたはもう、
「TypeScript が怖い初心者」ではなく
“型を使ってアプリを作れる人”
の側に立っています。
ここから先は、
あなたが作りたいアプリに合わせて、
型を少しずつ広げていくだけです。
