TypeScript - Readonly Properties: A Beginner's Guide

こんにちは、未来のプログラミングスーパースター！今日は、TypeScriptの素晴らしい世界に飛び込み、その強力な機能の一つであるreadonlyプロパティについて探求します。プログラミングが初めてであれば心配しないでください。このエキサイティングな旅であなたの親切なガイドになるつもりです。お気に入りの飲み物を手に取り、リラックスして、一緒にTypeScriptの冒険に出発しましょう！

TypeScript - Readonly Properties

Readonly Propertiesとは？

本題に入る前に、readonlyプロパティとは何かを理解しましょう。想像してみてください。貴重な家宝、例えば美しいアンティーク時計を持っているとします。それを眺めて、称賛することはできますが、一度設定した後は変更することができません。これがTypeScriptにおけるreadonlyプロパティ exactementに同じです。一度設定した後は変更できない値です。

シntax

まず基本的なことを説明しましょう。readonlyプロパティをどのように宣言するのか。簡単です。プロパティ名の前にreadonlyキーワードを追加します。以下は基本的な例です：

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("Grandfather's Watch");
console.log(familyWatch.name); // 出力: Grandfather's Watch
// familyWatch.name = "New Watch"; // エラー！readonlyプロパティを変更することはできません

この例では、一旦nameをコンストラクタで設定すると、後で変更することはできません。まるで家宝の名前を時間の中で封印しているようなものです！

インターフェースとのreadonlyプロパティ

TypeScriptのインターフェースは、オブジェクトの青写真のようなものです。インターフェースにもreadonlyプロパティを使用できます。見てみましょう：

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

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // 出力: Alice
// person.age = 31; // エラー！readonlyプロパティを変更することはできません

ここでは、ReadonlyPersonインターフェースを作成し、nameとageの両方をreadonlyにしました。このインターフェースに基づいてオブジェクトを作成すると、これらのプロパティを変更することができません。まるでIDカードを作成しているようなものです。一度印刷したら、年齢を消して新しいものを書くことはできません！

クラスとのreadonlyプロパティ

クラスは、データと動作の両方を持つオブジェクトの青写真のようなものです。readonlyプロパティがクラス内でどのように動作するかを見てみましょう：

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // 出力: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // 出力: 250
// myBook.title = "JavaScript 101"; // エラー！readonlyプロパティを変更することはできません

この例では、titleとauthorはreadonlyですが、メソッドを通じてpageCountを変更することができます。まる_booksのように、一度印刷したらタイトルや著者を変更することはできませんが、ページを追加することはできます（もしかすると修订版で）。

タイプエイリアスとのreadonlyプロパティ

タイプエイリアスは、タイプのニックネームのようなものです。readonlyプロパティもそれと一緒に使用できます：

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // 出力: 10 20
// point.x = 30; // エラー！readonlyプロパティを変更することはできません

ここでは、ReadonlyPointタイプを作成し、xとyの両方をreadonlyにしました。まるで地図上に座標を設定しているようなものです。一度設定したら、ポイントを移動することはできません！

Constとreadonlyプロパティの違い

今、あなたはおそらく思っているでしょう、「constとreadonlyの違いは何だろう？」素晴らしい質問です！それを分解してみましょう：

const PI = 3.14159;
// PI = 3.14; // エラー！const変数を再割り当てすることはできません

class Circle {
readonly radius: number;

constructor(radius: number) {
this.radius = radius;
}
}

const circle = new Circle(5);
// circle.radius = 10; // エラー！readonlyプロパティを変更することはできません

constは、再割り当てできない変数に使用されます。readonlyは、初期化した後変更できないプロパティに使用されます。constは、容器を変更しないという約束 whereas readonlyは、内容を変更しないという約束を考えてください。

Readonlyプロパティの使用時期

では、いつreadonlyプロパティを使用するべきでしょうか？以下は一般的なシナリオです：

初期化した後変更 shouldn't 値がある場合。
変更されるべきでない設定オブジェクトがある場合。
大規模なコードベースでの偶然の修正を防ぐ場合。
不変データ構造を操作する場合。

以下は、私たちが議論した方法を要約する表です：

メソッド	説明	例
インターフェース	オブジェクトの青写真にreadonlyプロパティを定義	`interface ReadonlyPerson { readonly name: string; }`
クラス	クラスのプロパティを初期化した後変更できないようにする	`class Book { readonly title: string; }`
タイプエイリアス	カスタムタイプにreadonlyプロパティを定義	`type ReadonlyPoint = { readonly x: number; readonly y: number; }`
Const vs Readonly	変数にはconstを使用し、プロパティにはreadonlyを使用する	`const PI = 3.14; class Circle { readonly radius: number; }`

readonlyプロパティを使用することは、将来の自分や他の開発者に対する規則を設定することのようです。間違いを防ぎ、コードをより予測可能で保守しやすいものにします。

そして、ここまでが、readonlyプロパティの世界を一緒に探求した結果です。このガイドがあなたの道を照らしてくれたことを願っています。実践が完璧を生むことを忘れないでください。これらの概念を自分のプロジェクトで実験してみてください。ハッピーコーディングを、readonlyプロパティが常にその価値を守るよう願っています！

Credits: Image by storyset