TypeScriptの参照渡しを完全攻略！10選の詳細サンプルコードで理解

はじめに

TypeScriptはJavaScriptのスーパーセットであり、型安全性を持っているプログラミング言語です。

この記事では、TypeScriptの「参照渡し」の概念に焦点を当てて解説します。

参照渡しは、プログラミングの世界で重要な概念の一つであり、特にTypeScriptを使用する際に知っておくべき重要な点がいくつかあります。

このガイドでは、TypeScriptの参照渡しの使い方から注意点、カスタマイズ方法まで、10選の詳細なサンプルコードと共に分かりやすく解説します。

これからTypeScriptの参照渡しを学びたい初心者の方や、既に知識がある方でも更なる理解を深めたい方に向けて、詳細にわたって説明してまいります。

●TypeScriptと参照渡しの基礎

TypeScriptと参照渡しの基礎を理解する前に、まずは参照渡し自体の定義をしっかりと把握することが重要です。

このコンセプトは、値そのものではなく、データのメモリアドレスを関数やメソッドに渡すことに他なりません。

プログラム内でオブジェクトや複合型のデータがどのように扱われ、処理されていくかを深く理解するためには、参照渡しについての知識が不可欠です。

それでは、この原則をTypeScriptにおいてどのように活用し、コーディングプラクティスに組み込むかを見ていきましょう。

○参照渡しとは

参照渡しは、変数やオブジェクトのメモリ上のアドレスを直接渡すことを指します。

これにより、関数やメソッド内での変更が元の変数やオブジェクトに直接影響を及ぼすことができます。

○値渡しとの違い

対照的に、値渡しは変数やオブジェクトのコピーを作成し、そのコピーを渡す方法です。

したがって、関数やメソッド内での変更は、元の変数やオブジェクトには影響を及ぼしません。

ここで、参照渡しと値渡しの違いを簡単なサンプルコードで確認しましょう。

// 参照渡しの例
const obj1 = { name: 'Taro' };
function changeName(obj: any) {
    obj.name = 'Jiro';
}
changeName(obj1);
console.log(obj1);  // { name: 'Jiro' }

// 値渡しの例
let num1 = 10;
function addNumber(num: number) {
    num += 20;
    return num;
}
const result = addNumber(num1);
console.log(num1);  // 10
console.log(result);  // 30

このコードでは、オブジェクトに対しての操作が参照渡しとなり、元のオブジェクトの内容が変更されていることが確認できます。

一方、プリミティブ型の数値に対しての操作は値渡しとなり、元の変数の値は変更されていません。

●参照渡しの具体的なサンプルコード

プログラミングにおいて、関数やメソッドを利用する際、引数としてデータを渡す方法は大きく分けて「値渡し」と「参照渡し」の2種類に分かれます。

特にTypeScriptでは、様々なデータ型やオブジェクトを扱うので、この違いをしっかり理解しておくことが求められます。

そこで、ここでは、TypeScriptでの参照渡しの振る舞いを5つのサンプルコードを通して詳しく解説していきます。

○サンプルコード1：オブジェクトの参照渡し

このコードでは、オブジェクトを引数として関数に渡し、その関数内でオブジェクトのプロパティを変更する例を表しています。

この例では、オブジェクトのnameプロパティを変更しています。

function changeName(person: { name: string }) {
    person.name = "太郎";
}

const obj = { name: "次郎" };
console.log(obj); // { name: '次郎' }

changeName(obj);
console.log(obj); // { name: '太郎' }

関数changeNameを呼び出した後、objのnameプロパティが”太郎”に変わっていることがわかります。

これは、オブジェクトが参照渡しで関数に渡されているため、関数内での変更がオリジナルのオブジェクトにも影響するからです。

○サンプルコード2：配列の参照渡し

このコードでは、配列を使って参照渡しの動きを確認するコードを表しています。

この例では、配列の最初の要素を変更しています。

function changeFirstElement(numbers: number[]) {
    numbers[0] = 99;
}

const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]

changeFirstElement(arr);
console.log(arr); // [99, 2, 3]

関数changeFirstElementを呼び出した後、arrの最初の要素が99に変わっていることが確認できます。

これも、配列が参照渡しで関数に渡されているため、関数内での変更が元の配列に反映されるためです。

○サンプルコード3：関数と参照渡し

このコードでは、関数の戻り値としてオブジェクトを返す際の参照渡しの振る舞いを確認する例を表しています。

この例では、新しいオブジェクトを作成して、それを戻り値として返しています。

function createPerson(): { name: string } {
    const person = { name: "三郎" };
    return person;
}

const newPerson = createPerson();
console.log(newPerson); // { name: '三郎' }

newPerson.name = "四郎";
console.log(newPerson); // { name: '四郎' }

関数createPersonを呼び出して得られたオブジェクトnewPersonのnameプロパティを変更しても、関数内で定義されたオリジナルのpersonオブジェクトは変更されません。

これは、関数が戻り値として新しいオブジェクトを返しているため、それを参照しているのはnewPerson変数だけであり、オリジナルのオブジェクトは変更されないためです。

○サンプルコード4：クラスと参照渡し

このコードでは、クラスのインスタンスを使った参照渡しの振る舞いを確認する例を表しています。

この例では、クラスのインスタンスのプロパティを外部から変更しています。

class Student {
    constructor(public name: string) {}
}

function changeStudentName(s: Student) {
    s.name = "五郎";
}

const student = new Student("六郎");
console.log(student.name); // "六郎"

changeStudentName(student);
console.log(student.name); // "五郎"

changeStudentName関数を呼び出した後、studentインスタンスのnameプロパティが”五郎”に変わっていることがわかります。

クラスのインスタンスもオブジェクトの一種なので、参照渡しの性質が適用されることが確認できます。

○サンプルコード5：プリミティブ型と参照渡し

このコードでは、プリミティブ型のデータを関数に渡す際の振る舞いを確認する例を表しています。

プリミティブ型とは、number, string, booleanなどの基本的なデータ型を指します。

function changeValue(x: number) {
    x = x * 10;
}

let num = 5;
console.log(num); // 5

changeValue(num);
console.log(num); // 5

changeValue関数を呼び出しても、変数numの値は変わっていません。

これは、プリミティブ型のデータは値渡しで関数に渡されるため、関数内での変更が外部の変数に影響を及ぼさないことを表しています。

●参照渡しの応用例

○サンプルコード6：深いコピーと浅いコピー

このコードでは、オブジェクトのコピー方法、特に「浅いコピー」と「深いコピー」の違いを表しています。

この例では、オブジェクトの内部オブジェクトも含めたコピー方法を確認しています。

// 浅いコピーの例
const obj1 = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj1 };

// 深いコピーの例
const deepCopy = JSON.parse(JSON.stringify(obj1));

// 値の変更
shallowCopy.b.c = 3;

console.log(obj1.b.c); // 3
console.log(deepCopy.b.c); // 2

浅いコピーを用いると、shallowCopyの内部オブジェクトbを変更すると、元のobj1の値も変わってしまいます。

一方、深いコピーを用いると、元のobj1は変わらず、コピー先のdeepCopyのみが変更されます。

このコードを実行すると、浅いコピーを用いた場合にはobj1の値も変わってしまうことがわかります。

しかし、深いコピーを使用すれば、元のオブジェクトは変更されずに新しいオブジェクトだけが変更されることが確認できます。

○サンプルコード7：高度なオブジェクト操作

次に、オブジェクトのプロパティを動的に操作する方法についてのコードを表しています。

この例では、オブジェクトのキーを変数として使用し、動的にオブジェクトのプロパティを変更しています。

const keyName = "age";
const person = {
    name: "太郎",
    [keyName]: 25
};

console.log(person); // { name: "太郎", age: 25 }

上記のコードを実行すると、変数keyNameの値が”age”であるため、personオブジェクトにはnameとageという2つのキーが存在し、出力結果として{ name: "太郎", age: 25 }が得られます。

○サンプルコード8：配列操作の高度な例

配列に対する参照渡しの応用として、配列の要素を動的に操作する方法について紹介します。

この例では、配列の要素を特定の条件でフィルタリングしています。

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(n => n % 2 === 0);

console.log(filteredNumbers); // [2, 4]

このコードでは、numbers配列から偶数だけを取り出して新しい配列filteredNumbersを作成しています。

その結果、filteredNumbersには[2, 4]という配列が得られることが確認できます。

○サンプルコード9：イベントリスナーと参照渡し

TypeScriptにおけるイベントリスナーの登録や解除は、多くのWeb開発者にとって日常的なタスクとしてなじみがあります。

しかし、参照渡しの概念を理解していないと、意図しない振る舞いやバグの原因となることがあります。

このコードでは、HTMLのボタン要素にイベントリスナーを追加し、その後参照渡しを使ってイベントリスナーを外す一連の流れを表しています。

この例では、ボタンをクリックするとメッセージがコンソールに表示されるというシンプルな動作を想定しています。

// HTMLのボタン要素を取得
const button = document.getElementById('myButton') as HTMLButtonElement;

// クリックイベントのハンドラ関数
const handleClick = (event: Event) => {
    console.log('ボタンがクリックされました！');
};

// イベントリスナーを追加
button.addEventListener('click', handleClick);

// 一定時間後にイベントリスナーを解除
setTimeout(() => {
    button.removeEventListener('click', handleClick);
    console.log('イベントリスナーを解除しました。');
}, 5000);

上記のサンプルコードでは、handleClick関数を参照渡ししてaddEventListenerに追加しています。

また、5秒後にremoveEventListenerを使用して、同じhandleClick関数を参照渡しで解除しています。

イベントリスナーを解除する際は、同じ関数の参照を使わなければならないことを忘れないでください。

異なる関数やアロー関数をその場で生成してイベントリスナーとして登録した場合、後でそれを解除することはできません。

このコードをブラウザで実行すると、5秒以内にボタンをクリックすれば「ボタンがクリックされました！」というメッセージがコンソールに表示されます。

5秒後には「イベントリスナーを解除しました。」というメッセージが表示され、それ以降ボタンをクリックしても何も表示されなくなります。

○サンプルコード10：APIとのデータ交換時の注意点

Webアプリケーションの開発では、クライアントとサーバーの間でのデータの送受信が頻繁に行われます。

TypeScriptを使用した場合、このデータの送受信に関連して、参照渡しの概念が影響を及ぼすことがあります。

□APIのレスポンスと参照渡し

APIからのレスポンスは通常、JSON形式のデータとして返されます。

このデータをTypeScriptのオブジェクトとして扱う際、直接そのオブジェクトを操作すると、参照渡しのために予期しない動作を引き起こす可能性があります。

このコードでは、APIから受け取ったデータをTypeScriptで処理する一例を表しています。

この例では、APIからのデータをそのまま表示して、後でそのデータを編集するというシナリオを想定しています。

// APIからのレスポンスをシミュレート
const apiResponse = {
    id: 1,
    name: "Taro",
    age: 20
};

// APIからのデータを表示
console.log(apiResponse); // { id: 1, name: "Taro", age: 20 }

// データを変更
apiResponse.name = "Jiro";

// 変更後のデータを表示
console.log(apiResponse); // { id: 1, name: "Jiro", age: 20 }

上記のコードの結果、APIから受け取ったオリジナルのデータが変更されてしまいました。

これは参照渡しの性質によるもので、多くの場面でこのような直接的なデータの変更は避けたい場面もあるでしょう。

□シャローコピーを利用してデータの安全性を高める

直接APIからのデータを操作する代わりに、そのデータのシャローコピーを作成し、そのコピーを操作することで、オリジナルのデータを安全に保つことができます。

このコードでは、Object.assignを使ってAPIからのデータのシャローコピーを作成し、そのコピーを操作する例を表しています。

この例では、オリジナルのデータを変更せずに、新しいデータを作成しています。

// APIからのレスポンスをシミュレート
const apiResponse = {
    id: 1,
    name: "Taro",
    age: 20
};

// シャローコピーを作成
const copiedData = Object.assign({}, apiResponse);

// コピーしたデータを変更
copiedData.name = "Jiro";

// コピー後のデータとオリジナルのデータを表示
console.log(copiedData); // { id: 1, name: "Jiro", age: 20 }
console.log(apiResponse); // { id: 1, name: "Taro", age: 20 }

この方法を用いれば、オリジナルのデータは変更されずに新しいデータを作成できることがわかります。

APIとのデータ交換時には、TypeScriptの参照渡しの性質を理解して、データの安全性を確保する必要があります。

特に、APIからのデータを直接操作するのではなく、適切にデータのコピーを作成してから操作することで、多くの予期しないバグを防ぐことができます。

●参照渡しに関する注意点と対処法

TypeScriptにおける参照渡しは、多くの状況で非常に便利ですが、適切に扱わなければ予期せぬエラーやバグを引き起こす可能性があります。

ここでは、参照渡しを使用する際の主な注意点と、それらの問題を回避または対処する方法について詳しく説明していきます。

○変更の伝播とサイドエフェクト

参照渡しの一つの大きな特徴は、参照先のデータが変更されると、その変更が参照元にも影響を及ぼすことです。

これが意図しない変更の伝播やサイドエフェクトの原因となることがあります。

このコードではオブジェクトを関数に渡して変更を加える例を表しています。

この例では関数内でオブジェクトのプロパティを変更しています。

function updateName(obj: {name: string}) {
    obj.name = "新しい名前";
}

const myObject = {name: "初期名前"};
updateName(myObject);
console.log(myObject.name); // 新しい名前

関数内で行われた変更が、関数外のオブジェクトにも影響を与えています。

このような変更が望ましくない場合、深いコピーを使用して元のオブジェクトを保護することが推奨されます。

○メモリの管理とリークの防止

参照渡しはメモリの管理面でも注意が必要です。

特に、大きなデータ構造や長い生存期間を持つオブジェクトを参照している場合、意図せずメモリリークを引き起こす可能性があります。

このコードでは、クロージャを使って参照を保持する例を表しています。

この例では関数外部のオブジェクトを参照しているクロージャが作成され、メモリが不要に占有される可能性があります。

let bigData = new Array(1e6).fill("データ");

function createClosure() {
    return () => {
        console.log(bigData[0]);
    };
}

const closure = createClosure();
bigData = null; // bigDataを解放しようとしても、クロージャが参照を保持しているため完全には解放されない

このような場面では、不要になった参照を明示的にnullにすることで、ガベージコレクションの対象としてメモリを解放させることができます。

上記のコードでは、クロージャが作成された後でbigDataをnullにしても、完全にはメモリが解放されない点に注意が必要です。

●参照渡しのカスタマイズ方法

TypeScriptの参照渡しは、非常に強力な機能であり、多くのケースで役立ちます。

しかし、場面や要件に応じて、よりカスタマイズが求められることもあるでしょう。

ここでは、TypeScriptのカスタム型やインターフェイスを使用して、参照渡しをさらに柔軟に使う方法を解説します。

○カスタム型での参照渡し

TypeScriptでは、特定の形状や属性を持つオブジェクトを定義するためのカスタム型を作成することができます。

このカスタム型を利用して、参照渡しを行うと、より具体的な型の制約を持った参照渡しを実現することができます。

このコードではカスタム型を使ってオブジェクトの参照渡しをするコードを表しています。

この例ではカスタム型「UserType」を定義して、関数内でその型のオブジェクトを参照渡ししています。

type UserType = {
  id: number;
  name: string;
};

function updateUser(user: UserType) {
  user.name = "太郎";
}

const user1: UserType = { id: 1, name: "花子" };
updateUser(user1);
console.log(user1);  // 出力内容は{id: 1, name: "太郎"}

上記のサンプルコードで見ることができるように、関数updateUserにオブジェクトuser1を渡して、その中のnameプロパティを変更すると、元のオブジェクトの内容も変わります。

○インターフェイスと参照渡し

インターフェイスもまた、TypeScriptでオブジェクトの型を定義する手段の一つです。

インターフェイスを用いて参照渡しを行うことで、より明確な契約を持つオブジェクトの操作が可能となります。

このコードではインターフェイスを使ってオブジェクトの参照渡しをするコードを表しています。

この例ではインターフェイス「IUser」を定義して、関数内でその型のオブジェクトを参照渡ししています。

interface IUser {
  id: number;
  name: string;
}

function changeUser(user: IUser) {
  user.name = "次郎";
}

const user2: IUser = { id: 2, name: "美咲" };
changeUser(user2);
console.log(user2);  // 出力内容は{id: 2, name: "次郎"}

上記のサンプルコードでは、関数changeUserにオブジェクトuser2を渡し、そのnameプロパティを変更しています。

元のオブジェクトの内容も変わることが確認できるでしょう。

まとめ

TypeScriptを学んでいると、参照渡しの概念は避けて通れないテーマと言えるでしょう。

この記事を通して、参照渡しの基本から応用、そしてカスタマイズ方法まで、多岐にわたるサンプルコードとともに紹介してきました。

参照渡しは非常に便利な概念であり、多くの場面で利用されますが、使用する際には変更の伝播やメモリの管理などの注意点も忘れずに意識することが大切です。

このガイドが、あなたのTypeScriptの学びに役立ち、より高度なプログラミングへの一歩となることを願っています。