ReadonlyArrayとReadonlyMap
組み込みのreadonlyコレクション型を使います。
「ReadonlyArrayとReadonlyMap」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
readonly コレクション型
TypeScript には配列以外にも、組み込みコレクションの readonly 版が用意されています。ReadonlyArray<T>、ReadonlyMap<K, V>、ReadonlySet<T>です。それぞれの API で、変更を伴わない操作だけを公開します。
const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));ReadonlyArray のまとめ
ReadonlyArray<T>では、反復処理、インデックスアクセス、mapやfilterなどのメソッドを使えますが、push、pop、インデックスへの代入はできません。readonly ファミリーにおける配列の型です。
const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // ErrorReadonlyMap
ReadonlyMap<K, V>では、値の検索、反復処理、キーの確認ができますが、set、delete、clearは使えません。利用する側から見ると、マップの内容は固定されています。
const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // ErrorReadonlyMap から読み取る
読み取り操作はすべて残っています。get、has、size、keys、values、entries、そして反復処理です。取り除かれるのは、変更を伴うメソッドだけです。
const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
console.log(k, v);
}
console.log('size:', m.size);ReadonlySet
ReadonlySet<T>では、要素の存在確認と反復処理ができますが、add、delete、clearは使えません。許可された値を固定した集合に使います。
const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // ErrorReadonlySet を反復処理する
ReadonlySetを反復処理し、sizeを読み取ることはできますが、内容を変更することはできません。そのため、ホワイトリストや権限の集合に適しています。
const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);関数に readonly を渡す
読み取りだけを行う関数では、readonly のコレクション型を受け取るようにします。意図が明確になり、呼び出し元が所有するデータを関数が変更するのを防げます。
function describe(set: ReadonlySet<string>): string {
return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));可変コレクションは代入できる
通常のMapやSetは、対応する readonly 型に代入できます。これは機能を広げるのではなく、使える機能を絞り込むためです。関数は単に変更する権限を手放します。
function keys(m: ReadonlyMap<string, number>): string[] {
return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));不変コレクション API
readonly コレクション型は、不変のビューを表します。基になるオブジェクトは別の場所では変更可能な場合があります。readonly 型が制限するのは、その参照で実行できる操作だけです。
const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);適切な readonly 型を選ぶ
データ構造に合わせて readonly 型を選びます。順序付きリストにはReadonlyArray、キーと値の検索にはReadonlyMap、重複しない要素の集合にはReadonlySetを使います。それぞれの形に応じて、不変性を適用できます。
const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));より安全な共有状態
内部のコレクションを readonly 型として公開すると、呼び出し元がモジュールの状態を壊すのを防げます。呼び出し元はデータを自由に確認できますが、変更できるのは自分のコードだけです。
class Registry {
private items = new Set<string>();
add(name: string): void { this.items.add(name); }
get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));理解度チェック
readonly コレクション型について、理解度を確認しましょう。
まとめ: readonly コレクション
readonly コレクションのファミリーを学びました。
ReadonlyArray<T>、ReadonlyMap<K, V>、ReadonlySet<T>は、読み取り操作だけを公開します。- 変更を伴うメソッド（
set、add、delete、push）は使えません。 - 可変コレクションは、対応する readonly 型に代入できます。
- 共有状態をより安全にするための引数型や戻り値型として便利です。
最後は、深い不変性のパターンです。
function count(s: ReadonlySet<number>): number {
return s.size;
}
console.log(count(new Set([1, 2, 3])));よくある質問
「ReadonlyArrayとReadonlyMap」レッスンは無料ですか？
はい。「ReadonlyArrayとReadonlyMap」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「ReadonlyArrayとReadonlyMap」で何を学びますか？
組み込みのreadonlyコレクション型を使います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ReadonlyArrayとReadonlyMap」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- readonlyプロパティ
- readonly配列とタプル
- ReadonlyArrayとReadonlyMap
- 深い不変性のパターン