📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
このシリーズでは、ただ内容をなぞるのではなく、「自分がReactを使っていても気づかなかった事実や落とし穴」を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- 純粋性とは？？関数に純粋とかあんの
- 不純な関数がもたらす副作用
🗂 基本情報
- タイトル:コンポーネントを純粋に保つ
- URL: https://ja.react.dev/learn/keeping-components-pure
- カテゴリ: Learn
- 難易度: ★★
- 読了日: 2025-08-17
📌 内容
JavaScript関数は大きく2種類に分けれるらしい。純関数とそれ以外だ。
今回はその純関数について学習した。
純粋性とは？？関数に純粋とかあんの
純関数（pure function）は以下のような特徴を持つ関数をいう。
- 自分が呼び出される前に存在していたものを変更しない。
- 同じ入力をしたら同じ出力を返す。
Reactはすべてのコンポーネントを純関数として定義する前提。
ドキュメントではこれを「数式」で例えていた。
// 数式の例
y = x^2
// コードの例
function squared(x: number): number{
return x * x
}
この数式とコードは同じ動作をする。どちらも同じ値を変数xに入れるといつでも同じ値が返却される。
不純な関数がもたらす副作用
純関数の定義にある「自分が呼び出される前に存在していたものを変更しない。」を満たさない場合、予期しない動作が生まれバグの原因になる。
これを先ほどの数式 “ y = x^2 “ に無理やり当てはめると、
- 1回目にx=2を入力値として呼び出した時は４が返される。
- 2回目にx=2を入力すると8が返される
- 3回目にx=2を入力すると1が返される
のようになる。意味不明な挙動できもい。
そりゃこんな挙動をする関数があればバグの温床になるな。
💡Reactを使うとたまに見る “ StrictMode “ は、不純な関数を検出する機能があるらしい。謎が解けた。
ここでいう “ 不純な関数 “ はその関数の外で定義されたもを変更してしまう。だが、関数内で定義した変数や配列、オブジェクトを関数内でいじるのは問題ないことが多い。これを “ ローカルミューテーション “ という。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料（広告視聴で利用可能）