オブジェクトは、JavaScript 開発者として扱うものであり、言うまでもなく、これは TypeScript にも当てはまります。 TypeScript では、オブジェクト プロパティの型定義を定義する複数の方法が提供されます。この記事では、簡単な例から始めて高度な型定義に進みながら、それらのいくつかを見ていきます。

JavaScript のネストされたオブジェクトは、他のオブジェクトまたは配列をプロパティとして含むオブジェクトです。これにより、現実世界のエンティティをより効果的に表現できる複雑なデータ構造の作成が可能になります。
JavaScript では、オブジェクトを他のオブジェクト内にネストできます。これは、オブジェクトのネストまたはオブジェクトの合成とも呼ばれます。オブジェクトのネストを使用すると、オブジェクト内でオブジェクトを編成することで、複雑なデータ構造を作成できます。

ネストされたオブジェクトの作成

ユーザー プロファイルを表すネストされたオブジェクトの簡単な例を次に示します:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

例えば：
userProfile オブジェクトには、ユーザー名、年齢、連絡先などのプロパティがあります。
contact プロパティ自体は、電子メールと電話を含むオブジェクトです。
Phone プロパティは、自宅番号と携帯電話番号を含む別のネストされたオブジェクトです。

ネストされたオブジェクトのプロパティへのアクセス

ネストされたオブジェクト内のプロパティにアクセスするには、ドット表記または括弧表記を使用できます。ユーザーの携帯電話番号にアクセスする方法は次のとおりです:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

ネストされたプロパティを変更することもできます。たとえば、テーマの設定を変更したい場合:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

ネストされたオブジェクトでの型の使用

TypeScript を使用する場合、ネストされたオブジェクトの型を定義して型の安全性を確保できます。 userProfile オブジェクトのタイプを定義する方法は次のとおりです:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

この TypeScript の例では、UserProfile 型で userProfile オブジェクトの構造を定義し、すべてのプロパティが正しく型指定されるようにします。

これは、JavaScript のネストされたオブジェクトの別の例です。

図書館システムを表す、より複雑な例を見てみましょう。各書籍には、著者、出版社、ジャンルなどのさまざまな詳細が含まれています。
ネストされたオブジェクトは、type キーワード自体を使用して定義できます。 TypeScript は、ネストされたオブジェクトの型定義を型定義に抽象化することもできます。インデックス署名は、オブジェクトが持つプロパティの数は不明だが、オブジェクトのプロパティの種類は確かである場合に使用できます

図書館システムのネストされたオブジェクトの定義

このシナリオでネストされたオブジェクトを構造化する方法は次のとおりです:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

ネストされたオブジェクト構造を詳しく見てみましょう

• Library オブジェクト: ライブラリ全体を表し、名前、場所、書籍などのプロパティが含まれます。
• Location オブジェクト: 住所と座標のネストされたオブジェクトが含まれます。
• 住所には、番地、都市、州、郵便番号が含まれます。 座標には緯度と経度が格納されます。
• Books 配列: 複数の書籍オブジェクトを保持する配列。それぞれに以下が含まれます:
• タイトル: 本のタイトル。
• Author オブジェクト: 著者の firstName と lastName を含むネストされたオブジェクト。

-出版年: 本が出版された年。
- ジャンル: 本が属するジャンルの配列。
-利用可能部数: 利用可能な部数を示す数値。

データへのアクセスと操作

このネストされたオブジェクトにはさまざまな方法でアクセスして操作できます。最初の本の著者を取得する方法は次のとおりです:

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

新しい本をライブラリに追加するには:

library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

オブジェクト内でのメソッドの使用

オブジェクト内で定義されたメソッドを利用することもできます。たとえば、本の総数を取得するには:

console.log(library.totalBooks()); // Output: 3

この例では、ネストされたオブジェクトを使用して、図書館システムなどの複雑なデータを表すより包括的な構造を作成する方法を示します。関連情報をまとめて整理することで、有意義な方法でデータを簡単に管理し、操作できるようになります。

別のネストされた例

コードの構成と保守性を向上させるために、ネストされたオブジェクトを別のタイプに抽象化できます。このアプローチにより、Caterer タイプを個別に定義し、Train タイプ内で使用することができます。 TypeScript でこれを行う方法は次のとおりです:

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

列車タイプの定義
次に、Caterer プロパティに Caterer タイプを使用する Train タイプを定義します。

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

電車オブジェクトの例

これで、ケータリング業者の詳細を含む列車タイプのインスタンスを作成できます。

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};

このアプローチの利点は次のとおりです。

• 再利用性: Caterer タイプは、さまざまな交通手段 (飛行機、バスなど) など、コードの他の部分で再利用できます。
• 明確さ: Caterer タイプを分離することで、Train タイプがより明確になり、理解しやすくなります。
• 保守性: Caterer の構造が変更された場合、1 か所で更新するだけで済みます。

ネストされたオブジェクトを個別の型に抽象化することで、TypeScript コードの構成と明瞭さを強化できます。このアプローチにより、再利用性と保守性が向上し、複雑なデータ構造の管理が容易になります。

要約しましょう

ネストされたオブジェクトは、複雑なデータ構造の編成を可能にする JavaScript の強力な機能です。

ネストされたオブジェクトを使用すると、より意味のあるデータ表現を作成でき、コードの理解と保守が容易になります。さらに、TypeScript を使用すると、これらの複雑なオブジェクトを扱うときに構造と型の安全性を確保するのに役立ちます。