こんにちは。TypeScriptの世界へようこそ。
「型」という言葉を聞くと、なんだか数学の授業みたいで身構えてしまうかもしれませんね。でも大丈夫。TypeScriptは、あなたのコードを「守ってくれる頼もしい相棒」だと思ってください。
今日は、その中でも特に「えっ、勝手に書き換えられちゃ困るんだけど！」という時に、あなたを助けてくれる「読み取り専用（Readonly）」の魔法についてお話しします。
—
1. 配列は「お買い物リスト」だと思ってください
まずは普通の配列を想像してみましょう。スーパーで買い出しをするときにメモする「お買い物リスト」です。
// 普通の配列：いつでも書き換え可能
const shoppingList: string[] = [“牛乳”, “卵”, “パン”];
// 「やっぱり牛乳じゃなくてジュースにしよう！」と書き換えるのは簡単
shoppingList[0] = “ジュース”;
// 実行してもTypeScriptは何も文句を言いません
普通のお買い物リストなら、これでもいいんです。でも、プログラミングの世界では「ここには絶対に勝手に触らないでね！」という重要なリストが存在します。誰かがうっかりリストを書き換えて、レジで「あれ？頼んだものと違う！」となるのを防ぎたいですよね。
そんな時に登場するのが `ReadonlyArray` です。
—
2. ReadonlyArrayで「書き込み禁止」にする
`ReadonlyArray` を使うと、そのリストは「閲覧専用」になります。たとえるなら、ガラスケースの中に展示された貴重なコレクションのようなもの。見ることはできるけれど、中身を入れ替えることはできません。
// 読み取り専用の配列を作成
const preciousItems: ReadonlyArray
// 試しに書き換えようとすると…？
// preciousItems[0] = “ただの石ころ”;
// ❌ エラー！「インデックスシグネチャに読み取り専用が含まれているため、代入できません」と怒られます
TypeScriptは、あなたがうっかり大事なリストを壊そうとした瞬間に、「ちょっと待って！」と止めてくれるんです。なんて優しいんでしょうか。
—
3. 「constアサーション」という裏技
さて、毎回 `ReadonlyArray
配列の最後に `as const` をつけるだけで、TypeScriptは「あ、これもう中身変えないやつだね。じゃあ全部読み取り専用にしておくよ！」と察してくれます。
// as const をつけるだけで、最強の読み取り専用リストになる
const settings = [“音量”, “明るさ”, “通知”] as const;
// settings[0] = “ミュート”;
// ❌ もちろんエラー！
この `as const` は、チーム開発で「絶対に値を変更させたくない設定値」を定義するときによく使います。一度書いたら最後、誰にも書き換えられない鉄壁のリストができるわけです。
—
4. なぜ「読み取り専用」がそんなに大事なの？
「別に書き換えられるようにしておけば楽じゃない？」と思うかもしれません。でも、大きなアプリを作るとき、「どこでデータが書き換わったのか分からなくなる」というバグが一番厄介なんです。
- 安心感: 「この関数に渡したリストは、絶対に中身が変わらない」という保証があるだけで、安心して複雑なロジックを書けるようになります。
- バグの早期発見: 「あれ、ここ書き換えたつもりないのに値が変わってる！」という、夜通しデバッグするような悲劇を未然に防げます。
—
最後に：つまずいても大丈夫
TypeScriptでエラーが出るのは、あなたのコードが悪いからではありません。「ここ、ちょっと危ないよ」とTypeScriptが親切に教えてくれているサインです。
最初は「エラーばっかりで面倒くさいな」と感じるかもしれませんが、そのエラーのおかげで、あなたは将来の自分自身が抱えるかもしれない大きなバグを、今この瞬間に一つ消し去っているんです。
まずは `const` で作った配列の最後に、そっと `as const` をつけてみてください。あなたのコードが、少しだけ「強固で賢いもの」に進化しますよ。
これからも、一緒に一歩ずつ、TypeScriptの世界を楽しんでいきましょうね！
コメント