diff --git a/docs/2-browser-apps/02-constant/_samples/answer/index.html b/docs/2-browser-apps/02-reference/_samples/answer/index.html similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/answer/index.html rename to docs/2-browser-apps/02-reference/_samples/answer/index.html diff --git a/docs/2-browser-apps/02-constant/_samples/answer/script.js b/docs/2-browser-apps/02-reference/_samples/answer/script.js similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/answer/script.js rename to docs/2-browser-apps/02-reference/_samples/answer/script.js diff --git a/docs/2-browser-apps/02-constant/_samples/object-mutated-by-function/index.html b/docs/2-browser-apps/02-reference/_samples/object-mutated-by-function/index.html similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/object-mutated-by-function/index.html rename to docs/2-browser-apps/02-reference/_samples/object-mutated-by-function/index.html diff --git a/docs/2-browser-apps/02-constant/_samples/object-mutated-by-function/script.js b/docs/2-browser-apps/02-reference/_samples/object-mutated-by-function/script.js similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/object-mutated-by-function/script.js rename to docs/2-browser-apps/02-reference/_samples/object-mutated-by-function/script.js diff --git a/docs/2-browser-apps/02-constant/_samples/reference/index.html b/docs/2-browser-apps/02-reference/_samples/reference/index.html similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/reference/index.html rename to docs/2-browser-apps/02-reference/_samples/reference/index.html diff --git a/docs/2-browser-apps/02-constant/_samples/reference/script.js b/docs/2-browser-apps/02-reference/_samples/reference/script.js similarity index 100% rename from docs/2-browser-apps/02-constant/_samples/reference/script.js rename to docs/2-browser-apps/02-reference/_samples/reference/script.js diff --git a/docs/2-browser-apps/02-constant/index.md b/docs/2-browser-apps/02-reference/index.md similarity index 74% rename from docs/2-browser-apps/02-constant/index.md rename to docs/2-browser-apps/02-reference/index.md index 295226c48..9432fe82d 100644 --- a/docs/2-browser-apps/02-constant/index.md +++ b/docs/2-browser-apps/02-reference/index.md @@ -1,5 +1,5 @@ --- -title: 定数とオブジェクトの参照 +title: オブジェクトの参照 --- import CodeBlock from '@theme/CodeBlock'; @@ -7,43 +7,6 @@ import Term from "@site/src/components/Term"; import ViewSource from "@site/src/components/ViewSource"; import Answer from "@site/src/components/Answer"; -## 定数 - -これまで、変数の宣言には `let` キーワードを使用してきました。ところが、JavaScript の変数は、大抵初回代入以降は再代入が行われません。 - -再代入が行われない変数は `const` を用いて宣言することができます。このようにして宣言された変数を定数と呼び、定数への代入は宣言時にしか行えません。 - -```javascript -// let で宣言した変数は再代入できる -let variable = 1; -variable = 2; - -const constant = 1; -// const で宣言した変数に再代入しようとするとエラー -// constant = 2; -``` - -:::tip `let` と `const` - -ほとんどの場合、`const` が用いられたプログラムは `let` に書き換えても動作します。それでは、あえて `const` を用いる理由は何なのでしょうか。 - -JavaScript において、それはコードを読んだ際に読みやすいからです。`const` で定義されている変数なら、宣言文さえ見れば変数の中に入っている値を知ることができます。`const` が使用できる場所では、基本的に全て `const` を用いるようにしましょう。 - -::: - -:::info オブジェクトと `const` - -`const` による宣言で禁止されるのはその変数への代入だけであり、オブジェクトのプロパティへの代入はこれにあたりません。 - -```javascript -const person = { name: "田中", age: 18 }; -person.name = "佐藤"; // OK -// 変数自体への再代入はできない -// person = { name: "佐藤", age: 20 }; -``` - -::: - ## 参照 [オブジェクト](../../1-trial-session/11-object/index.md)で扱ったように、JavaScript の値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。 @@ -73,6 +36,12 @@ document.write(object1.age); 2 行目では、変数 `object1` に代入されている参照が `object2` にコピーされます。これにより、同じオブジェクトを参照する変数が 2 つできます。よって、`object1.age` と `object2.age` は同じものになるのです。 +:::tip +上で説明したように、オブジェクトを変数に代入するとき、実際に代入されているのはオブジェクトの**参照**です。 +そのため、`const` による宣言で禁止されるのはその変数への代入だけであり、オブジェクトのプロパティへの代入はこれにあたりません。 +`const`で宣言しているにもかかわらず、そのプロパティが書き換わっていることがあるので注意しましょう。 +::: + ## ネストされたオブジェクト オブジェクトの中に別のオブジェクトが格納されている場合を考えてみましょう。 diff --git a/docs/2-browser-apps/02-constant/nested-reference.drawio.svg b/docs/2-browser-apps/02-reference/nested-reference.drawio.svg similarity index 100% rename from docs/2-browser-apps/02-constant/nested-reference.drawio.svg rename to docs/2-browser-apps/02-reference/nested-reference.drawio.svg diff --git a/docs/2-browser-apps/02-constant/reference.drawio.svg b/docs/2-browser-apps/02-reference/reference.drawio.svg similarity index 100% rename from docs/2-browser-apps/02-constant/reference.drawio.svg rename to docs/2-browser-apps/02-reference/reference.drawio.svg diff --git a/docs/4-advanced/04-react/index.md b/docs/4-advanced/04-react/index.md index cc8c09ebc..e7c12484f 100644 --- a/docs/4-advanced/04-react/index.md +++ b/docs/4-advanced/04-react/index.md @@ -750,7 +750,7 @@ export default function App() { :::tip React とイミュータビリティ -[定数とオブジェクトの参照](../../2-browser-apps/02-constant/index.md)節で扱ったように、JavaScript オブジェクトは参照として扱われます。React では、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法では React が状態が変化したことを検知できないからです。 +[オブジェクトの参照](../../2-browser-apps/02-reference/index.md)節で扱ったように、JavaScript オブジェクトは参照として扱われます。React では、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法では React が状態が変化したことを検知できないからです。 ```tsx const addTodo = () => { diff --git a/docs/6-exercise/1-basis-of-web/index.md b/docs/6-exercise/1-basis-of-web/index.md index 276db3ee3..7f3706d0f 100644 --- a/docs/6-exercise/1-basis-of-web/index.md +++ b/docs/6-exercise/1-basis-of-web/index.md @@ -356,7 +356,7 @@ function bubbleSort(array) { 本解答例では返り値をarrayに代入していないにも関わらず、arrayの中身が変わってしまいます。なぜでしょうか？ -[**参照の節**](/docs/browser-apps/constant/#参照)で説明したように、これは配列が評価されたときにそれ自身ではなく、配列の参照が得られるからです。関数を実行したときに返り値以外に関数外部に影響を与えることを副作用と呼び、副作用を持たない関数を純粋関数と呼びます。思わぬ副作用を防ぐために有効範囲の広い関数は純粋関数であることが望ましいとされています。また関数のマクロ的役割である「操作のまとまり」として、副作用である外部へのアクセス(画面への表示、インターネットのアクセス、ファイルの入出力など)をひとまとめにする場合は、専用の関数を作成し、それを明示した方がよいとされています。 +[**参照の節**](/docs/browser-apps/reference/)で説明したように、これは配列が評価されたときにそれ自身ではなく、配列の参照が得られるからです。関数を実行したときに返り値以外に関数外部に影響を与えることを副作用と呼び、副作用を持たない関数を純粋関数と呼びます。思わぬ副作用を防ぐために有効範囲の広い関数は純粋関数であることが望ましいとされています。また関数のマクロ的役割である「操作のまとまり」として、副作用である外部へのアクセス(画面への表示、インターネットのアクセス、ファイルの入出力など)をひとまとめにする場合は、専用の関数を作成し、それを明示した方がよいとされています。 また関数の引数以外の可変変数を参照することは参照透過性の妨げになり、デバッグが難しくなるといわれています。 diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js index ad910a5d1..ef17f40b8 100644 --- a/src/components/Term/definitions.js +++ b/src/components/Term/definitions.js @@ -17,8 +17,7 @@ export default { "/docs/trial-session/project/": "プロジェクト", "/docs/trial-session/deploy/": "作ったウェブアプリを公開する", "/docs/browser-apps/inspector/": "ブラウザの開発者ツール", - "/docs/browser-apps/constant/": "定数とオブジェクトの参照", - "/docs/browser-apps/constant/#参照": "定数とオブジェクトの参照", + "/docs/browser-apps/reference/": "オブジェクトの参照", "/docs/exercise/basis-of-web/#副作用と純粋関数の話": "副作用と純粋関数", "/docs/browser-apps/loop/": "繰り返し", "/docs/browser-apps/class/": "クラス", @@ -184,7 +183,8 @@ export default { }, javascriptStringConcatenation: { name: "文字列の結合", - definition: "文字列に加算演算子を使うと、一個目の文字列の後ろに二個目の文字列が追加される。", + definition: + "文字列に加算演算子を使うと、一個目の文字列の後ろに二個目の文字列が追加される。", referencePage: "/docs/trial-session/expressions/#いろいろな演算子", }, javascriptVariable: { @@ -272,7 +272,8 @@ export default { }, javascriptModularization: { name: "モジュール化", - definition: "ひとまとまりの煩雑なものや操作を一つにまとめて、コードを複数のブロックに分解すること。", + definition: + "ひとまとまりの煩雑なものや操作を一つにまとめて、コードを複数のブロックに分解すること。", referencePage: "/docs/trial-session/functions/#モジュール化", }, javascriptObject: { @@ -315,7 +316,7 @@ export default { name: "参照", definition: "値のコピーではなくメモリの場所を指し示す値の形式。オブジェクトや配列を直接評価すると得られる。代入演算子で参照値を渡した場合、二つの変数が同じものを指し示していることになるため、片方を変更するともう片方も変更されてしまう。", - referencePage: "/docs/browser-apps/constant/#参照", + referencePage: "/docs/browser-apps/reference/", }, javascriptSideEffects: { name: "副作用", @@ -468,7 +469,7 @@ export default { name: "ミュータブルとイミュータブル", definition: "オブジェクトの内部が変更可能であるとき、そのオブジェクトはミュータブルであるといい、変更不能である場合はイミュータブルであるという。React などのライブラリでは状態を表すオブジェクトはイミュータブルであることが求められる。これは、状態が変化する際に参照も変化することを保証するためである。", - referencePage: "/docs/browser-apps/constant/", + referencePage: "/docs/browser-apps/reference/", }, }, };