diff options
Diffstat (limited to 'files/ja/learn/javascript/objects/json/index.html')
| -rw-r--r-- | files/ja/learn/javascript/objects/json/index.html | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..c72a38744b --- /dev/null +++ b/files/ja/learn/javascript/objects/json/index.html @@ -0,0 +1,357 @@ +--- +title: JSON データの操作 +slug: Learn/JavaScript/Objects/JSON +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JSON + - JavaScript + - Learn + - Objects + - Tutorial + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JSON内のデータの扱い方、JSON 文字列の作成方法について理解できること。</td> + </tr> + </tbody> +</table> + +<h2 id="No_really_what_is_JSON" name="No_really_what_is_JSON">JSON とは何か</h2> + +<p>{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、<a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a> によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)したり生成したりする機能があります。</p> + +<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> + +<div class="note"> +<p><strong>注記</strong>: 文字列をネイティブオブジェクトへ変換することは<em>デシリアライゼーション (deserialization)</em> と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは<em>シリアライゼーション (serialization) </em>と呼ばれています。</p> +</div> + +<p>JSON 文字列はそれ自身をファイルとして格納することもできます。それは {{glossary("MIME type")}} が <code>application/json</code> で、<code>.json</code> という拡張子の付いたただのテキストファイルです。</p> + +<h3 id="JSON_structure" name="JSON_structure">JSON の構造</h3> + +<p>上で説明したように、JSON は JavaScript オブジェクトにとても似ているフォーマットを持った文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型(文字列、数値、配列、ブーリアンやその他のリテラル型)を使うことができます。これにより、以下のように階層的にデータを構成することができます。</p> + +<pre class="brush: json notranslate">'{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}'</pre> + +<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes.homeTown +superHeroes['active']</pre> + +<p>さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中2番目のヒーローの 3番目の能力を参照する場合は、以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>まず、変数名<code>superHeroes</code> を指定します。</li> + <li>その中の <code>members</code> プロパティへアクセスしたいので、<code>["members"]</code>と指定します。</li> + <li><code>members</code> にはオブジェクトの配列が格納されています. ここでは、配列内の 2番目のオブジェクトへアクセスするので、<code>[1]</code>を指定します。</li> + <li>そのオブジェクト内で、<code>powers</code> プロパティへアクセスするため, <code>["powers"]</code>と指定します。</li> + <li><code>powers</code> プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3番目が欲しいので、<code>[2]</code>と記述します。</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 上記の JSON は <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> で参照することができます。(ページ内の <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a> を参照してください)。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。</p> +</div> + +<h3 id="Arrays_as_JSON" name="Arrays_as_JSON">JSON 配列</h3> + +<p>上記で、JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。配列を JSON との間で変換することもできます。以下も有効な JSON です。例:</p> + +<pre class="brush: json notranslate">'[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]'</pre> + +<p>これも有効な JSON であり、パースしたデータには配列のインデックスを指定するだけです。例えば、<code>[0]["powers"][0]</code>のように表記できます。</p> + +<h3 id="Other_notes" name="Other_notes">その他の注意点</h3> + +<ul> + <li>JSON は指定されたデータフォーマットの純粋な文字列であり、プロパティのみを含むことができ、メソッドを含むことができません。</li> + <li>JSON では文字列とプロパティ名をダブルクォートで括る必要があります。シングルクォートは、JSON 文字列全体を囲む以外では無効です。</li> + <li>1 つだけカンマやコロンが抜けているだけで無効な JSON になりえます。なので、使用しているデータが有効であるかについては注意してみなければなりません(機械的に作った JSON のほうが、プログラムに問題がなければ、エラーは少なく済みます)。 <a href="http://jsonlint.com/">JSONLint</a> のようなアプリケーションを使って妥当性検査をすることもできます。</li> + <li>JSON は配列やオブジェクトに限らず JSON内に含むことができるデータ型のデータだけでも有効な JSON となります。 例えば、1 つだけの文字列や数値も有効な JSON です。</li> + <li>プロパティがクォートで括られていない JavaScript コードと異なり、JSON では、クォートされた文字列だけがプロパティとして使われます。</li> +</ul> + +<h2 id="Active_learning_Working_through_a_JSON_example" name="Active_learning_Working_through_a_JSON_example">手を動かして学ぼう: JSON をさわってみる</h2> + +<p>それでは、Web サイト上でどのように JSON 形式のデータを使うことができるか例を通して見てみましょう。</p> + +<h3 id="Getting_started" name="Getting_started">はじめに</h3> + +<p>まず、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な形式の HTML です。</p> + +<pre class="brush: html notranslate"><header> +</header> + +<section> +</section></pre> + +<p>他には、この演習で書く JavaScript を含んだ {{HTMLElement("script")}} 要素があります。この時点では、{{HTMLElement("header")}} 要素と {{HTMLElement("section")}} 要素 を取得して、変数へ代入している 2行コードのみが書かれています。</p> + +<pre class="brush: js notranslate">const header = document.querySelector('header'); +const section = document.querySelector('section');</pre> + +<p>演習用の JSON データは <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a> に用意してあります。</p> + +<p>そのデータを演習ページに読み込んで、それを表示するのにいくらかの DOM操作を行います。最終的には、以下の画像のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Obtaining_the_JSON" name="Obtaining_the_JSON">JSON の取得</h3> + +<p>JSON を取得するには、{{domxref("XMLHttpRequest")}} (しばしば <strong>XHR</strong> と呼ばれる) という API を使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用してサーバからリソース (例：画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み込みせずに、小さな部分のコンテンツを更新することができます。これにより、よりレスポンシブな Web ページを作成できますが、それをもっと詳細に教えるのはこの記事の範囲を超えています。</p> + +<ol> + <li>まず、取得したい JSON がある URL を変数へ代入します。次のコードを JavaScript の最後の行へ追加してください。 + <pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> requestURL <span class="operator token">=</span> <span class="string token">'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'</span><span class="punctuation token">;</span></code></pre> + </li> + <li>HTTP リクエストを作成するのに、<code>new</code> を使って <code>XMLHttpRequest</code> から新しいリクエストオブジェクトをつくる必要があります。先ほどのコードの下に、次のコードを追加してください。 + <pre class="brush: js notranslate">let request = new XMLHttpRequest();</pre> + </li> + <li>新しいリクエストを開始するのには <code><a href="/ja/docs/Web/API/XMLHttpRequest/open">open()</a></code> メソッドを使います。 次のコードを追加してください。 + <pre class="brush: js notranslate">request.open('GET', requestURL);</pre> + + <p>このメソッドは最低２つのパラメータを引数として取ります（他に任意の引数を与えることもできます)。今回の簡単な例では、次の２つの必須パラメータのみを利用します。</p> + + <ul> + <li>リクエストを開始する際に HTTP のメソッドを決める必要があります。今回のケースでは、単純にデータを取得するだけですので <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> が良いでしょう。</li> + <li>リクエストを送る先の URL。今回は JSON ファイルが置かれている URL です。</li> + </ul> + </li> + <li>次に、以下の２行のコードを追加してください。XHR オブジェクトがサーバーから返されるデータを判断できるように <code><a href="/ja/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> に JSON を指定します。すると、ブラウザ側で JavaScript オブジェクトへ変換してくれます。それから、<code><a href="/ja/docs/Web/API/XMLHttpRequest/send">send()</a></code> メソッドでリクエストを送信します。 + <pre class="brush: js notranslate">request.responseType = 'json'; +request.send();</pre> + </li> + <li>最後に、サーバーからのレスポンスを待ち、それを処理するコードを用意するので、以下のコードをこれまでのコードの下に追加してください。 + <pre class="brush: js notranslate">request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>ここでは、先ほどのリクエストに対するレスポンス (<code><a href="/ja/docs/Web/API/XMLHttpRequest/response">response</a></code> プロパティから取得できます) を <code>superHeroes</code> という変数へ代入しています。つまり、この変数に JSON を元に生成された JavaScript オブジェクトが格納されているということです! それから 2 つの関数をそのオブジェクトを引数として与えて呼び出しています。最初の関数は引数のデータを <code><header></code> へ埋め込み、2 つ目は各ヒーローごとのインフォメーションカードを作り、<code><section></code> へ埋め込みます。</p> + +<p>上記の処理は、リクエストオブジェクトで load イベントが発生した時に呼び出される関数 (<code><a href="/ja/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> を参照) に記述しました。このイベントはレスポンスがうまく取得できた場合に呼び出されるので、 <code>request.response</code> を使って何か処理をしようとしたときに、それが必ず利用できることが保証されています。</p> + +<h3 id="Populating_the_header" name="Populating_the_header">ヘッダーへの値のセット</h3> + +<p>ここまでで、JSON の取得と JavaScript オブジェクトへの変換ができました、先ほどの 2 つの関数を実装して使ってみましょう。まずはじめに、以下のコードをこれまでのコードの下に追加してください。</p> + +<pre class="brush: js notranslate">function populateHeader(obj) { + const myH1 = document.createElement('h1'); + myH1.textContent = obj['squadName']; + header.appendChild(myH1); + + const myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + obj['homeTown'] + ' // Formed: ' + obj['formed']; + header.appendChild(myPara); +}</pre> + +<p>まず、<code><a href="/ja/docs/Web/API/Document/createElement">createElement()</a></code> で {{HTMLElement("h1")}} 要素を生成、その <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティにそのオブジェクトの <code>squadName</code> プロパティをセット、そしてそれを <code><a href="/ja/docs/Web/API/Node/appendChild">appendChild()</a></code> を使いヘッダーに追加します。そして要素の生成、テキストのセット、ヘッダーへの追加という同じような操作をパラグラフ要素でも行います。セットするテキストの値が <code>homeTown</code> と <code>formed</code> プロパティの文字列を結合したものであるという点だけが異なります。</p> + +<h3 id="Creating_the_hero_information_cards" name="Creating_the_hero_information_cards">ヒーローインフォメーションカードの作成</h3> + +<p>次に、以下の関数をコードの下へ追記してください。この関数はスーパーヒーローカードの作成と画面表示を行います。</p> + +<pre class="brush: js notranslate">function showHeroes(jsonObj) { + const heroes = jsonObj['members']; + + for (let i = 0; i < heroes.length; i++) { + const myArticle = document.createElement('article'); + const myH2 = document.createElement('h2'); + const myPara1 = document.createElement('p'); + const myPara2 = document.createElement('p'); + const myPara3 = document.createElement('p'); + const myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + const superPowers = heroes[i].powers; + for (let j = 0; j < superPowers.length; j++) { + const listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>始めに、JavaScript オブジェクトの <code>members</code> プロパティを新しい変数に保存します。<br> + この配列は複数のオブジェクトを持ち、オブジェクトはそれぞれのヒーローについての情報を持ちます。</p> + +<p>次に、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>を使って配列の個々のオブジェクトについてループしていきます。それぞれについて:</p> + +<ol> + <li>新しい要素をいくつか作ります: <code><article></code> 1つ、<code><h2></code> 1つ、3つの <code><p></code> と1つの <code><ul></code> です。</li> + <li><code><h2></code> の中身を今のヒーローの名前 (<code>name</code>) にします。</li> + <li>3つの <code><p></code> の中身を、それぞれの <code>secretIdentity</code> と <code>age</code>、リストにある情報を紹介していくために「超能力 ("Superpowers:")」で始まる行とします。</li> + <li><code>powers</code> プロパティを <code>superPowers</code> という新しい定数に保存します — この定数は今のヒーローの超能力のリストを持つ配列です。</li> + <li>別の <code>for</code> ループをつかって、今のヒーローの超能力をループします — それぞれに対する <code><li></code> 要素を作成し、超能力をこの要素の中身とし、<code><ul></code>要素(<code>myList</code>変数)の <code>listItem</code> に <code>appendChild()</code> を使って追加します。</li> + <li>最後の最後にやるのは、<code><h2></code>、<code><p></code>、<code><ul></code> を <code><article></code> (<code>myArticle</code>) の中身に追加し、それから <code><article></code> を <code><section></code> の中身に追加します。HTML の中身として表示される順序になりますので、これらの要素が追加された順序は重要です。</li> +</ol> + +<div class="note"> +<p><strong>付記</strong>: 例を動かしてみるのに問題があったら、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> ソースコードを参照して見て下さい(こちらで <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">ライブ実行</a> もできます)。</p> +</div> + +<div class="note"> +<p><strong>付記</strong>: もし JavaScript オブジェクトにアクセスするのに使っているドット/ブラケット記法をなぞっていくのが難しければ、<a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> のファイルを別のタブやテキストエディタで開いておいて、JavaScript と並べて読んでいくとわかりやすいかもしれません。<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a> 記事にも戻って、ドット/ブラケット記法について読み返してみてください。</p> +</div> + +<h2 id="Converting_between_objects_and_text" name="Converting_between_objects_and_text">オブジェクトとテキスト間の変換</h2> + +<p>上の例は XHR リクエストで JSON レスポンスを直接JavaScript オブジェクトに変換していたので、JavaScript オブジェクトへのアクセスという面では単純でした。次の部分です:</p> + +<pre class="brush: js notranslate">request.responseType = 'json';</pre> + +<p>時にはこんなにツイていない場合もあります — 時には生の JSON 文字列を受けとり、自分でオブジェクトに変換しなければならない場合もあるでしょう。また JavaScript オブジェクトをネットワーク越しに送信したい場合、送信する前に JSON 文字列に変換しなければならないでしょう。ツイている事に、ウェブ開発でこの二つの問題にはしょっちゅう出くわすので、ブラウザには組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> オブジェクトが備わっていて、これは以下二つのメソッドを備えています:</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。</li> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: オブジェクトを引数に取り、等価な JSON 文字列を返します。</li> +</ul> + +<p>一つめの方の動作例が <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> にあります (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">ソース</a> を見て下さい) — ここでは前の方で作成した例と全く同じ事をしていますが、XHR では生の JSON 文字列を返させて、それを <code>parse()</code> で JavaScript オブジェクトに変換しているところだけが異なります。コードの重要な箇所はこの部分です:</p> + +<pre class="brush: js notranslate">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + const superHeroesText = request.response; // get the string from the response + const superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>で、ご想像の通り <code>stringify()</code> は全く反対の向きに動作します。次の行をブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい:</p> + +<pre class="brush: js notranslate">let myObj = { name: "Chris", age: 38 }; +myObj +let myString = JSON.stringify(myObj); +myString</pre> + +<p>JavaScript オブジェクトを作成してその中身を確認し、次に <code>stringify()</code> を使って JSON 文字列に変換し — 戻り値を新しい変数に保存しています — その値も確認しています。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります — <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> + <li><a href="http://json.org/">ECMA のオフィシャル JSON Web サイト</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> |