Delete constant from 2/2 - constant and reference

docs/2-browser-apps/02-constant/index.md → docs/2-browser-apps/02-reference/index.md

@@ -1,49 +1,12 @@
 ---
-title: 定数とオブジェクトの参照
+title: オブジェクトの参照
 ---
 
 import CodeBlock from '@theme/CodeBlock';
 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`で宣言しているにもかかわらず、そのプロパティが書き換わっていることがあるので注意しましょう。
+:::
+
 ## ネストされたオブジェクト
 
 オブジェクトの中に別のオブジェクトが格納されている場合を考えてみましょう。

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 = () => {

docs/6-exercise/1-basis-of-web/index.md

@@ -356,7 +356,7 @@ function bubbleSort(array) {
 
 本解答例では返り値をarrayに代入していないにも関わらず、arrayの中身が変わってしまいます。なぜでしょうか？
 
-[**参照の節**](/docs/browser-apps/constant/#参照)で説明したように、これは配列が評価されたときにそれ自身ではなく、配列の<Term strong type="javascriptReference">参照</Term>が得られるからです。関数を実行したときに返り値以外に関数外部に影響を与えることを<Term strong type="javascriptSideEffects">副作用</Term>と呼び、<Term strong type="javascriptSideEffects">副作用</Term>を持たない関数を<Term strong type="javascriptPureFunction">純粋関数</Term>と呼びます。思わぬ<Term strong type="javascriptSideEffects">副作用</Term>を防ぐために有効範囲の広い関数は<Term strong type="javascriptPureFunction">純粋関数</Term>であることが望ましいとされています。また関数のマクロ的役割である「操作のまとまり」として、<Term strong type="javascriptSideEffects">副作用</Term>である外部へのアクセス(画面への表示、インターネットのアクセス、ファイルの入出力など)をひとまとめにする場合は、専用の関数を作成し、それを明示した方がよいとされています。
+[**参照の節**](/docs/browser-apps/reference/)で説明したように、これは配列が評価されたときにそれ自身ではなく、配列の<Term strong type="javascriptReference">参照</Term>が得られるからです。関数を実行したときに返り値以外に関数外部に影響を与えることを<Term strong type="javascriptSideEffects">副作用</Term>と呼び、<Term strong type="javascriptSideEffects">副作用</Term>を持たない関数を<Term strong type="javascriptPureFunction">純粋関数</Term>と呼びます。思わぬ<Term strong type="javascriptSideEffects">副作用</Term>を防ぐために有効範囲の広い関数は<Term strong type="javascriptPureFunction">純粋関数</Term>であることが望ましいとされています。また関数のマクロ的役割である「操作のまとまり」として、<Term strong type="javascriptSideEffects">副作用</Term>である外部へのアクセス(画面への表示、インターネットのアクセス、ファイルの入出力など)をひとまとめにする場合は、専用の関数を作成し、それを明示した方がよいとされています。
 
 また関数の引数以外の可変変数を参照することは<Term strong type="javascriptReferenceTransparency">参照透過性</Term>の妨げになり、デバッグが難しくなるといわれています。
 

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/",
     },
   },
 };