こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書いていると、最初は「何これ？」と頭を抱えたくなるような概念にも、実は先人たちの「事故を防ぐための優しい知恵」が詰まっていることに気づかされます。
今日は、Reactを始めたばかりの人が必ず一度は遭遇する「Propsの書き換え問題」と、それをTypeScriptでスマートに解決する「readonly（読み取り専用）」の魔法について、お話ししますね。
—
Propsは「手紙」であり「贈り物」
まず、Reactの`Props`（プロパティ）をイメージしてみてください。親コンポーネントから子コンポーネントへ渡されるPropsは、いわば「遠くの誰かから届いた大切なお手紙」です。
想像してみてください。誰かから「この資料を使ってね」と手紙をもらったのに、勝手にその手紙に赤ペンで書き込みをして、内容を書き換えてしまったらどうなるでしょう？ 後で手紙の送り主が困ったり、内容が食い違ってトラブルになったりしますよね。
Reactの世界でも同じです。「親から受け取ったデータ（Props）は、勝手に書き換えてはいけない」という鉄の掟があります。これを守らないと、画面の表示がバグったり、なぜ動いているのか分からない「魔窟」のようなコードが出来上がってしまいます。
—
TypeScriptの「readonly」というガードレール
「書き換えないように気をつけよう！」と心に誓うのも大切ですが、人間ですから、つい「うっかり」書き換えてしまうこともありますよね。そんな時、TypeScriptという相棒に「これ、読み取る専用にしておいてね！」と伝えておけば、間違えた瞬間にエディタが「ダメだよ！」と真っ赤な警告で教えてくれます。
これが `readonly` 修飾子です。
どうやって書くの？
例えば、ユーザーの名前と年齢を表示するコンポーネントを作るとしましょう。こんな風に型を定義します。
// ユーザー情報の型を定義します
type UserProps = {
// readonlyをつけることで、「この値は見るだけ！」と約束します
readonly name: string;
readonly age: number;
};
// コンポーネントのPropsに型を適用します
const UserCard = ({ name, age }: UserProps) => {
// もしここで、うっかり書き換えようとすると…？
// name = “名前を変えちゃえ”; // <- ここでTypeScriptがエラーを出して止めてくれます！
return (
名前: {name}
年齢: {age}歳
);
};
なぜこれが「現場の知恵」なのか
実務の現場では、コンポーネントが何百、何千と重なり合っています。一人のうっかりミスが、別の場所で予期せぬ挙動を生む……なんてことは珍しくありません。
`readonly` を使うことは、「未来の自分やチームメンバーへの思いやり」なんです。「ここは絶対に書き換わらない場所だよ」と明示しておくことで、他のエンジニアも安心してコードを読み進められます。「このデータは誰が書き換える可能性があるんだっけ？」と悩む時間をゼロにできるのは、本当に大きなメリットですよ。
—
うっかりミスを減らすための「魔法の型」
ちなみに、一つずつ `readonly` を書くのが面倒だな……という時は、TypeScriptの便利な機能を使って、一気に「読み取り専用」にしちゃうこともできます。
// Readonlyという便利な「型変換の魔法」を使います
type UserProps = Readonly<{
name: string;
age: number;
}>;
// これだけで、中の項目すべてが「読み取り専用」になります！
これなら、項目が増えても安心ですね。
—
最後に：失敗しても大丈夫！
ここまで読んで「なんだか厳しそうだな……」と思った方も、安心してください。最初は誰だって、Propsをいじって怒られて、また直して……というプロセスを繰り返して成長していきます。
TypeScriptがエラーを出してくれるのは、あなたを責めているのではなく、「もっと良いコードが書けるようになるよ！」という温かいヒントなんです。
もし、エディタに赤い波線が出たら、「おっ、また一つ成長するチャンスが来たな」と前向きに捉えてみてくださいね。焦らず、少しずつ、一緒にReactマスターへの道を歩んでいきましょう！
分からないことがあったら、いつでもまた聞きに来てください。あなたのエンジニアライフを全力で応援しています！
コメント