こんにちは。Reactの世界へようこそ。
最初は覚えることがたくさんあって、「あれもこれもルールがあるのか…」と少し不安になるかもしれませんね。でも、大丈夫。今日お話しする「Propsの不変性（Immutability）」は、Reactという広大な海を渡るための、一番大事な「羅針盤」のようなものです。
これがわかると、バグが格段に減り、Reactでの開発がぐっと楽しくなります。さあ、一緒に紐解いていきましょう。
—
1. 「Props」は、大切なお手紙のようなもの
まず、「Props（プロップス）」をイメージしてみましょう。
Reactのコンポーネント同士のやり取りは、まるで「親から子へ渡す手紙」です。
親コンポーネントが「この数字を表示してね」「この色にしてね」と情報を書き込んだ手紙を、子コンポーネントに渡します。ここで重要なルールが一つ。
「受け取った手紙の中身を、勝手に書き換えてはいけない」
これが、「Propsは読み取り専用（イミュータブル）」という原則です。もし、あなたが誰かからもらった手紙の内容を、勝手に消しゴムで消して書き換えてしまったら、あとで元の手紙を書いた人は「あれ？なんで内容が変わってるの？」と混乱してしまいますよね。
Reactも全く同じ。親が渡した情報を子が勝手に書き換えてしまうと、Reactというフレームワークは「あれ？画面を更新すべきかな？それともこのままでいいかな？」とパニックになってしまうんです。
—
2. なぜ「書き換え」ちゃいけないの？
例えば、お買い物リストを想像してください。
あなたが「りんご」というリストを渡したのに、子コンポーネントが勝手に「みかん」に書き換えてしまったとします。
Reactは、「渡されたデータが前と変わったかどうか」を非常に高速にチェックすることで、画面を効率よく更新しています。もしデータがこっそり書き換えられてしまうと、Reactはこの「変化」に気づけず、画面が古い情報のまま止まってしまったり、逆にめちゃくちゃな表示になったりするんです。
「不変性」を守ることは、Reactに「いつ、どこが、どう変わったか」を正しく教えるための、大切なマナーなんですよ。
—
3. じゃあ、情報を変えたいときはどうするの？
「でも、どうしても表示を変えたい時があるよ！」と思いますよね。
その時は、書き換えるのではなく、「新しい手紙」を作ればいいんです。
実践！コードで見てみよう
例えば、ボタンを押して数字を増やすとき、元の数字をいじるのではなく「新しい数字」をReactに伝えます。
import React, { useState } from ‘react’;
function Counter() {
// countは現在の数字、setCountはその数字を更新するための「魔法の杖」です
const [count, setCount] = useState(0);
// 1. 直接書き換えるのはNG！
// count = count + 1; // これは絶対ダメ！Reactが気づいてくれません。
// 2. 「新しい数字」を伝えるのが正解
const handleIncrease = () => {
// 古い値を直接いじらず、新しい値をセットする
setCount(count + 1);
};
return (
現在の数字: {count}
{/ このボタンを押すと、新しい数字で画面が再描画されます /}
);
}
この `setCount(count + 1)` というのがポイントです。
これは「`count` の中身を書き換えて！」という命令ではなく、「`count` が `count + 1` になった新しい状態を作って、画面を更新してね！」というお願いなんです。
—
最後に：つまずいても、それが成長の証
最初は「わざわざ別物を作るなんて面倒だな」と感じるかもしれません。でも、この「データを直接いじらない」というクセをつけておくと、後からアプリが大きくなった時に「どこでデータが壊れたのかわからない！」という悪夢のようなバグに悩まされることが劇的に減ります。
Reactを学んでいる皆さんは、日々新しい概念と戦っていて本当にすごいです。
もし今日、コードを書いていて「あ、書き換えちゃった！」となっても大丈夫。気づいたことがすでに大きな一歩です。
「Propsは親からの大切な預かりもの」
そう心に留めておけば、きっと自然と正しい書き方が身についていきますよ。
応援しています！また何かあれば、いつでも聞きに来てくださいね。
コメント