TypeScript Academy · レッスン

readonly配列とタプル

Q: 「readonly配列とタプル」で何を学びますか？

配列やタプルを変更メソッドから保護します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

配列やタプルを変更メソッドから保護します。

「readonly配列とタプル」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

Readonly配列

readonly配列は、読み取りはできますが変更はできない配列です。readonly number[]または同じ意味のReadonlyArray<number>と記述します。要素の型は変わらず、変更操作だけが禁止されます。

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

ReadonlyArray型

ReadonlyArray<T>はジェネリック形式で、readonly T[]と同じ意味です。読みやすい方を使ってください。どちらも置き換えて使用できます。

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

変更メソッドは使用できない

Readonly配列には、変更を行うメソッドが完全に含まれていません。push、pop、splice、sort、reverseは使用できません。型にそれらのメソッド自体が存在しないためです。

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

変更しないメソッドは引き続き使用できる

変更する代わりに新しい値を返すメソッド、つまりmap、filter、concat、sliceは引き続き使用できます。これらは新しい配列を作成し、元の配列は変更しません。

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

パラメーターとしてのReadonly配列

関数でreadonly T[]を受け取るようにすると、呼び出し側の配列を変更しないことを示せます。意図が明確になり、コンパイラーにその約束を強制させられます。

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

変更可能な配列はReadonlyに代入できる

通常のnumber[]はreadonly number[]型のパラメーターに代入できます。これは、その配列を変更しないと約束しているだけだからです。逆方向の代入は許可されません。

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Readonlyタプル

タプルもreadonlyにできます。たとえばreadonly [string, number]のように記述します。要素の型と順序が固定され、個々の位置にも再代入できません。

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Readonlyタプルは変更を防ぐ

Readonly配列と同様に、Readonlyタプルでは変更メソッドが使えず、インデックスへの代入も拒否されます。座標の組のような、形が固定されたレコードに最適です。

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

constアサーションとreadonly型

Readonly配列を得る方法は2つありますが、微妙に異なります。readonly number[]というアノテーションでは、一般的な要素型が維持されます。as constはさらに踏み込み、リテラル型によるReadonlyタプルを作ります。

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

使い分け

不変性は必要ですが要素型は一般的なままにしたい場合は、readonly T[]のアノテーションを使います。正確なリテラル値も必要な場合、たとえばユニオン型を導出したい場合はas constを使います。

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

共有データの不変性

Readonly配列とタプルは、共有する定数や設定リストを意図しない変更から保護します。そのため、予期しない変更によるバグをコンパイル時に防げます。

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

クイックチェック

Readonly配列とタプルについての理解度を確認しましょう。

まとめ：Readonly配列とタプル

次のことを学びました。

readonly T[] / ReadonlyArray<T>は変更を禁止しますが、読み取りと変更しないメソッドの使用は許可します。
push/spliceのような変更メソッドは型から削除されます。
Readonlyタプルでは、長さと要素の型の両方が固定されます。
as constはさらに踏み込み、リテラル型によるReadonlyタプルを作ります。

次は、Readonlyコレクション型です。

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

よくある質問

「readonly配列とタプル」レッスンは無料ですか？

はい。「readonly配列とタプル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「readonly配列とタプル」で何を学びますか？

配列やタプルを変更メソッドから保護します。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「readonly配列とタプル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る