TypeScript - オブジェクト：入門ガイド
こんにちは、将来のプログラミングスーパースター！今日は、TypeScriptのオブジェクトの世界に興味深く飛び込みます。プログラミングの経験がなくても心配しないでください - 私があなたの親切なガイドとして、ステップバイステップで進めていきます。このチュートリアルの最後に、あなたはプロのようにオブジェクトを扱う自信を持つことでしょう！
オブジェクトとは何か？
TypeScriptの具体的な内容に踏み込む前に、プログラミングにおけるオブジェクトとは何かについて話しましょう。あなたがバックパックを持っていると想像してみてください。このバックパックには、それぞれ独自の特性を持つ様々なアイテムを収納できます。プログラミングでは、オブジェクトはそのバックパックのようなものです - 関連する情報を収納できるコンテナです。
シntax：TypeScriptでオブジェクトを作成する方法
基本から始めましょう。TypeScriptでは、\"オブジェクトリテラル記法\"を使ってオブジェクトを作成できます。これは少し難しそうな言葉ですが、実際はとてもシンプルです。以下に例を示します：
let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};この例では、myBackpackが私たちのオブジェクトです。これは3つのプロパティを持っています：color、capacity、そしてisWaterproof。それぞれのプロパティには値が割り当てられています。
タイプ注釈：TypeScriptに期待するデータの型を伝える
TypeScriptの素晴らしい機能の1つは、オブジェクトがどのようなデータ型を含むかを明確に伝えることができることです。これは\"タイプ注釈\"と呼ばれます。バックパックの例を強化してみましょう：
let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};ここでは、TypeScriptにcolorは常に文字列であるべき、capacityは常に数値であるべき、isWaterproofは常にブール値であるべきと伝えています。これにより、早期にエラーをキャッチし、コードをより信頼性の高いものにすることができます。
オブジェクトリテラル記法：詳しく見てみる
すでにオブジェクトリテラル記法を実行しましたが、さらに詳しく見てみましょう。このシntaxは以下のパターンに従います：
let objectName = {
property1: value1,
property2: value2,
// ... など
};各プロパティはコンマで区切られ、オブジェクト全体はカッコで囲まれています。これは、バックパックにアイテムを詰め込むようなもので、それぞれのアイテムに名前（プロパティ）と説明（値）があります。
TypeScriptのタイプテンプレート：再利用可能なオブジェクトタイプ
時々、同じ構造を持つ複数のオブジェクトを作成したいことがあります。ここでTypeScriptのタイプテンプレートが役立ちます。一度タイプを定義して、それを再利用できます：
type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};
let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};
let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};このBackpackのタイプは青写真のように働き、Backpackのタイプを持ついかなるオブジェクトも正しい構造を持つことを確認します。
オブジェクトを関数のパラメータとして渡す：バックパックを持ち回る
オブジェクトは関数に渡すことができ、複雑なデータ構造を扱うことができます。以下に例を示します：
function describeBackpack(backpack: Backpack): string {
return `この${backpack.color}のバックパックは${backpack.capacity}リットルの容量があり、${backpack.isWaterproof ? "防水" : "非防水"}です。`;
}
console.log(describeBackpack(myBackpack));
// 出力：この青いバックパックは20リットルの容量があり、防水です。この関数では、私たちのBackpackオブジェクトを渡し、そのプロパティを使って説明を生成します。
匿名オブジェクト：名前のないバックパック
時々、変数に割り当てずに即座にオブジェクトを作成する必要があります。これらは\"匿名オブジェクト\"と呼ばれます：
function printBackpackColor(backpack: { color: string }): void {
console.log(`バックパックは${backpack.color}です。`);
}
printBackpackColor({ color: "green" });
// 出力：バックパックは緑です。ここでは、関数呼び出しの際にオブジェクトを作成しています。これは、バックパックを持っていない状態で他人にバックパックの説明をするようなものです。
ダックタイピング：鸭子は鸭子のように見える...
TypeScriptは\"ダックタイピング\"という概念を使います。この考え方は：鸭子が鸭子のように見え、鸭子のように鳴るなら、それはおそらく鸭子です。TypeScriptの言葉では、オブジェクトの形がより重要で、明示的なタイプよりも.shape of an object matters more than its explicit type:
interface Bag {
color: string;
carry(): void;
}
let myBackpack = {
color: "purple",
capacity: 25,
carry: function() { console.log("バックパックを持つ"); }
};
function useBag(bag: Bag) {
console.log(`${bag.color}のバッグを使う`);
bag.carry();
}
useBag(myBackpack); // これが動作します！myBackpackは明示的にBagとして宣言されていませんが、Bagに必要なすべてのプロパティとメソッドを持っているため、TypeScriptはそれを許可します。
バックパックの冒険を締め括る
おめでとうございます！あなたは刚刚、最初のTypeScriptオブジェクトのバックパックを知識で満たしました。オブジェクトはプログラミングにおいて非常に強力です - 関連するデータと機能を一緒にまとめることができます。実際のバックパックが全てのハイキングギアを1か所にまとめてくれるように。
あなたがプログラミングの旅を続ける中で、オブジェクトはどこにでもあります。シンプルなTODOリストから高度なウェブアプリケーションまで、複雑なアプリケーションの構築ブロックです。練習を続け、すぐにオブジェクトの作成と操作が簡単になるでしょう！
以下は、私たちがカバーしたメソッドの簡単な参照表です：
| メソッド | 説明 |
|---|---|
| オブジェクトリテラル記法 |
{}シntaxを使ってオブジェクトを作成する |
| タイプ注釈 | オブジェクトの構造を指定する |
| タイプテンプレート | 再利用可能なオブジェクトタイプを作成する |
| オブジェクトを関数のパラメータとして渡す | オブジェクトを関数に渡す |
| 匿名オブジェクト | 変数に割り当てずにオブジェクトを作成する |
| ダックタイピング | オブジェクトの形に基づくタイプチェック |
ハッピーコーディング、そしてあなたのTypeScriptオブジェクトがバグフリーで、興味深いプロパティで一杯であることを祈っています！
Credits: Image by storyset