こんにちは！フロントエンドの現場でコードの設計と格闘し続けているチーフアーキテクトです。
TypeScriptを学び始めると、`string`や`number`といった基本の型にはすぐに慣れますよね。でも、いざ配列（Array）やタプル（Tuple）を扱い始めると、「あれ？意図せず中身を書き換えちゃった！」というミスに遭遇することはありませんか？
今日は、そんな「データの不意な書き換え」を防ぎ、あなたのコードをグッと堅牢にする「イミュータブル（不変）」という魔法の考え方と、それを実現する`ReadonlyArray`と`ReadonlyTuple`について、肩の力を抜いてお話ししますね。
—
配列は「中身が入れ替わる箱」？
まず、身近な例えで考えてみましょう。
普通の配列は、「中身を自由に入れ替えられる収納ボックス」のようなものです。
const shoppingList: string[] = [“りんご”, “バナナ”];
// 現場ではよくある光景：気づかないうちに中身が変わっちゃう
shoppingList.push(“みかん”); // 「みかん」が追加されてしまう
shoppingList[0] = “腐ったバナナ”; // 「りんご」が上書きされてしまう
これ、自分ひとりで書いている分にはいいのですが、チーム開発や規模の大きなアプリになると「誰がいつ書き換えたんだ！？」というトラブルの元になります。
そこで登場するのが「Readonly（読み取り専用）」というガードマンです。
—
ReadonlyArray：中身を守る鉄壁のガード
`ReadonlyArray`を使うと、その配列は「読み取り専用」になり、後から`push`したり、直接書き換えたりすることが一切できなくなります。
書き方はとても簡単です。`readonly`というキーワードを添えるだけ。
// 型定義に readonly をつけると…
const healthyList: readonly string[] = [“サラダ”, “チキン”];
// healthyList.push(“ケーキ”);
// ↑ これを書くと、TypeScriptが「ダメですよ！」と真っ赤な波線で止めてくれます。
// 読み取るだけならOK！
console.log(healthyList[0]); // 「サラダ」を表示するのは安全です。
これだけで、あなたのデータは「誤操作」というリスクから守られました。安心感が違いますよね。
—
ReadonlyTuple：決まった組み合わせを「封印」する
次に「タプル」です。タプルは「1番目は名前（string）、2番目は年齢（number）」のように、順番と型が決まっている配列のことでしたね。
これも`readonly`を使うと、「中身も順番も絶対に動かさない！」という約束を交わすことができます。
// ユーザー情報：[名前, 年齢] というタプル
const user: readonly [string, number] = [“たかし”, 25];
// user[1] = 26;
// ↑ これもエラー！ 「年齢を勝手にいじらせないぞ」という強い意志を感じますね。
例えば、APIから取得した「絶対に変更してはいけない設定値」や「関数の引数として受け取った不変のデータ」を扱うときに、この`ReadonlyTuple`は最強の武器になります。
—
なぜ「不変（イミュータブル）」にするの？
「わざわざ制限をかけるなんて面倒くさい」と感じるかもしれません。でも、現場のエンジニアがなぜこれにこだわるのか、理由をこっそり教えますね。
1. バグが激減する: 「データがどこで書き換わったか」を探すデバッグ作業から解放されます。
2. コードの意図が伝わる: 他の人があなたのコードを見たとき、「あ、このデータは変更しちゃいけないんだな」と一目でわかります。
3. Reactなどのフレームワークと相性抜群: 最近のフロントエンド開発では、状態を直接書き換えず、新しいデータを作ることが推奨されています。`Readonly`はまさにその思想と合致しているんです。
—
最後に：小さな「守り」が大きな安心になる
最初は「エラーが出るのが怖い」と感じるかもしれませんが、TypeScriptがエラーを出してくれるのは、あなたのコードを未然に守ってくれている証拠です。
まずは、関数の引数や、あまり変更しない変数に`readonly`をつけてみてください。最初は違和感があるかもしれませんが、その「守られている感覚」に慣れると、もう元の「書き換え放題のコード」には戻れなくなるはずです。
もし途中でつまずいても大丈夫。私たちエンジニアも、最初はみんな同じところで立ち止まりました。ゆっくり、自分のペースで「堅牢なコード」への一歩を踏み出していきましょう。
あなたのコードが、今日もバグなく、美しく動きますように！応援しています。
コメント