@@ -20,8 +20,8 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
20
20
21
21
コンピュータサイエンス(特に関数型プログラミングの世界)では、[ 純関数 (pure function)] ( https://wikipedia.org/wiki/Pure_function ) とは、以下のような特徴を持つ関数のことを指します。
22
22
23
- * ** 自分の仕事に集中する。 ** 呼び出される前に存在していたオブジェクトや変数を変更しない。
24
- * ** 同じ入力には同じ出力。 ** 同じ入力を与えると、純関数は常に同じ結果を返す。
23
+ * ** 自分の仕事に集中する** 。 呼び出される前に存在していたオブジェクトや変数を変更しない。
24
+ * ** 同じ入力には同じ出力** 。 同じ入力を与えると、純関数は常に同じ結果を返す。
25
25
26
26
皆さんは純関数の例をひとつ、すでにご存知のはずです。数学における関数です。
27
27
@@ -31,7 +31,7 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
31
31
32
32
もし <Math ><MathI >x</MathI > = 3</Math > ならば <Math ><MathI >y</MathI > = 6</Math >。常にです。
33
33
34
- もし <Math ><MathI >x</MathI > = 3</Math > ならば、 <MathI >y</MathI > が現在時刻や株式市況に影響されてたまに <Math >9</Math > や <Math >–1</Math > や <Math >2.5</Math > になったりはしません。
34
+ もし <Math ><MathI >x</MathI > = 3</Math > ならば、<MathI >y</MathI > が現在時刻や株式市況に影響されてたまに <Math >9</Math > や <Math >–1</Math > や <Math >2.5</Math > になったりはしません。
35
35
36
36
もし <Math ><MathI >y</MathI > = 2<MathI >x</MathI ></Math > かつ <Math ><MathI >x</MathI > = 3</Math > なら、<MathI >y</MathI > は* どんな場合でも常に* <Math >6</Math > になるのです。
37
37
@@ -43,9 +43,9 @@ function double(number) {
43
43
}
44
44
```
45
45
46
- 上記の例では、 ` double ` 関数は** 純関数** です。もし ` 3 ` を渡すと、` 6 ` を返しますね。常にです。
46
+ 上記の例では、` double ` 関数は** 純関数** です。もし ` 3 ` を渡すと、` 6 ` を返しますね。常にです。
47
47
48
- React はこのような概念に基づいて設計されています。** React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 ** つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
48
+ React はこのような概念に基づいて設計されています。** React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています** 。 つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
49
49
50
50
<Sandpack >
51
51
@@ -151,7 +151,7 @@ export default function TeaSet() {
151
151
152
152
まだ全部を使ったことはないかもしれませんが、React には [ props] ( /learn/passing-props-to-a-component ) 、[ state] ( /learn/state-a-components-memory ) 、そして[ コンテクスト] ( /learn/passing-data-deeply-with-context ) という、レンダー中に読み取ることができる 3 種類の入力があります。これらの入力は常に読み取り専用として扱うようにしてください。
153
153
154
- ユーザー入力に応じて何かを * 変更* したい場合は、変数に書き込む代わりに、[ state を設定する] ( /learn/state-a-components-memory ) ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
154
+ ユーザ入力に応じて何かを * 変更* したい場合は、変数に書き込む代わりに、[ state を設定する] ( /learn/state-a-components-memory ) ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
155
155
156
156
React には "Strict Mode" という機能があり、開発中には各コンポーネント関数を 2 回呼び出します。** 関数呼び出しを 2 回行うことで、Strict Mode はこれらのルールに反するコンポーネントを見つけるのに役立ちます。**
157
157
@@ -165,7 +165,7 @@ Strict Mode は本番環境では影響を与えないため、ユーザが使
165
165
166
166
上記の例では、問題はコンポーネントがレンダーの最中に* 既存* の変数を変更していた点にありました。このような変更は、少し恐ろしい言い方では ** "ミューテーション(変異; mutation)"** と呼ばれます。純関数は、関数のスコープ外の変数や、呼び出し前に作成されたオブジェクトをミューテートしません。そういうことをしてしまった関数は「不純」になってしまいます!
167
167
168
- しかし、** レンダー中に* その場で* 作成した変数やオブジェクトであれば、書き換えることは全く問題ありません。 ** この例では、` [] ` 配列を作成して ` cups ` 変数に代入し、それに 12 個のカップを ` push ` しています:
168
+ しかし、** レンダー中に* その場で* 作成した変数やオブジェクトであれば、書き換えることは全く問題ありません** 。 この例では、` [] ` 配列を作成して ` cups ` 変数に代入し、それに 12 個のカップを ` push ` しています:
169
169
170
170
<Sandpack >
171
171
@@ -216,8 +216,8 @@ React では、**副作用は通常、[イベントハンドラ](/learn/respondi
216
216
<Recap >
217
217
218
218
* コンポーネントは純粋である必要がある。すなわち:
219
- * ** コンポーネントは自分の仕事に集中する。 ** レンダー前に存在していたオブジェクトや変数を書き換えない。
220
- * ** 入力が同じなら出力も同じ。 ** 同じ入力に対しては、常に同じ JSX を返すようにする。
219
+ * ** コンポーネントは自分の仕事に集中する** 。 レンダー前に存在していたオブジェクトや変数を書き換えない。
220
+ * ** 入力が同じなら出力も同じ** 。 同じ入力に対しては、常に同じ JSX を返すようにする。
221
221
* レンダーはいつでも起こる可能性があるため、コンポーネントは相互の呼び出し順に依存してはいけない。
222
222
* コンポーネントがレンダーに使用する入力値を書き換えない。これには props、state、コンテクストも含まれる。画面を更新するためには既存のオブジェクトを書き換えるのではなく、代わりに [ state を設定する] ( /learn/state-a-components-memory ) 。
223
223
* コンポーネントのロジックはできるだけコンポーネントが返す JSX の中で表現する。何かを「変える」必要がある場合、通常はイベントハンドラで行う。最終手段として ` useEffect ` を使用する。
0 commit comments