Statements/const を更新 (#2207)

- Markdown化
- 2021/07/21 時点の英語版に同期

2 files changed, 143 insertions, 155 deletions

diff --git a/files/ja/web/javascript/reference/statements/const/index.html b/files/ja/web/javascript/reference/statements/const/index.html
deleted file mode 100644
index 46906df6db..0000000000
--- a/files/ja/web/javascript/reference/statements/const/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: const
-slug: Web/JavaScript/Reference/Statements/const
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Language feature
-  - Reference
-  - Statement
-  - constants
-translation_of: Web/JavaScript/Reference/Statements/const
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>定数 (const) は、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。定数の値は、再代入による変更はできず、再宣言もできません。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre>
-
-<dl>
- <dt><code><var>nameN</var></code></dt>
- <dd>定数名。正当な{{Glossary("identifier", "識別子")}}ならは、どんなものでもかまいません。</dd>
- <dt><code><var>valueN</var></code></dt>
- <dd>定数の値。正当な<a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a>ならば、どんなものでもかまいません。</dd>
-</dl>
-
-<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文は、変数の宣言にも使用できます。</p>
-
-<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 };
-/* これは、値が 10 の 'bar' という名前の変数を作成します。*/</pre>
-
-<dl>
-</dl>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには<strong>なりません</strong>。</p>
-
-<p>定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています)</p>
-
-<p><strong><code>const</code> 宣言</strong>は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は<strong>不変ではなく</strong>、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p>
-
-<p>「<a href="/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">一時的なデッドゾーン</a>」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と <code>const</code> の両方に適用されます。</p>
-
-<p>定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_const_usage" name="Basic_const_usage">基本的な定数の使い方</h3>
-
-<p>定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。</p>
-
-<pre class="brush: js; notranslate">// MY_FAV を定数として定義して、その値を 7 にします。
-const MY_FAV = 7;
-
-// これはエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_FAV = 20;
-
-// MY_FAV は 7 です。
-console.log('my favorite number is: ' + MY_FAV);
-
-// 定数を再宣言しようとするとエラーを投げます。
-// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
-const MY_FAV = 20;
-
-// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します。
-var MY_FAV = 20;
-
-// これもエラーを投げます。
-let MY_FAV = 20;
-
-</pre>
-
-<h3 id="Block_scoping" name="Block_scoping">ブロックスコープ</h3>
-
-<p>ブロックスコープの性質に注意することが重要です。</p>
-
-<pre class="brush: js notranslate">if (MY_FAV === 7) {
-  // これは問題なく、ブロックスコープの MY_FAV 変数を作成します。
-  // （ブロックスコープの変数を宣言する let も問題なく機能します）
-  let MY_FAV = 20;
-
-  // MY_FAV は現在 20 です。
-  console.log('my favorite number is ' + MY_FAV);
-
-  // これはグローバルコンテキストに巻き上げられ、エラーを投げます。
-  var MY_FAV = 20;
-}
-
-// MY_FAV は 7 のままです。
-console.log('my favorite number is ' + MY_FAV);
-</pre>
-
-<h3 id="const_needs_to_be_initialized" name="const_needs_to_be_initialized">定数は初期化が必要です。</h3>
-
-<pre class="brush: js notranslate">// エラーが投げられます。
-// Uncaught SyntaxError: Missing initializer in const declaration
-
-const FOO;
-</pre>
-
-<h3 id="const_in_objects_and_arrays" name="const_in_objects_and_arrays">オブジェクトと配列の定数</h3>
-
-<p>定数はオブジェクトや配列に対しても動作します。</p>
-
-<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'};
-
-// オブジェクトの上書きはエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_OBJECT = {'OTHER_KEY': 'value'};
-
-// しかしながら、オブジェクトのキーは保護されていないので、
-// 次の文は問題なく実行されます。
-MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。
-
-// 配列も同じです。
-const MY_ARRAY = [];
-// 配列にアイテムをプッシュすることができます。
-MY_ARRAY.push('A'); // ["A"]
-// しかしながら、新しい配列を変数に代入するとエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_ARRAY = ['B'];</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.statements.const")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Statements/var", "var")}}</li>
- <li>{{jsxref("Statements/let", "let")}}</li>
- <li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">JavaScript ガイド - 『値、変数、リテラル』 - 定数</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/statements/const/index.md b/files/ja/web/javascript/reference/statements/const/index.md
new file mode 100644
index 0000000000..2f1f4dbac9
--- /dev/null
+++ b/files/ja/web/javascript/reference/statements/const/index.md
@@ -0,0 +1,143 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Language feature
+  - Reference
+  - Statement
+  - constants
+browser-compat: javascript.statements.const
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+{{jsSidebar("Statements")}}
+
+定数は、[`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。
+
+{{EmbedInteractiveExample("pages/js/statement-const.html")}}
+
+## 構文
+
+```js
+const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
+```
+
+- `nameN`
+  - : 定数名。正当な{{Glossary("identifier", "識別子")}}ならば、何でもかまいません。
+- `valueN`
+  - : 定数の値。正当な[式](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)ならば、関数式を含め、何でもかまいません。
+
+[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)構文を使用して、定数を宣言することもできます。
+
+```js
+const { bar } = foo; // where foo = { bar:10, baz:12 };
+/* これは、値が 10 の 'bar' という名前の変数を作成します。*/
+```
+
+## 解説
+
+この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには**なりません**。
+
+定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています。)
+
+**`const` 宣言**は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は**不変ではなく**、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p>
+
+「[一時的なデッドゾーン](/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone)」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と `const` の両方に適用されます。
+
+定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。
+
+## 例
+
+### 基本的な定数の使い方
+
+定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。
+
+```js
+// MY_FAV を定数として定義して、その値を 7 にします
+const MY_FAV = 7;
+
+// これはエラーが発生します - Uncaught TypeError: Assignment to constant variable.
+MY_FAV = 20;
+
+// MY_FAV は 7 です
+console.log('my favorite number is: ' + MY_FAV);
+
+// 定数を再宣言しようとするとエラーが発生します
+// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します
+var MY_FAV = 20;
+
+// これもエラーが発生します
+let MY_FAV = 20;
+```
+
+### ブロックスコープ
+
+ブロックスコープの性質に注意することが重要です。
+
+```js
+if (MY_FAV === 7) {
+  // これは問題なく、ブロックスコープの MY_FAV 変数を作成します
+  // (ブロックスコープの変数を宣言する let も問題なく機能します)
+  let MY_FAV = 20;
+
+  // MY_FAV は現在 20 です。
+  console.log('my favorite number is ' + MY_FAV);
+
+  // これはグローバルコンテキストに巻き上げられ、エラーが発生します
+  var MY_FAV = 20;
+}
+
+// MY_FAV は 7 のままです
+console.log('my favorite number is ' + MY_FAV);
+```
+
+### 定数は初期化が必要
+
+```js
+// エラーが発生します
+// Uncaught SyntaxError: Missing initializer in const declaration
+
+const FOO;
+```
+
+### オブジェクトと配列の定数
+
+定数はオブジェクトや配列に対しても動作します。
+
+```js
+const MY_OBJECT = {'key': 'value'};
+
+// オブジェクトの上書きはエラーを投げます。
+// Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// しかしながら、オブジェクトのキーは保護されていないので、
+// 次の文は問題なく実行されます。
+MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。
+
+// 配列も同じです。
+const MY_ARRAY = [];
+// 配列に要素をプッシュすることができます。
+MY_ARRAY.push('A'); // ["A"]
+// しかしながら、新しい配列を変数に代入するとエラーを投げます。
+// Uncaught TypeError: Assignment to constant variable.
+MY_ARRAY = ['B'];
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Statements/var", "var")}}
+- {{jsxref("Statements/let", "let")}}
+- [JavaScript ガイドの定数](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants)