initial commit

1 files changed, 155 insertions, 0 deletions

diff --git a/files/ja/web/javascript/reference/operators/property_accessors/index.html b/files/ja/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..6683586246
--- /dev/null
+++ b/files/ja/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,155 @@
+---
+title: プロパティアクセサー
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+  - 演算子
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>プロパティアクセサー</strong>はオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>オブジェクトは実際には<em>連想配列</em> (別名 <em>map</em>、 <em>dictionary</em>、 <em>hash</em>、 <em>lookup table</em>) とみなすことができます。この配列における<em>キー</em>はオブジェクトのプロパティ名です。一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは単なるプロパティであり、言わば、例えば値として {{jsxref("Function")}} オブジェクトのインスタンスへの参照を持っているものです。</p>
+
+<p>プロパティにアクセスするには、ドット表記法とブラケット表記法の2通りがあります。</p>
+
+<h3 id="Dot_notation" name="Dot_notation">ドット表記法</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p><code>property</code> は有効な JavaScript 識別子である必要があります。例えば <code>object.$1</code> は有効ですが、 <code>object.1</code> は有効ではありません。</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>ここでは、 <code>document</code> から "createElement" という名前のメソッドが検索され、呼び出されます。</p>
+
+<p>指数や小数点を持たない数値リテラルにメソッドを使用する場合、メソッド呼び出しをするドットの前に{{glossary("Whitespace", "ホワイトスペース")}}を入れることで、ドットが小数点とみなされることを防ぐことができます。</p>
+
+<pre class="brush: js">77 .toExponential();
+// or
+77
+.toExponential();
+// or
+(77).toExponential();
+// or
+77..toExponential();
+// or
+77.0.toExponential();
+// because 77. === 77.0, no ambiguity</pre>
+
+<h3 id="Bracket_notation" name="Bracket_notation">ブラケット表記法</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p><code>property_name</code> は文字列または{{glossary("Symbol", "シンボル")}}です。この文字列は有効な識別子である必要はなく、任意の値、例えば "<code>1foo</code>", "<code>!bar!</code>", または "<code> </code>" (空白) であっても構いません。</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>これは前の例とまったく同じです。</p>
+
+<p>ブラケット表記法の前には空白を入れることができます。</p>
+
+<pre class="brush: js">document ['createElement']('pre');</pre>
+
+<h3 id="Property_names" name="Property_names">プロパティ名</h3>
+
+<p>プロパティ名は文字列または{{glossary("Symbol", "シンボル")}}です。それ以外の値は、数値を含めて、文字列へ強制変換されます。</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+</pre>
+
+<p>これは、 <code>1</code> が <code>'1'</code> に強制変換されるので、 "value" を出力します。</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p><code>foo</code> と <code>bar</code> は同じ文字列に変換されるので、こちらも "value" を出力します。 <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript エンジンでは、この文字列は "<code>[object Object]</code>" となるでしょう。</p>
+
+<h3 id="Method_binding" name="Method_binding">メソッドのバインド</h3>
+
+<p>メソッドはそのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 <code>this</code> はメソッド内で固定されていません。つまり、 <code>this</code> は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 <code>this</code> は関数呼び出し時に「渡される」ものです。<a href="/ja/docs/JavaScript/Reference/Operators/this#Method_binding">メソッドのバインド</a>を参照してください。</p>
+
+<h3 id="Note_on_eval" name="Note_on_eval"><code>eval</code> におけるメモ</h3>
+
+<p>JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで {{jsxref("eval", "eval()")}} を使用してしまう間違いを犯します。例えば、以下のような構文がたくさんのスクリプトで見られます。</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p><code>eval()</code> は低速であり、可能な限り避けるべきです。また、 <code>strFormControl</code> は ID を必要としますが、フォームコントロールの名前と ID は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。</p>
+
+<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value;
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初回定義。JavaScript 1.0 で実装。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></li>
+</ul>