【TypeScript初心者】データ型② - オブジェクトの概要を理解する

はじめに

「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、オブジェクトについてです！

---

コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません

---

JavaScriptのデータ型

データ型：プログラムが扱うデータの種類や取り扱い方を決めるもの
データ型を適切に選ぶことで、プログラムが効率よく動作し、エラーを減らすことができる

JavaScriptのデータ型は、プリミティブ型とオブジェクトの大きく2つに分類される

• プリミティブ型：データ型の中で最も基本的なもので、最初から用意されている型
  • 言語ごとにプリミティブ型がある
• オブジェクト：プリミティブ型以外のもの、プロパティの集合
  • プロパティ：名前（key）と値（value）のペア
    • 例: name: "りんご"（key: value）

今回はオブジェクトについて学びます！

プリミティブ型については、こちら↓

オブジェクトとは

• プリミティブ型以外のものすべて
• クラスから作ったインスタンスや、クラスそのもの、配列、正規表現など

オブジェクトの例

クラス・インスタンス

• クラス
  • オブジェクトを作成するためのテンプレート
• インスタンス
  • テンプレート（クラス）を使ったオブジェクトの一種

// クラスの定義 (テンプレート)
class User {
  constructor(public name: string) {}
  greet() {
    return `こんにちは、${this.name}さん！`;
  }
}

// インスタンスの生成 (オブジェクト)
const userA: User = new User("太郎");

console.log(userA.greet()); // 出力: こんにちは、太郎さん！

配列

• データのまとまり
• 一つのオブジェクト内に複数の値をリストとして持っているもの

// 文字列型の要素を持つ配列 (オブジェクト)
const fruits: string[] = ["りんご", "バナナ", "みかん"];

// 配列の要素へのアクセス
console.log(fruits[0]); // 出力: りんご

// 要素の数（プロパティの一種）
console.log(fruits.length); // 出力: 3

詳細は、以下を読む時に学びます

正規表現

• パターンに適合した特定の文字列を処理できるようにするための仕組み
• 文字列の検索・抽出・置換・検証などの際に使われる
• /の中にパターンを書く
• 例：簡単なメールアドレス形式（文字列@文字列.文字列）を検証するパターン↓

// 正規表現リテラルでオブジェクトを作成
const emailPattern: RegExp = /^[a-zA-Z0-9]+ @ [a-zA-Z0-9] + \.[a-zA-Z]+$/;

// Stringのtestメソッドで利用（マッチするかどうかを boolean で返す）
const validEmail = "[e-mail]";
const invalidEmail = "user-at-example.com";

const isMatch1 = emailPattern.test(validEmail);
const isMatch2 = emailPattern.test(invalidEmail);

console.log(`'${validEmail}'はマッチするか: ${isMatch1}`); 
// 出力: '[e-mail]'はマッチするか: true

console.log(`'${invalidEmail}'はマッチするか: ${isMatch2}`); 
// 出力: 'user-at-example.com'はマッチするか: false

---

/^[a-zA-Z0-9]+ @ [a-zA-Z0-9] + \.[a-zA-Z]+$/ の解説

• ^ : 入力の先頭 (文字列の開始)
• [a-zA-Z0-9]+ :
  • 1文字以上の英字（大文字・小文字）または数字
  • メールアドレスのユーザー名部分
• @ : そのままの文字のアットマーク
• [a-zA-Z0-9]+ :
  • 1文字以上の英字（大文字・小文字）または数字
  • メールアドレスのドメイン名
• \. : そのままの文字のピリオド
  • 正規表現ではピリオドは特殊な意味を持つため、\ をつけてエスケープしている
• [a-zA-Z]+ :
  • 1文字以上の英字（大文字・小文字）
  • メールアドレスのトップレベルドメイン
    • 例: com, net, jp
• $ : 入力の末尾 (文字列の終了)

---

JavaScriptの正規表現でよく使われる記号

記号	マッチする箇所・条件	マッチする例
^(カレット)	入力の先頭	/^a/ -> abc
$	入力の末尾	/a$/ -> bca
*	直前の0回以上の繰り返しにマッチする	/ab*/ -> a,abbbb...
[ ]	角カッコ（ブラケット）の中の任意の1文字、-で範囲指定できる	/[a-z]/ -> a~zまでの全て
+	直前の文字の一回以上の繰り返し	/ab+/ -> ab,abbb...
?	直前の文字の0回 or 1回の出現	/abc?/ -> ab,abc
{n}	直前の文字n個の繰り返し	/a{3}/ -> aaa
{n,}	直前の文字n個以上の繰り返し	/a{3,}/ -> aaa,aaaa
{m,n}	直前の文字をm~n回	/a{3,5}/-> aaa,aaaa,aaaaa
.	改行文字（\n）以外の任意の一文字	/.a/ -> cat,car

JavaScript, TypeScript は簡単にオブジェクトを生成する方法がある

• オブジェクトリテラル{}という記法を使える

リテラル：文字列や数字などの値のこと
オブジェクトリテラル：オブジェクトの値の扱い方

• オブジェクトリテラルの構成
  • 全体を{}で囲う
  • その中にプロパティ（キーと値のペア）を書く

---

どれくらい簡単になるのか、JavaとTypeScriptのオブジェクト生成の比較してみます

// Javaでオブジェクト（インスタンス）を生成する例
// 1. まずクラスを定義する
class Person {
    String name;
    int age;

    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

// 2. そのクラスを使ってインスタンスを生成する
Person personObj = new Person("山田太郎", 20);

System.out.println("名前: " + personObj.name + ", 年齢: " + personObj.age);

Java では、このようにクラス定義とインスタンス生成の二段階が必要になるのに対して、
以下が TypeScript の例です。

// TypeScriptでオブジェクトを生成する例 
let obj = {
  name: '山田太郎',
  age: 20
};

console.log(`名前: ${obj.name}, 年齢: ${obj.age}`);
// 出力: 名前: 山田太郎, 年齢: 20

TypeScriptでは、クラスを定義せず、オブジェクトを簡単に生成できる

さいごに

今回は、TypeScriptにおけるオブジェクトの基本と特徴について学びました。

次回は、JavaScript,TypeScriptのオブジェクトの特徴的な機能ついて学びます！

アドカレ2025が開催中！

今年もアドカレ開催中です
面白そうなカレンダーがたくさんです！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考