#028 TypeScript（12）：readonly の使用方法と特徴
readonly とは？
変数やプロパティを「読み取り専用」にするためのキーワードです。つまり、一度値を設定したら、後で変更することができなくなります。
オブジェクトのプロパティに使用
説明: インターフェースや型定義で特定のプロパティを読み取り専用にできます。一度設定したら、そのプロパティの値を変更することはできません。
interface Book {
readonly title: string;
author: string;
pages: number;
}
const myBook: Book = {
title: "TypeScript入門",
author: "山田太郎",
pages: 200
};
console.log(myBook.title); // 読み取りは可能
// myBook.title = "JavaScript入門"; // エラー: 読み取り専用プロパティに値を割り当てることはできません
配列に使用
説明: 配列全体を読み取り専用にできます。要素の追加、削除、変更ができなくなりますが、要素の読み取りは可能です。
const readonlyScores: ReadonlyArray<number> = [80, 90, 100];
console.log(readonlyScores[0]); // 読み取りは可能
// readonlyScores.push(110); // エラー: 読み取り専用プロパティに変更を加えることはできません
ReadonlyArrayの利点
安全性: 配列の内容が変更されないことを保証できます。
意図の明確化: 配列が変更されないことを他の開発者に示すことができます。
バグの減少: 意図しない変更によるバグを防ぐことができます。
const readonlyScores: ReadonlyArray<number> = [80, 90, 100];
console.log("Scores (readonly):", readonlyScores); // 読み取りは可能
// 次の行はエラーになります。
// readonlyScores.push(110); // エラー: pushは読み取り専用プロパティに変更を加えるため使用できません
// 次の行もエラーになります。
// readonlyScores[0] = 85; // エラー: 直接変更もできません
// しかし、読み取りは可能です。
console.log("First score:", readonlyScores[0]); // 出力: 80
ReadonlyArrayの注意点
ReadonlyArray は、配列の内容を変更するメソッド（push, pop, splice, shift, unshiftなど）を使用できません。
ただし、配列の内容を読み取るメソッド（map, filter, reduce, forEachなど）は使用可能です。
const readonlyNames: ReadonlyArray<string> = ["太郎", "次郎", "花子"];
// 次の行はエラーになります。
// readonlyNames.push("四郎"); // エラー: 読み取り専用プロパティに変更を加えるため使用できません
// しかし、mapやfilterなどの読み取りメソッドは使用できます。
const uppercasedNames = readonlyNames.map(name => name.toUpperCase());
console.log("Uppercased Names:", uppercasedNames); // 出力: ["太郎", "次郎", "花子"]
readonlyの初心者向けの考え方
「封印された箱」: 一度中身を入れたら、取り出すことはできても、追加や変更はできません。
「博物館の展示品」: 触って見ることはできるけど、展示品を変更したり、追加したりすることはできません
まとめ
TypeScriptの readonly を適切に使用することで、より安全で意図が明確なコードを書くことができます。特に、重要なデータの不変性を保証したい場合に非常に有用です。
終わりに
少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。
最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。