constとreadonlyを使いこなして、より安全で堅牢なTypeScriptコードを書こう

2024-04-10

TypeScriptにおけるconstとreadonlyの違い

const

constは、変数自体への再代入を禁止します。つまり、constで宣言した変数に新しい値を代入することはできません。

const name = "John Doe";
name = "Jane Doe"; // エラー: 'name' は const であるため再代入できません

constで宣言した変数は、プリミティブ型（文字列、数値、ブール値など）だけでなく、オブジェクトや配列にも使用できます。

const person = {
  name: "John Doe",
  age: 30,
};

person.name = "Jane Doe"; // 許可されます

上記の例では、person変数はconstで宣言されていますが、person.nameプロパティへの変更は許可されています。これは、constが変数自体への再代入のみを禁止するためです。

readonly

readonlyは、プロパティへの変更を禁止します。つまり、readonlyで修飾されたプロパティに新しい値を代入することはできません。

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = {
  name: "John Doe",
  age: 30,
};

person.name = "Jane Doe"; // エラー: 'name' は readonly であるため変更できません

上記の例では、nameプロパティはreadonlyで修飾されています。そのため、person.nameに新しい値を代入しようとすると、エラーが発生します。

readonlyは、オブジェクトのプロパティを保護したい場合に便利です。例えば、データベースから取得したデータを表すオブジェクトを作成する場合、そのプロパティを誤って変更してしまうことを防ぐためにreadonlyを使用できます。

機能	const	readonly
対象	変数	プロパティ
制限	再代入	変更
使用例	プリミティブ型、オブジェクト、配列	オブジェクトのプロパティ

一般的には、以下のルールに従うと良いでしょう。

変数自体を変更しない場合は、constを使用する。
オブジェクトのプロパティを変更しない場合は、readonlyを使用する。

これらのルールはあくまでも目安であり、状況によって使い分けることが重要です。

const

const name = "John Doe"; // 文字列リテラル
const age = 30; // 数値リテラル
const isAdult = true; // ブールリテラル

const person = {
  name: "John Doe",
  age: 30,
};

person.name = "Jane Doe"; // 許可されます

const numbers: number[] = [1, 2, 3];
numbers.push(4); // 許可されます

readonly

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = {
  name: "John Doe",
  age: 30,
};

person.name = "Jane Doe"; // エラー: 'name' は readonly であるため変更できません

const numbers: readonly number[] = [1, 2, 3];
numbers.push(4); // エラー: 'numbers' は readonly であるため変更できません

組み合わせ

const person: {
  readonly name: string;
  age: number;
} = {
  name: "John Doe",
  age: 30,
};

person.age = 31; // 許可されます

const numbers: readonly number[] = [1, 2, 3];

// 'numbers' は readonly であるため、新しい配列を作成する必要があります
const newNumbers = [...numbers, 4];

constとreadonly以外の方法

オブジェクトのフリーズ

Object.freeze() メソッドを使用して、オブジェクトを不可変更にすることができます。

const person = {
  name: "John Doe",
  age: 30,
};

Object.freeze(person);

person.name = "Jane Doe"; // エラー: 'person' は凍結されているため変更できません

プロパティアクセサを使用して、プロパティへのアクセスを制御することができます。

class Person {
  private _name: string;

  constructor(name: string) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(newName: string) {
    if (newName === this._name) {
      return;
    }

    this._name = newName;
  }
}

const person = new Person("John Doe");

person.name = "Jane Doe"; // 許可されます

console.log(person.name); // "Jane Doe"

イミュータブルライブラリ

immutable.js などのライブラリを使用して、イミュータブルなデータ構造を扱うことができます。

import { Map } from "immutable";

const person = Map({
  name: "John Doe",
  age: 30,
});

const newPerson = person.set("name", "Jane Doe");

console.log(person.get("name")); // "John Doe"
console.log(newPerson.get("name")); // "Jane Doe"