- Day 9：Objectの配列で「一覧データ」を気持ちよく扱う
- Object + Array：オブジェクト配列という定番パターン
- map：配列を「変換」する
- filter：条件に合うものだけ「絞り込む」
- find：条件に合う「1件だけ」を探す
- some：条件を「1人でも満たしているか」を調べる
- every：条件を「全員が満たしているか」を調べる
- Day 9 練習まとめテンプレート
- Day 9のまとめ
- Day 9：Objectの配列で「検索・抽出・並べ替え」をマスターする
- 基本となるユーザー配列を用意する
- 課題1：20歳以上を検索（filter）
- 課題2：IDで検索（find）
- 課題3：名前だけ取り出す（map）
- 課題4：年齢順に並べる（sort）
- 課題5：特定ユーザーが存在するか確認（some / every）
- Day 9 練習用テンプレート
- Day 9のまとめ
Day 9：Objectの配列で「一覧データ」を気持ちよく扱う
Day 9では、Object（オブジェクト）＋配列という、とてもよく使う組み合わせを扱います。 ユーザー一覧のような「表形式のデータ」を、TypeScriptでどう扱うかを体験しながら、map, filter, find, some, every といった便利メソッドを身につけていきます。
Object + Array：オブジェクト配列という定番パターン
ユーザー一覧の例
まずは、今回の題材となるユーザー一覧を見てみます。
const users = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 }
];
- これは「オブジェクトが並んだ配列」です。
- 1つ1つの要素は「ユーザー情報のオブジェクト」になっています。
型をつけてみるとよりTypeScriptらしい
type User = {
id: number;
name: string;
age: number;
};
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 }
];
ポイント：
User[]は「User型のオブジェクトが並んだ配列」という意味です。- 型をつけておくと、
ageを間違えて文字列にしたりするミスを防げます。
map：配列を「変換」する
map は、配列の各要素を変換して、新しい配列を作るメソッドです。
例1：名前だけの配列を作る
const names = users.map((user) => {
return user.name; // 各ユーザーから name だけ取り出す
});
console.log("名前一覧:", names);
// ["Taro", "Hanako", "Jiro"]
users配列をmapで変換して、namesという「名前だけの配列」を作っています。- 「一覧から特定の項目だけ取り出したい」ときにとても便利です。
例2：年齢に1歳足した新しい配列を作る
const agesNextYear = users.map((user) => {
return user.age + 1; // 来年の年齢
});
console.log("来年の年齢一覧:", agesNextYear);
// [21, 26, 19]
深掘りポイント：
mapは「元の配列を壊さずに、新しい配列を作る」というのが大事な特徴です。- 「変換」というイメージで覚えておくと、使いどころが見えやすくなります。
filter：条件に合うものだけ「絞り込む」
filter は、条件に合う要素だけを残して、新しい配列を作るメソッドです。
例1：20歳以上のユーザーだけを抽出する
const adults = users.filter((user) => {
return user.age >= 20; // 20歳以上かどうか
});
console.log("20歳以上のユーザー:", adults);
// [{ id: 1, name: "Taro", age: 20 }, { id: 2, name: "Hanako", age: 25 }]
例2：名前が3文字以上のユーザーだけを抽出する
const longNameUsers = users.filter((user) => {
return user.name.length >= 4; // 名前の長さが4文字以上かどうか
});
console.log("名前が4文字以上のユーザー:", longNameUsers);
// 例: "Hanako" など
深掘りポイント：
filterは「条件に合うものだけを残す」というイメージです。- 元の配列はそのままで、新しい配列が返ってくるので、安全に何度でも試せます。
find：条件に合う「1件だけ」を探す
find は、条件に合う最初の1件だけを返すメソッドです。 見つからない場合は undefined になります。
例1：idが2のユーザーを探す
const user2 = users.find((user) => {
return user.id === 2;
});
console.log("IDが2のユーザー:", user2);
// { id: 2, name: "Hanako", age: 25 } か、見つからなければ undefined
例2：20歳未満のユーザーを1人探す
const under20 = users.find((user) => {
return user.age < 20;
});
console.log("20歳未満のユーザー:", under20);
// { id: 3, name: "Jiro", age: 18 } など
深掘りポイント：
filterは「複数件の可能性がある絞り込み」、findは「1件だけ欲しい検索」というイメージで使い分けます。findの結果はundefinedになる可能性があるので、実務では存在チェックをすることが多いです。
some：条件を「1人でも満たしているか」を調べる
some は、配列の中に条件を満たす要素が1つでもあるかどうかを調べるメソッドです。 結果は true または false になります。
例1：20歳未満のユーザーがいるかどうか
const hasUnder20 = users.some((user) => {
return user.age < 20;
});
console.log("20歳未満のユーザーはいる？:", hasUnder20);
// true または false
例2：名前が「Taro」のユーザーがいるかどうか
const hasTaro = users.some((user) => {
return user.name === "Taro";
});
console.log("Taro はいる？:", hasTaro);
// true になるはず
深掘りポイント：
someは「少なくとも1つ条件を満たすものがあるか」をチェックするためのメソッドです。- 「この条件を満たすユーザーが存在するかどうか」を知りたいときに便利です。
every：条件を「全員が満たしているか」を調べる
every は、配列のすべての要素が条件を満たしているかどうかを調べるメソッドです。 こちらも結果は true または false になります。
例1：全員が18歳以上かどうか
const allAdults = users.every((user) => {
return user.age >= 18;
});
console.log("全員18歳以上？:", allAdults);
// true または false
例2：全員名前が3文字以上かどうか
const allLongNames = users.every((user) => {
return user.name.length >= 3;
});
console.log("全員名前が3文字以上？:", allLongNames);
// true または false
深掘りポイント：
someが「誰か1人でも条件を満たしているか」、everyは「全員が条件を満たしているか」という対になったイメージです。- 配列全体の状態をざっくりチェックしたいときにとても役立ちます。
Day 9 練習まとめテンプレート
最後に、今日の内容をひとつのファイルにまとめた練習用テンプレートを載せておきます。 このままコピーして、条件を変えたり、ユーザーを増やしたりしながら遊んでみてください。
// day9-practice.ts
// Day 9：Objectの配列 練習
type User = {
id: number;
name: string;
age: number;
};
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 }
];
console.log("=== 元のユーザー一覧 ===");
console.log(users);
// map：名前一覧を作る
const names = users.map((user) => {
return user.name;
});
console.log("\n=== 名前一覧（map） ===");
console.log(names);
// filter：20歳以上のユーザーだけ
const adults = users.filter((user) => {
return user.age >= 20;
});
console.log("\n=== 20歳以上のユーザー（filter） ===");
console.log(adults);
// find：IDが2のユーザー
const user2 = users.find((user) => {
return user.id === 2;
});
console.log("\n=== IDが2のユーザー（find） ===");
console.log(user2);
// some：20歳未満のユーザーがいるか
const hasUnder20 = users.some((user) => {
return user.age < 20;
});
console.log("\n=== 20歳未満のユーザーはいる？（some） ===");
console.log(hasUnder20);
// every：全員18歳以上か
const allAdults = users.every((user) => {
return user.age >= 18;
});
console.log("\n=== 全員18歳以上？（every） ===");
console.log(allAdults);
Day 9のまとめ
Day 9では、
- Object＋配列という「一覧データ」の定番パターン
mapで「変換」filterで「絞り込み」findで「1件検索」someで「誰か1人でも条件を満たすか」everyで「全員が条件を満たすか」
という、実務でも頻出のメソッドをひと通り体験しました。
今日のユーザー一覧のコードは、ぜひ条件を変えたり、プロパティを増やしたりしながら、「こうすると結果がどう変わるか」を試してみてください。 Objectの配列とこれらのメソッドが自然に使えるようになると、データを扱うプログラムがぐっと書きやすくなっていきます。
Day 9：Objectの配列で「検索・抽出・並べ替え」をマスターする
Day 9では、Object＋配列を使って、ユーザー一覧のようなデータを「検索・抽出・並べ替え」する練習をしていきます。 課題は次の5つです。
- 20歳以上を検索
- IDで検索
- 名前だけ取り出す
- 年齢順に並べる
- 特定ユーザーが存在するか確認
これらを通して、map, filter, find, some, every に加えて、並べ替えに使う sort の感覚もつかんでいきます。
基本となるユーザー配列を用意する
まずは、共通で使うユーザー一覧を定義します。
// day9-tasks.ts
// Objectの配列を使った検索・抽出・並べ替え
type User = {
id: number;
name: string;
age: number;
};
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 },
{ id: 4, name: "Yuki", age: 30 },
];
console.log("=== 元のユーザー一覧 ===");
console.log(users);
ここから、この users 配列に対して、課題をひとつずつ解いていきます。
課題1：20歳以上を検索（filter）
考え方
「20歳以上のユーザーだけを取り出したい」というのは、 条件に合うものだけを残す＝filter の出番です。
実装例
// 20歳以上のユーザーだけを抽出する
const adults = users.filter((user) => {
// user.age が 20 以上なら残す
return user.age >= 20;
});
console.log("\n=== 20歳以上のユーザー（filter） ===");
console.log(adults);
深掘りポイント：
filterは「条件に合う要素だけを残して、新しい配列を作る」メソッドです。- 元の
users配列はそのまま残り、adultsに「20歳以上だけ」が入ります。 - 「検索」というよりも、「絞り込み」としてイメージするとしっくりきます。
課題2：IDで検索（find）
考え方
「IDが2のユーザーを1人だけ見つけたい」というときは、 条件に合う最初の1件だけを返す＝find を使います。
実装例
// IDが2のユーザーを検索する
const userById = users.find((user) => {
// user.id が 2 のものを探す
return user.id === 2;
});
console.log("\n=== IDが2のユーザー（find） ===");
console.log(userById);
深掘りポイント：
findは「条件に合う最初の1件だけ」を返します。- 見つからない場合は
undefinedになるので、実務では存在チェックをすることが多いです。 - 「1件だけ欲しい検索」は
find、「複数件の可能性がある絞り込み」はfilterと覚えておくと使い分けやすいです。
課題3：名前だけ取り出す（map）
考え方
「ユーザー一覧から名前だけの配列を作りたい」というのは、 各要素を変換して新しい配列を作る＝map の出番です。
実装例
// 名前だけの配列を作る
const names = users.map((user) => {
// 各ユーザーから name だけ取り出して返す
return user.name;
});
console.log("\n=== 名前一覧（map） ===");
console.log(names);
// 例: ["Taro", "Hanako", "Jiro", "Yuki"]
深掘りポイント：
mapは「元の配列を壊さずに、新しい配列を作る」メソッドです。- 「一覧から特定の項目だけ取り出したい」ときにとても便利です。
filterが「数を減らす」のに対して、mapは「形を変える」というイメージです。
課題4：年齢順に並べる（sort）
考え方
「年齢の若い順・高い順に並べたい」というときは、 配列の並べ替えメソッド sort を使います。
sort は、比較関数を渡すことで「どう並べるか」を指定できます。
実装例：年齢の昇順（若い順）
// 年齢の昇順（若い順）に並べ替える
const sortedByAgeAsc = [...users].sort((a, b) => {
// a.age が b.age より小さいときは、a を前にしたいので負の値を返す
return a.age - b.age;
});
console.log("\n=== 年齢の昇順（若い順）（sort） ===");
console.log(sortedByAgeAsc);
実装例：年齢の降順（年上順）
// 年齢の降順（年上順）に並べ替える
const sortedByAgeDesc = [...users].sort((a, b) => {
// b.age - a.age にすると、年齢が高い方が前に来る
return b.age - a.age;
});
console.log("\n=== 年齢の降順（年上順）（sort） ===");
console.log(sortedByAgeDesc);
深掘りポイント：
sortは元の配列を直接並べ替えるメソッドなので、[...users]のようにスプレッド構文でコピーを作ってから使うと安全です。- 比較関数
((a, b) => a.age - b.age)は、「aがbより小さいなら負の値」「大きいなら正の値」「同じなら0」というルールに従って並べ替えます。 - 「昇順＝小さい順」「降順＝大きい順」という感覚を持っておくと、数値の並べ替えがスムーズになります。
課題5：特定ユーザーが存在するか確認（some / every）
考え方
「名前が ‘Taro’ のユーザーが存在するか？」 「全員が18歳以上か？」 といった「存在チェック」には、some と every が便利です。
some：誰か1人でも条件を満たしているかevery：全員が条件を満たしているか
実装例：特定ユーザーが存在するか（some）
// 名前が "Taro" のユーザーが存在するか確認
const hasTaro = users.some((user) => {
return user.name === "Taro";
});
console.log("\n=== Taro は存在する？（some） ===");
console.log(hasTaro); // true になるはず
実装例：全員が18歳以上か（every）
// 全員が18歳以上か確認
const allAdults = users.every((user) => {
return user.age >= 18;
});
console.log("\n=== 全員18歳以上？（every） ===");
console.log(allAdults); // true または false
深掘りポイント：
someは「少なくとも1人条件を満たしているか」をチェックするメソッドです。everyは「全員が条件を満たしているか」をチェックするメソッドです。- 配列全体の状態をざっくり確認したいときに、とても役立ちます。
Day 9 練習用テンプレート
最後に、今日の課題をひとつのファイルにまとめたテンプレートを載せておきます。 このままコピーして、条件や値を変えながら試してみてください。
// day9-tasks-template.ts
// Day 9：Objectの配列 課題まとめ
type User = {
id: number;
name: string;
age: number;
};
const users: User[] = [
{ id: 1, name: "Taro", age: 20 },
{ id: 2, name: "Hanako", age: 25 },
{ id: 3, name: "Jiro", age: 18 },
{ id: 4, name: "Yuki", age: 30 },
];
console.log("=== 元のユーザー一覧 ===");
console.log(users);
// 1. 20歳以上を検索（filter）
const adults = users.filter((user) => {
return user.age >= 20;
});
console.log("\n=== 20歳以上のユーザー（filter） ===");
console.log(adults);
// 2. IDで検索（find）
const userById = users.find((user) => {
return user.id === 2;
});
console.log("\n=== IDが2のユーザー（find） ===");
console.log(userById);
// 3. 名前だけ取り出す（map）
const names = users.map((user) => {
return user.name;
});
console.log("\n=== 名前一覧（map） ===");
console.log(names);
// 4. 年齢順に並べる（sort）
const sortedByAgeAsc = [...users].sort((a, b) => {
return a.age - b.age; // 昇順（若い順）
});
console.log("\n=== 年齢の昇順（sort） ===");
console.log(sortedByAgeAsc);
const sortedByAgeDesc = [...users].sort((a, b) => {
return b.age - a.age; // 降順（年上順）
});
console.log("\n=== 年齢の降順（sort） ===");
console.log(sortedByAgeDesc);
// 5. 特定ユーザーが存在するか確認（some / every）
const hasTaro = users.some((user) => {
return user.name === "Taro";
});
console.log("\n=== Taro は存在する？（some） ===");
console.log(hasTaro);
const allAdults = users.every((user) => {
return user.age >= 18;
});
console.log("\n=== 全員18歳以上？（every） ===");
console.log(allAdults);
Day 9のまとめ
Day 9では、
- Object＋配列という「一覧データ」の基本形
filterで「条件に合うものだけ絞り込む」findで「IDなどで1件だけ検索する」mapで「名前だけの配列などに変換する」sortで「年齢順に並べ替える」some/everyで「存在チェック・全員チェックをする」
という、実務でも頻出の操作をひと通り体験しました。
今日のコードは、ぜひ条件を変えたり、ユーザーを増やしたりしながら、「こうすると結果がどう変わるか」を遊ぶように試してみてください。 Objectの配列とこれらのメソッドが自然に使えるようになると、データを扱うプログラムがぐっと書きやすく、そして楽しくなっていきます。