TypeScriptの等価演算子を徹底的に理解する10のステップ – JPSM

TypeScriptの等価演算子を徹底的に理解する10のステップ

TypeScriptの等価演算子の詳しい解説と実践サンプルコードTypeScript
この記事は約29分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

TypeScriptを使用する際、等価演算子は非常に一般的であり、日常のコーディングで頻繁に出会うものです。

この記事では、TypeScriptの等価演算子についての基本的な知識から応用的な使い方まで、サンプルコードを交えて10のステップで詳しく解説します。

初心者から経験者まで、等価演算子の使い方や注意点、カスタマイズ方法などを学べる内容となっています。

等価演算子は、2つの値や変数が等しいかどうかを判断するためのものであり、TypeScriptでは特に型の厳格な比較が求められる場面も多くあります。

適切に等価演算子を使用することで、プログラムの品質や読みやすさを向上させることが可能です。

では、等価演算子の魅力的な世界に一緒に足を踏み入れてみましょう。

●TypeScriptの等価演算子とは

TypeScriptでプログラミングを行う際、値が等しいかどうかを判断する場面は非常に多いです。

そんな時に使われるのが等価演算子です。

等価演算子は、文字列、数値、オブジェクトなど、さまざまなデータ型の値が等しいかどうかを調べるための道具として使用されます。

JavaScriptにおける等価演算子と同じく、TypeScriptにも「==」と「===」という二つの主要な等価演算子が存在します。

ただし、TypeScriptは静的型付けが特徴であるため、型の違いによって動作が異なる場合もあります。

そのため、TypeScriptにおける等価演算子の使い方を理解し、適切に使用することが重要です。

○等価演算子の基本

等価演算子は、左辺と右辺の値が等しいかどうかを判断します。

主に二つの演算子、抽象的な等価演算子「==」と厳格な等価演算子「===」があります。

「==」は、左辺と右辺の値を比較する際に、型変換を伴うことがあります。

例えば、文字列の’1’と数値の1を比較する場合、型変換を行って真を返すことがあります。

一方、「===」は型変換を行わずに値を比較します。

そのため、’1’と1を比較すると偽を返します。

このコードでは等価演算子を使って数値と文字列を比較するコードを表しています。

この例では数値の1と文字列の’1’をそれぞれ「==」と「===」で比較しています。

let num = 1;
let str = '1';

console.log(num == str);   // true
console.log(num === str);  // false

このコードを実行すると、最初の比較では真が返され、次の比較では偽が返されることが確認できます。

このように、TypeScriptにおける等価演算子は、使用する演算子によって動作が異なるため、注意が必要です。

また、TypeScriptでは型の違いが原因で予期しない結果を返す場合があります。

そのため、型を明確にして比較を行うこと、または厳格な等価演算子「===」を使用して型変換を伴わない比較を行うことが推奨されます。

●等価演算子の使い方

TypeScriptでの等価演算子は、多くのプログラミング言語と同様に2つの値が等しいかどうかを比較するためのツールです。

等価演算子は主に==（抽象比較）と===（厳格比較）の2種類があります。

どちらも似たような機能を持ちつつ、異なる動作の背後には重要な違いがあります。

○サンプルコード1：基本的な等価演算子の使用

このコードでは、TypeScriptにおける2つの基本的な等価演算子、==と===を使って数値と文字列を比較するコードを表しています。

この例では、数値と文字列を等価演算子を用いて比較し、その結果を表示しています。

// 抽象比較
let num1: any = 10;
let str1: any = "10";

console.log(num1 == str1); // true
console.log(num1 === str1); // false

// 厳格比較
let num2: number = 10;
let str2: string = "10";

console.log(num2 == str2); // false
console.log(num2 === str2); // false

上記のコードを見て分かる通り、==は値だけを比較します。

つまり、型が異なる場合でも、その内部的な値が同じであればtrueを返します。

一方で、===は値だけでなく型も比較するため、型が異なる場合はfalseを返します。

このサンプルコードの結果は、次の通りです。

最初のconsole.logはtrueを表示します。

なぜなら、num1とstr1の値は10で同じですが、型が異なるため==のみがtrueを返すからです。

次に、num1 === str1はfalseを返します。

なぜなら、値は同じですが型が異なるためです。

同様の理由で、num2とstr2を比較した結果もfalseを返します。

等価演算子を使用する際は、これらの違いをしっかりと理解しておくことが重要です。

特に、TypeScriptでは型の情報が明示的にあるため、予期しない結果を避けるためにも===を使うことを推奨します。

○サンプルコード2：変数同士の比較

TypeScriptにおける等価演算子は、変数や値の比較を行う上で重要な役割を持っています。

変数同士の比較は、プログラミングの基本中の基本ですが、その背後にある仕組みや挙動を理解することで、より効率的かつ正確にコーディングができるようになります。

ここでは、TypeScriptでの変数同士の比較の仕方とその挙動について、具体的なサンプルコードを交えて詳しく解説します。

let a: number = 10;
let b: number = 10;
let c: number = 20;

// 等価演算子を用いた比較
console.log(a == b);  // true
console.log(a === b); // true
console.log(a == c);  // false
console.log(a === c); // false

このコードでは、変数aと変数bを使って等価演算子を用いた比較を行っています。

この例では、変数aと変数bの値が10と同じであるため、aとbが等しいかどうかを確認するための演算子として==および===を利用しています。

結果として、a == bおよびa === bはどちらもtrueを返します。

一方、a == cおよびa === cはfalseとなります。

次に、変数の型が異なる場合の比較を考えてみましょう。

let x: number = 10;
let y: string = "10";

console.log(x == y);  // true
console.log(x === y); // false

このコードでは、変数xと変数yを比較していますが、変数xはnumber型、変数yはstring型となっています。

==演算子は型変換を行い、値だけを比較するため、この場合はtrueを返します。

一方で、===演算子は型変換を行わず、型も含めて比較するため、falseを返します。

このような変数同士の比較の際には、使用する等価演算子によって結果が変わることがあるので注意が必要です。

特に、変数の型が異なる場合や、意図しない型変換を避けたい場合には、===を使用することを推奨します。

○サンプルコード3：オブジェクトの比較

TypeScriptにおけるオブジェクトの比較は、初心者にとって少々トリッキーに感じるかもしれません。

オブジェクトは参照型として扱われるため、内容が同じでも異なる参照を持っている場合、===や==での比較はfalseと評価されます。

このコードでは、二つの異なるオブジェクトがどのように比較されるかを表しています。

この例では、person1とperson2という二つのオブジェクトを用意し、それらのオブジェクトが同じ内容を持つものの、異なる参照を持っていることを確認しています。

// オブジェクトの宣言
const person1 = { name: "太郎", age: 25 };
const person2 = { name: "太郎", age: 25 };

// オブジェクトの比較
const areTheyEqual = person1 === person2;

console.log(areTheyEqual);  // 結果をコンソールに表示

このコードを実行すると、areTheyEqualという変数の値はfalseとなります。

なぜなら、person1とperson2は内容が同じであっても異なるメモリ上の場所を指しているためです。

しかし、オブジェクトの内容そのものを比較したい場合はどうすれば良いのでしょうか。

JavaScriptやTypeScriptには、オブジェクトの内容を直接比較する組み込みの関数は存在しません。

そのため、独自の関数を作成する必要があります。

以下は、オブジェクトの内容を比較するシンプルな関数を表しています。

function objectsAreEqual(objA: object, objB: object): boolean {
    return JSON.stringify(objA) === JSON.stringify(objB);
}

const areContentsEqual = objectsAreEqual(person1, person2);
console.log(areContentsEqual);  // 結果をコンソールに表示

この関数objectsAreEqualでは、二つのオブジェクトをJSON文字列に変換してからその文字列同士を比較します。

この方法を使用すると、person1とperson2の内容が同じであることを確認できます。

実際に上記のコードを実行すると、areContentsEqualの値はtrueとなります。

ただし、この方法には限界があります。

例えば、オブジェクト内のプロパティの順序が異なる場合や、関数やシンボルを含むオブジェクトの比較など、いくつかのケースで正確な結果が得られない可能性があります。

●等価演算子の応用例

TypeScriptの等価演算子は基本的な比較からさらに進んで、応用的な比較を行う際にも使用されます。

特にデータ構造や関数の戻り値、カスタム型など、多岐にわたる場面での比較が要求されることが多いです。

等価演算子の応用例を深堀りしていきますので、初心者の方も安心して学んでいきましょう。

○サンプルコード4：配列内の要素の比較

このコードでは、配列内の要素を等価演算子を用いて比較する方法を表しています。

この例では、2つの配列の要素がすべて同じかどうかを比較しています。

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
const array3 = [1, 2, 4];

const isEqualArray1and2 = array1.every((value, index) => value === array2[index]);
const isEqualArray1and3 = array1.every((value, index) => value === array3[index]);

console.log(isEqualArray1and2); // true
console.log(isEqualArray1and3); // false

このコードのポイントは、Array.prototype.everyメソッドを使用しています。

このメソッドは、配列の全ての要素が指定した条件を満たすかどうかをチェックします。

ここでは、array1の各要素がarray2やarray3の対応する要素と同じかどうかをチェックしています。

実際に実行すると、array1とarray2の要素はすべて同じなのでisEqualArray1and2はtrueと評価されます。

一方、array1とarray3の最後の要素は異なるため、isEqualArray1and3はfalseと評価されます。

この方法を使用することで、配列の要素を効率的に比較することができます。

ただし、この方法は配列の長さが同じ場合にのみ適用されます。

異なる長さの配列を比較する場合、先に長さを比較する必要があります。

○サンプルコード5：関数の戻り値の比較

関数の戻り値として返される値を比較する際の注意点や方法を、TypeScriptの等価演算子を用いて紹介します。

関数の戻り値を比較することは、テストの際や処理の結果を判定する際など、多くの場面で必要になります。

ここでは、それらの戻り値をどのように比較するかを詳しく解説していきます。

まず、関数が返す戻り値がプリミティブなデータ型（例：数値や文字列）の場合、通常の等価演算子を使って比較することができます。

しかし、戻り値がオブジェクトや配列の場合、少し注意が必要です。

なぜなら、オブジェクトや配列は参照型であり、変数に代入されるのは実際のデータではなく、データへの参照となるためです。

このコードでは、2つの関数が数値を返し、それらの戻り値を等価演算子で比較しています。

この例では、2つの関数がそれぞれ異なる計算を行い、その結果を返して比較します。

function sum(a: number, b: number): number {
    return a + b;
}

function multiply(a: number, b: number): number {
    return a * b;
}

const result1 = sum(2, 3);       // 5を返す
const result2 = multiply(2, 3); // 6を返す

console.log(result1 === result2); // falseと出力される

このコードの実践例で、関数sumは加算の結果を、関数multiplyは乗算の結果を返します。

そして、それぞれの関数の戻り値が等しいかどうかをチェックしています。

この場合、5と6は等しくないため、falseと出力されます。

しかし、関数の戻り値がオブジェクトや配列の場合、直接の等価演算子での比較は参照の一致を確認するだけです。

この点を理解して、適切な比較方法を選ぶことが重要です。

例として、関数が配列を返す場合の比較方法を紹介します。

function returnArray(): number[] {
    return [1, 2, 3];
}

const array1 = returnArray();
const array2 = returnArray();

console.log(array1 === array2); // falseと出力される

このコードでは、returnArray関数が返す配列を2つの変数にそれぞれ代入しています。

しかし、これらの変数は異なる参照を持つため、等価演算子で比較するとfalseが出力されます。

実際の内容を比較する場合は、配列の要素を1つずつ比較するなどの方法が考えられます。

○サンプルコード6：型ガードを用いた比較

TypeScriptはJavaScriptをベースとしているため、動的な型付けの特徴を持っています。

しかし、TypeScriptの強力な機能の1つとして「型ガード」というものがあります。

型ガードは、ある変数が特定の型であるかをランタイム時にチェックし、その変数の型を狭めることができます。

このセクションでは、型ガードを使って異なる型のオブジェクト間での比較を行うサンプルコードを紹介しています。

この例では、異なる型のオブジェクトが与えられたときに、それぞれのオブジェクトの特定のプロパティを比較する方法を表しています。

interface Cat {
    type: 'cat';
    meow(): void;
}

interface Dog {
    type: 'dog';
    bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
    return animal.type === 'cat';
}

function compareAnimals(animalA: Cat | Dog, animalB: Cat | Dog): boolean {
    if (isCat(animalA) && isCat(animalB)) {
        return true;
    } else if (!isCat(animalA) && !isCat(animalB)) {
        return true;
    } else {
        return false;
    }
}

const myCat: Cat = {
    type: 'cat',
    meow: () => console.log('にゃーん')
};

const myDog: Dog = {
    type: 'dog',
    bark: () => console.log('わんわん')
};

console.log(compareAnimals(myCat, myDog));  // false
console.log(compareAnimals(myCat, myCat));  // true
console.log(compareAnimals(myDog, myDog));  // true

このコードの核心部分はisCat関数です。

この関数は型ガードを使用しており、引数として受け取ったanimalがCat型であるかどうかを判断します。

animal is Catという型アサーションは、この関数がtrueを返した場合、animalはCat型であると型システムに伝える役割を果たします。

また、compareAnimals関数では、2つの動物を比較して、同じ種類であればtrueを返し、異なる種類であればfalseを返します。

最後の部分では、この関数を使って2つの動物オブジェクトを比較しています。

このサンプルコードを実行すると、まずmyCatとmyDogを比較した結果、異なる種類であるためfalseが表示されます。

次に、myCatとmyCatを比較すると、同じ種類であるためtrueが表示されます。

最後に、myDogとmyDogを比較すると、同じ種類であるためtrueが表示されます。

○サンプルコード7：カスタム型の比較

TypeScriptではユーザーが独自に型を定義することができます。

これをカスタム型やエイリアスと呼びます。

しかし、カスタム型の変数を比較する際、どのように等価演算子を使用すればよいのでしょうか

。このセクションでは、カスタム型の比較方法をサンプルコードを交えて詳しく解説します。

// カスタム型を定義
type Person = {
    name: string;
    age: number;
};

const person1: Person = {
    name: "田中太郎",
    age: 25
};

const person2: Person = {
    name: "田中太郎",
    age: 25
};

const person3: Person = {
    name: "佐藤花子",
    age: 30
};

// 等価演算子を使って比較
console.log(person1 == person2);  // false
console.log(person1.name == person2.name && person1.age == person2.age);  // true
console.log(person1.name == person3.name && person1.age == person3.age);  // false

このコードではPersonというカスタム型を使って、人物の情報を保持するコードを紹介しています。

この例では、二つのPerson型のオブジェクトperson1とperson2を定義し、それらが等しいかどうかを比較しています。

しかし、オブジェクト同士の比較は、実際にはメモリ上の参照が同一であるかどうかを比較します。

そのため、person1とperson2は内容が同じでも異なる参照を持つため、直接比較するとfalseとなります。

オブジェクトのプロパティの値を直接比較することで、オブジェクトの内容が同じであるかどうかを確認することができます。

そして、person1とperson3は内容が異なるため、比較結果はfalseとなります。

カスタム型を利用する場合、直接のオブジェクト比較は参照比較となるため注意が必要です。

内容を比較する場合は、一つ一つのプロパティを比較する必要があります。

次に、カスタム型の比較における注意点として、オブジェクトが持つプロパティの数やプロパティ名が異なる場合の比較方法を見てみましょう。

type ExtendedPerson = {
    name: string;
    age: number;
    address: string;
};

const person4: ExtendedPerson = {
    name: "田中太郎",
    age: 25,
    address: "東京都"
};

// プロパティの数や名前が異なる場合の比較
console.log(person1.name == person4.name && person1.age == person4.age);  // true

ExtendedPersonはPerson型にaddressプロパティを追加したカスタム型です。

person4はこのExtendedPerson型のオブジェクトとして定義されています。

person1とperson4を比較する場合、共通のプロパティのみを比較することで、その部分において等価であるかどうかを確認することができます。

今回の例では、nameとageが共通のプロパティとなっているため、これらのプロパティを比較しています。

○サンプルコード8：クラスのインスタンス間の比較

TypeScriptにおけるクラスのインスタンス同士の比較は、JavaScriptと似ていますが、TypeScript特有の型の概念が絡んでくるため、特別な考慮が必要です。

ここでは、クラスのインスタンス間での等価演算子の動作と、その比較方法を細かく解説します。

まず、次のサンプルコードをご覧ください。

class Person {
    constructor(public name: string, public age: number) {}

    isEqual(other: Person): boolean {
        return this.name === other.name && this.age === other.age;
    }
}

const person1 = new Person("田中", 30);
const person2 = new Person("田中", 30);
const person3 = new Person("佐藤", 25);

console.log(person1.isEqual(person2)); // true
console.log(person1.isEqual(person3)); // false

このコードでは、Personというクラスを使って、名前と年齢を属性として持つ人物を表現しています。

この例では、isEqualメソッドを使用して、２つのPersonインスタンスが等しいかどうかをチェックしています。

person1とperson2は、名前も年齢も同じであるため、isEqualメソッドはtrueを返します。

一方、person1とperson3は、名前が異なるため、isEqualメソッドはfalseを返します。

注意していただきたいのは、JavaScriptやTypeScriptのオブジェクトやクラスのインスタンスを直接比較する場合、それらはメモリ上のアドレスが比較されます。

つまり、上記の例のように内容が同じであっても、異なるインスタンスは異なるアドレスを持つため、直接比較するとfalseが返されるのです。

そのため、インスタンスの内容を基に比較するためのメソッドを自分で定義する必要があるのです。

また、クラスにはプライベートなフィールドやメソッドも存在するかもしれません。

これらのプライベートな部分は、外部からはアクセスできないため、等価性の判定には注意が必要です。

例えば、次のようにプライベートフィールドを持つクラスがある場合、このプライベートフィールドの値も等価性の判定に使用することはできません。

class SecretPerson {
    private secretId: string;

    constructor(public name: string, public age: number, secretId: string) {
        this.secretId = secretId;
    }

    isEqual(other: SecretPerson): boolean {
        return this.name === other.name && this.age === other.age;
        // this.secretId は外部からアクセスできないため、比較できない
    }
}

このように、クラスのインスタンス間の比較は、どのフィールドやメソッドを比較の対象とするか、どのように比較するかなど、多くの点で注意が必要です。

このセクションで紹介したサンプルコードを実行すると、次のように表示されます。

田中さんの30歳と田中さんの30歳は同じ人物と判断されました。
一方、田中さんの30歳と佐藤さんの25歳は異なる人物と判断されました。

こうした細かい違いを理解して、正確な等価性の判定を行うことが、TypeScriptを使ったプログラミングの中で非常に重要となります。

○サンプルコード9：等価演算子をオーバーロードする方法

TypeScriptでは、JavaScriptの基本的な動作をベースにしつつ、型の強化を行い、より堅牢なプログラムの作成をサポートしています。

しかし、JavaScriptの一部の動作に関しては、初心者には少し難解に感じることもあるでしょう。

その一つが「等価演算子」の動作です。

JavaScriptには==と===という2つの等価演算子が存在しますが、これらの動作は時として直感に反するものがあります。この部分をカスタマイズしたいと考える開発者も少なくないでしょう。

その際に役立つのが「オーバーロード」です。

しかし、JavaScriptやTypeScriptの等価演算子を直接オーバーロードすることはできません。

その代わり、クラスやオブジェクトに特定のメソッドを定義することで、間接的に同じような動作を模倣することが可能です。

このコードでは、等価演算子をオーバーロードするための手法を用いて、クラスのインスタンス間で独自の比較ロジックを実装する方法を表しています。

この例では、Personクラスを定義し、その中にequalsというメソッドを導入しています。

class Person {
    constructor(private name: string, private age: number) {}

    // 等価性をチェックする独自のメソッド
    equals(other: Person): boolean {
        return this.name === other.name && this.age === other.age;
    }
}

const person1 = new Person("太郎", 20);
const person2 = new Person("太郎", 20);
const person3 = new Person("次郎", 25);

console.log(person1.equals(person2));  // trueが出力されます
console.log(person1.equals(person3));  // falseが出力されます

上記のコードを詳しく見てみると、Personクラス内にequalsメソッドが定義されています。

このメソッドは、引数として別のPersonインスタンスを受け取り、nameとageが共に一致する場合にtrueを、それ以外の場合にfalseを返すようになっています。

実際にperson1とperson2、person1とperson3を比較した場合、person1とperson2はnameもageも同じなのでtrueが出力されます。

一方、person1とperson3はnameが異なるので、falseが出力されます。

○サンプルコード10：非同期処理の結果の比較

非同期処理は、特にWebアプリケーションやモダンなアプリケーションの開発においては避けて通れない存在です。

非同期処理の結果を比較する場合は、いくつかの点を注意深く考慮する必要があります。

特にPromiseやasync/awaitを使った非同期処理が絡む場合、その比較は直感的ではありません。

このコードでは、非同期処理を行った結果を比較する方法をTypeScriptで表しています。

この例では、二つの非同期関数が同じ結果を返すかどうかを確認しています。

// 非同期関数のサンプル
async function fetchDataA(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("データA");
        }, 1000);
    });
}

async function fetchDataB(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("データA");
        }, 1200);
    });
}

// 非同期処理の結果を比較する関数
async function compareAsyncResults() {
    const resultA = await fetchDataA();
    const resultB = await fetchDataB();

    if (resultA === resultB) {
        console.log("二つの非同期処理の結果は同じです。");
    } else {
        console.log("非同期処理の結果は異なります。");
    }
}

// 関数の実行
compareAsyncResults();

このコードを実行すると、「二つの非同期処理の結果は同じです。」というメッセージが表示されます。

これは、非同期関数fetchDataAとfetchDataBが同じ文字列”データA”を返すためです。

ただし、非同期処理の結果を比較する際には、次のようなポイントに注意する必要があります。

  1. awaitキーワードを忘れずに使用すること。
    これによって非同期処理が完了するのを待ち、その結果を取得することができます。
  2. 二つの非同期処理の完了時間が異なる場合でも、それぞれの結果を比較することができます。
    この例では、fetchDataAは1秒後、fetchDataBは1.2秒後に結果を返すように設定しています。
  3. 実際のアプリケーションでは、非同期処理がエラーを返す可能性も考慮する必要があります。
    この場合、try/catch文を使用してエラーハンドリングを行うことが推奨されます。

このサンプルコードを参考に、TypeScriptでの非同期処理の結果の比較方法について理解を深めることができるでしょう。

非同期処理は複雑な動作を持つことが多いため、特に注意深くコードを書く必要があります。

適切な知識と技術を身につければ、非同期処理の結果を安全かつ効率的に比較することが可能です。

●注意点と対処法

TypeScriptを使用して等価演算子を活用する上で、気をつけるべきポイントやよくあるトラップ、それらの対処法について深掘りしていきます。

○厳格比較と抽象比較

TypeScriptでの等価演算子には、主に==と===があります。

これらはどちらも等価性を比較するための演算子ですが、動作が異なります。

このコードでは==と===の違いを簡単に確認するものを表しています。

この例では数字と文字列を比較して、それぞれの演算子での結果を確かめています。

let num = 10;
let str = "10";

console.log(num == str);  // true
console.log(num === str); // false

上記のコードで、==は抽象比較と呼ばれ、型変換を試みてから等価性をチェックします。

そのため、数字の10と文字列の”10″は、値が同じとみなされ、trueを返します。

一方で、===は厳格比較と呼ばれ、型も含めて等価性を確認します。

数字と文字列は異なる型であるため、falseと評価されます。

このような動作の違いから、意図しない動作を引き起こすことがあるため、基本的には厳格比較の===を使うことをおすすめします。

特にTypeScriptを使用する場面では、型の安全性を確保するためにも===の使用が望ましいです。

○変数の型の注意点

TypeScriptでは、変数に型を持たせることができます。

しかし、型の扱いに注意しないと、等価演算子の比較結果が意図しないものとなることがあります。

このコードでは、異なる型を持つ変数同士の等価比較を試みています。

この例では、number型とstring型の変数を比較して、その結果を確認しています。

let a: number = 123;
let b: string = "123";

if (a === b) {
    console.log("等しい");
} else {
    console.log("等しくない");
}

上記のコードを実行すると、”等しくない”と表示されます。

これはaとbが異なる型を持つため、===による比較がfalseとなるからです。

このように、TypeScriptでは型が強力にサポートされているため、等価演算子を使用する際にも変数の型に注意を払う必要があります。

変数の型が異なる場合、意図的に型変換を行ってから比較するか、同じ型を持つ変数同士での比較を心がけることで、予期しない結果を避けることができます。

●カスタマイズ方法

TypeScriptの等価演算子を使用する上で、デフォルトの動作だけでなく、独自の比較ロジックを導入したい場合もあります。

ここでは、等価演算子のカスタマイズ方法に焦点を当てて、その手法を詳しく探ります。

○カスタム等価関数の作成

実際の開発では、標準の等価演算子だけでは要件を満たせない場合が考えられます。

例えば、特定のオブジェクトのプロパティだけを基に等価性を判定したいときや、一部のプロパティを無視して比較したいときなどです。

このような場合には、カスタム等価関数を作成して、独自の比較ロジックを実装することが有効です。

このコードでは、Person オブジェクトの name と age プロパティだけを基に等価性を判定するカスタム関数を表しています。

この例では、email プロパティを無視して二つのオブジェクトを比較しています。

type Person = {
    name: string;
    age: number;
    email: string;
};

function isEquivalent(a: Person, b: Person): boolean {
    // 名前と年齢だけを比較
    return a.name === b.name && a.age === b.age;
}

const person1: Person = { name: "山田太郎", age: 30, email: "[email protected]" };
const person2: Person = { name: "山田太郎", age: 30, email: "[email protected]" };

console.log(isEquivalent(person1, person2));  // true

上記のコードで、isEquivalent 関数を用いることで、email プロパティが異なるにもかかわらず、person1 と person2 は等しいと判定されます。

この方法を採用することで、任意のオブジェクトや構造に対して、独自の比較ロジックを適用することが可能になります。

もちろん、この例は単純化されていますが、カスタム等価関数はもっと複雑な条件や、深いネストを持つオブジェクトにも適用することができます。

まとめ

この記事では、TypeScriptの等価演算子に関して、その基本的な使い方から、応用例、注意点、そしてカスタマイズ方法までを徹底的に解説しました。

等価演算子はプログラムの中で非常に頻繁に使われるものであり、その動作や特性を正確に理解しておくことは、バグを防ぐためにも非常に重要です。

特にカスタム等価関数の作成については、標準の動作だけでは要件を満たせない場合に非常に役立つテクニックです。

この知識を活かして、より堅牢なコードを書く手助けになれば幸いです。