4日目のゴールと今日やること
4日目のテーマは
「配列 × TypeScript の型」を組み合わせて、“検索・フィルタ・ソート”の基礎を型安全に書けるようになること
です。
ここまでであなたは、
- number / string / boolean
- オブジェクトの型
- 配列の型
- ユニオン型
- オプショナルプロパティ
といった「型の基礎」をしっかり触ってきました。
4日目は、いよいよ “アプリっぽい処理” に踏み込みます。
JavaScript ではバグが起きやすい
「検索」「フィルタ」「ソート」を
TypeScript の型で安全に書く練習をします。
配列 × 型の世界を理解する
配列は「同じ型のデータが並んでいるもの」
TypeScript では、配列は
「中身の型」 がとても重要です。
type User = {
name: string;
age: number;
};
const users: User[] = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
ここで TypeScript はこう理解します。
- users は「User 型の配列」
- 配列の中身は全部 User
- User の name は string、age は number
つまり、
配列の中身の型がしっかり決まることで、
検索・フィルタ・ソートが安全に書けるようになる
ということです。
配列の検索を型安全に書く
名前で検索する関数を作る
function searchUsers(users: User[], keyword: string): User[] {
return users.filter(user =>
user.name.toLowerCase().includes(keyword.toLowerCase())
);
}
深掘りポイント：filter の中も型が効く
filter の中で user.name と書いた瞬間、
TypeScript は「name は string」と理解しています。
だから、
user.name.toLowerCase()
が補完されるし、間違ったプロパティを呼ぶとエラーになります。
user.nam.toLowerCase() // エラー（nam は存在しない）
JavaScript では気づけないミスを、
TypeScript はその場で止めてくれます。
配列のフィルタを型安全に書く
年齢で絞り込む関数
function filterByAge(users: User[], min: number, max: number): User[] {
return users.filter(user => user.age >= min && user.age <= max);
}
深掘りポイント：比較演算も型が守ってくれる
user.age は number とわかっているので、
= や <= を使っても安全です。
もし age が string だったら、
TypeScript はこう言います。
“string と number を比較するのは危ないよ”
JavaScript では普通に動いてしまうので、
ここが TypeScript の大きな強みです。
配列のソートを型安全に書く
年齢で昇順ソート
function sortByAge(users: User[]): User[] {
return [...users].sort((a, b) => a.age - b.age);
}
深掘りポイント：sort は破壊的なのでコピーする
sort は元の配列を書き換えるので、
安全のためにスプレッド構文でコピーします。
[...users].sort(...)
これも TypeScript が
「users は User[] だよ」と理解しているからこそ
補完が効き、間違いを防げます。
4日目のミニアプリ：検索 × フィルタ × ソートを組み合わせる
データを用意する
type User = {
name: string;
age: number;
};
const users: User[] = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 22 },
{ name: "David", age: 35 }
];
検索 → フィルタ → ソートの流れを作る
function processUsers(
users: User[],
keyword: string,
minAge: number,
maxAge: number
): User[] {
let result = searchUsers(users, keyword);
result = filterByAge(result, minAge, maxAge);
result = sortByAge(result);
return result;
}
深掘りポイント：型があるから“流れ”が壊れない
searchUsers の戻り値は User[]
filterByAge の戻り値も User[]
sortByAge の戻り値も User[]
だから、
関数をつなげても型が崩れない
という安心感があります。
JavaScript だと、
途中で「文字列が混ざった」「undefined が入った」
という事故が起きがちです。
TypeScript はそれを防いでくれます。
あえて間違えて「型のありがたさ」を体感する
わざと age を string にしてみる
const users: User[] = [
{ name: "Alice", age: "25" } // エラー
];
TypeScript はこう言います。
“User の age は number だよ？
文字列は危ないよ？”
JavaScript なら普通に動いてしまい、
ソートした瞬間にバグになります。
TypeScript は
「未来の自分を守るための安全装置」
だということが、ここでまた実感できます。
4日目のまとめ
今日あなたがやったことを整理するとこうです。
配列に型が付くと、検索・フィルタ・ソートが安全に書ける。
filter の中でも型が効くので、プロパティのミスが防げる。
sort は非破壊で書くのが安全（スプレッド構文）。
検索 → フィルタ → ソートの流れを型で守れる。
わざと間違えて、TypeScript のエラーが「守ってくれている」感覚を再確認した。
今日いちばん深く理解してほしいこと
4日目の本質は、
「配列 × 型」は、アプリの“データ処理”を安全にする最強の組み合わせ
ということです。
検索
フィルタ
ソート
ページ分割
集計
これらはすべて配列操作です。
そして、
配列の中身の型がしっかりしているだけで、
アプリ全体の安全性が一気に上がる
ということを、今日は体験しました。
5日目では、
「型の再利用」や「型の組み合わせ」 を学び、
アプリの設計がもっと楽になる世界に進みます。
