見出し画像

#027　TypeScript（11）：TypeScriptの配列オブジェクト

KINO↓

配列オブジェクトを使用する利点

  1. データの整理: 関連するデータをグループ化できます。

  2. 一括処理: 同じ型のデータをまとめて操作できます。

  3. 型安全性: 配列の要素に対して型チェックが行われます。

初心者向けの考え方

  • 「整理された本棚」: 同じ種類の本（データ）を順番に並べて管理します。

  • 「レシピの手順リスト」: 同じ形式で書かれた手順（オブジェクト）を順番に並べています。

配列の基本

  • 説明: 配列は同じ型の要素を複数持つことができるデータ構造です。

  • 型の表現: 要素の型[] と表現します。

// 配列の基本
// scores は数値の配列です。
const scores: number[] = [80, 90, 100];
// names は文字列の配列です。
const names: string[] = ["太郎", "次郎", "花子"];

console.log("Scores:", scores); // 配列 scores をコンソールに出力します。
console.log("Names:", names); // 配列 names をコンソールに出力し

オブジェクトの配列

  • 説明: 複雑なデータ構造（オブジェクト）の配列も作成できます。まず、オブジェクトの型（インターフェースや型エイリアス）を定義し、それを配列の型として使用します。

// オブジェクトの配列
// Book インターフェースを定義します。
// これは、本のタイトル、著者、ページ数を含むオブジェクトの型です。
interface Book {
    title: string;
    author: string;
    pages: number;
}

// library は Book 型のオブジェクトの配列です。
const library: Book[] = [
    { title: "TypeScript入門", author: "山田太郎", pages: 200 },
    { title: "JavaScript完全ガイド", author: "鈴木花子", pages: 300 }
];

console.log("Library:", library); // 配列 library をコンソールに出力します。

配列の操作

  • 説明: TypeScriptの配列は、JavaScriptの配列メソッドをすべて使用できます。よく使用されるメソッドを以下に示します。

  • メソッドの説明:

    • map(): 配列の各要素を変換して新しい配列を作成します。

    • filter(): 条件に合う要素だけを抽出して新しい配列を作成します。

    • forEach(): 配列の各要素に対して処理を実行します。

    • find(): 条件に合う最初の要素を見つけます。

// 配列メソッドの使用例

// map(): 配列の各要素を変換して新しい配列を作成します。
// library 配列の各本のタイトルを抽出して、新しい配列 titles を作成します。
const titles: string[] = library.map(book => book.title);
console.log("Titles (map):", titles); // 配列 titles をコンソールに出力します。

// filter(): 条件に合う要素だけを抽出して新しい配列を作成します。
// ページ数が 250 を超える本だけを抽出して、新しい配列 longBooks を作成します。
const longBooks: Book[] = library.filter(book => book.pages > 250);
console.log("Long Books (filter):", longBooks); // 配列 longBooks をコンソールに出力します。

// forEach(): 配列の各要素に対して処理を実行します。
// 各本のタイトル、著者、ページ数をコンソールに出力します。
console.log("Library (forEach):");
library.forEach(book => console.log(`Title: ${book.title}, Author: ${book.author}, Pages: ${book.pages}`));

// find(): 条件に合う最初の要素を見つけます。
// ページ数が 250 を超える最初の本を見つけます。
const firstLongBook: Book | undefined = library.find(book => book.pages > 250);
console.log("First Long Book (find):", firstLongBook); // 最初の長い本をコンソールに出力します。

map():

  • 各要素を変換して新しい配列を作成します。

  • 例: library 配列の各本のタイトルを抽出して、新しい配列 titles を作成します。

filter():

  • 条件に合う要素だけを抽出して新しい配列を作成します。

  • 例: ページ数が 250 を超える本だけを抽出して、新しい配列 longBooks を作成します。

forEach():

  • 各要素に対して処理を実行します。新しい配列は作成されません。

  • 例: 各本のタイトル、著者、ページ数をコンソールに出力します。

find():

  • 条件に合う最初の要素を見つけます。見つからない場合は undefined を返します。

  • 例: ページ数が 250 を超える最初の本を見つけます。

型推論

  • 説明: TypeScriptは多くの場合、配列の型を自動的に推論できます。

// 型推論の例
// mixedArray は文字列と数値が混在する配列です。
// TypeScript は自動的に (string | number)[] と推論します。
const mixedArray = [1, "two", 3, "four"];
console.log("Mixed Array:", mixedArray); // 配列 mixedArray をコンソールに出力します。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

いいなと思ったら応援しよう！