🦋

【入門 TypeScript】オブジェクト

に公開
JavaScript
TypeScript
tech

はじめに

この記事では主に、技術評論社の「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)」を中心に学んだことを備忘録目的でまとめていきます。参考書籍と必ずしもセクションが同じとは限りませんので、あらかじめご承知おきください。基本的に知識まとめの文章表現は常体（だ・である調）で表現しています。

【リンク紹介】
・ 入門 TypeScriptまとめ記事一覧
・ これまで書いたシリーズ記事一覧

参考書籍について

より詳しく内容を知りたい方は「プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)」をお手に取ってみてください。記事ではほとんど省略していますが、非常に細かく説明されているので、文法書のバイブルとして購入するのをお勧めします。

この記事の実行環境について

テキストのサンプルだと実際に動かして確認することができないため、この記事では実行できるようにJavaScript実行環境の「node.js」を使って、シンプルなプロジェクトを作成することにしました。
※PCにnode.jsがインストールされていることが前提です。

シンプルなプロジェクトを作成
# 作業したいディレクトリを作成
mkdir directory-name
# 作成したディレクトリ内に移動
cd directory-name
# プロジェクトの初期化（package.jsonの作成）
npm init

実行後にpackage name:をはじめいくつか質問されますが、今回は実行環境が欲しいだけなので、最初のこのpackage nameだけを入力すれば良いです。するとディレクトリ内に次のようなpackage.jsonが作成されます。

packege.json
{
  "name": "最初に入力したプロジェクト名",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

あとは任意のTypeScriptファイルを作成して、VSCode内でnode [ファイル名]で実行すれば、出力結果を確認することができます。

1. オブジェクトとは

TypeScriptのオブジェクトは連想配列だが、他のプログラミング言語では辞書やハッシュといった名前で呼ばれる。つまりオブジェクトは オブジェクトリテラル{} で要素を囲い、要素はキー(key)と値(value)のペアで定義する。

参考資料：サバイバルTypeScript(オブジェクトのプロパティ)

この記事では参考書に倣ってキーをプロパティ名、値を式と書くこととする。

2. プロパティアクセス

オブジェクトのプロパティの値（式の部分）を得ることをプロパティアクセスという。

2.1. 値の取得

プロパティアクセルは、 式・プロパティ名 の構文を用いる。なお、プロパティ名には変数名と同様に識別子を使うことができる。

// オブジェクトを定義
// string型、number型、オブジェクト型など様々な型を混在させることができる
const object = {
  obj1: "value1",    // string型のプロパティ
  obj2: 123,         // number型のプロパティ
  obj3: {
    key1: "value2",
    key2: 345,
  };
};

// プロパティアクセスにてプロパティの値を取得
console.log(object.obj1); // value1
console.log(object.obj2); // 123
console.log(object.obj3); // { key1: "value2", key2: 345 }

オブジェクトは式の一種であるので、値に変数や条件演算子を用いた式を入れることができる。

const input = "youken";
const work = "engineer";

// inputに入力されていればその名前を、入力されていなければ「名無し」を設定
const profile = {
  name: input ? input : "名無し",
  age: 20,
  work, // プロパティ名と変数名が同じ場合、プロパティ名を省略可能
};

// 名前を表示
console.log(profile.name); // youken
// 年齢を表示
console.log(profile.age);  // 20
// 職業を表示
console.log(profile.work); // engineer

2.1.1. プロパティ名が文字列の場合

識別子意外にプロパティ名として文字列を使うこともでき、[]を用いて値を取得することができる。

// オブジェクトを定義
const object = {
  "obj1": "value1",    // string型のプロパティ
  "obj2": 123,         // number型のプロパティ
};

// プロパティアクセスにてプロパティの値を取得
console.log(object["obj1"]); // value1
console.log(object["obj2"]); // 123

2.1.2. プロパティ名が数字の場合

数字をプロパティ名として使うことができるが文字列として認識される。そのため[]を用いて値を取得する場合は文字列として記述する。

// オブジェクトを定義
const object = {
  1: "value1",    // string型のプロパティ
  2: 123,         // number型のプロパティ
};

// プロパティアクセスにてプロパティの値を取得
console.log(object["1"]); // value1
console.log(object["2"]); // 123

2.1.3. プロパティ名が動的に定義されている場合

// 動的な変数として文字列を定義
const dynamicVriable1 = "obj1";
// 動的な変数として乱数を定義
const dynamicVriable2 = `"${Math.random()}"`;

// オブジェクトを定義
const object = {
  [dynamicVriable1]: "value1",  // string型のプロパティ
  [dynamicVriable2]: 123,       // number型のプロパティ
};

// プロパティアクセスにてプロパティの値を取得
console.log(object.dynamicVriable1); // value1
console.log(object.dynamicVriable2); // 123

この構文によりプロパティを式で決めることができ、どのプロパティにアクセスするかをプログラムで決めることができる。

// オブジェクトを定義
const object = {
  obj1: "value1",    // string型のプロパティ
  obj2: 123,         // number型のプロパティ
};

// プロパティアクセスにてプロパティの値を取得
// []の中は原則文字列
console.log(object["obj1"]); // value1
console.log(object["obj2"]); // 123

// []の中に条件式を入れることも可能
const flag = true;
// flagがtrueならvalue1、falseなら123
console.log(object[flag ? "obj1" : "obj2"]);

2.2. 値の代入

// オブジェクトを定義
const object = {
  obj1: "value1",    // string型のプロパティ
  obj2: 123,         // number型のプロパティ
};

// 値の代入
object.obj1 = "newValue";
object.obj2 = 456;

// プロパティアクセスにてプロパティの値を取得
console.log(object.obj1); // newValue
console.log(object.obj2); // 456

=だけでなく代入演算子も使用することができる。

// オブジェクトを定義
const object = {
  obj1: "value1",    // string型のプロパティ
  obj2: 123,         // number型のプロパティ
};

// 値の代入
object.obj1 += "newValue";
object.obj2 += 456;

// プロパティアクセスにてプロパティの値を取得
console.log(object.obj1); // valuenewValue
console.log(object.obj2); // 579

3. スプレッド構文

スプレッド構文は...式であり、オブジェクトの作成時にプロパティを別のオブジェクトからコピーする。既存のオブジェクトを拡張した新たなオブジェクトを作成することができる。

// オブジェクトを定義
const object = {
  obj1: 123,
  obj2: 456,
};

// スプレッド構文でオブジェクトを拡張
const extendedObject = {
  ...object,
  obj3: 789,
};

console.log(extendedObject);  // { obj1: 123, obj2: 456, obj3: 789 }

参考資料

Discussion