diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-14 23:13:52 +0900 |
|---|---|---|
| committer | potappo <potappo@gmail.com> | 2022-01-23 22:03:59 +0900 |
| commit | 7fd3c080287e074f915b75d2abb8dc8f51fef019 (patch) | |
| tree | 176c74c5d4fbc3bb5726ad065546ca332ceaff6b /files/ja/learn | |
| parent | 32d3fab3b74ca6a63fcafcb91208585c26891260 (diff) | |
| download | translated-content-7fd3c080287e074f915b75d2abb8dc8f51fef019.tar.gz translated-content-7fd3c080287e074f915b75d2abb8dc8f51fef019.tar.bz2 translated-content-7fd3c080287e074f915b75d2abb8dc8f51fef019.zip | |
2021/10/08 時点の英語版に同期
Diffstat (limited to 'files/ja/learn')
| -rw-r--r-- | files/ja/learn/javascript/objects/json/index.html | 357 | ||||
| -rw-r--r-- | files/ja/learn/javascript/objects/json/index.md | 373 |
2 files changed, 373 insertions, 357 deletions
diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html deleted file mode 100644 index f6287d46d6..0000000000 --- a/files/ja/learn/javascript/objects/json/index.html +++ /dev/null @@ -1,357 +0,0 @@ ---- -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="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="/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="/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="/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="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> - <li><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> - <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> - <li><a href="/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> diff --git a/files/ja/learn/javascript/objects/json/index.md b/files/ja/learn/javascript/objects/json/index.md new file mode 100644 index 0000000000..fb7fb5dbed --- /dev/null +++ b/files/ja/learn/javascript/objects/json/index.md @@ -0,0 +1,373 @@ +--- +title: JSON の操作 +slug: Learn/JavaScript/Objects/JSON +tags: + - 記事 + - 初心者 + - CodingScripting + - ガイド + - JSON + - JSON API + - JSON 配列 + - JSON 解釈 + - JSON 構造 + - JavaScript + - 学習 + - オブジェクト + - チュートリアル + - l10n:priority +translation_of: Learn/JavaScript/Objects/JSON +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} + +JavaScript Object Notation (JSON) は、構造化データを表現するための標準のテキストベースの形式で、 JavaScript のオブジェクト構文に基づいています。ウェブアプリケーションでデータを転送する場合によく使われます（例えば、複数のデータをサーバーからクライアントへ送信して、ウェブページ上に表示する場合などで、その逆もあります）。頻繁に見かけるデータ形式ですので、この記事では JavaScript を使用して JSON を扱うのに必要なすべてのこと、例えば JSON を解釈してその中のデータにアクセスしたり、 JSON を作成したりする方法を説明します。 + +<table> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td> + 基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解（<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照）とオブジェクト指向 JavaScript の基本（<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>を参照）。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + JSON に格納されたデータを扱う方法、JSON 文字列の生成方法について理解すること。 + </td> + </tr> + </tbody> +</table> + +## JSON とは何か + +{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのデータ形式で、[Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford) によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、 JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み取ったり（解釈したり）生成したりする機能があります。 + +JSON は文字列として存在します。ですので、ネットワークを通してデータを転送したい場合に便利です。 JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。 JavaScript にはこれらを相互に変換できるメソッドを持った [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) というグローバルなオブジェクトがあるので、変換は難しくありません。 + +> **Note:** 文字列をネイティブオブジェクトへ変換することは「デシリアライゼーション」 (_deserialization_) と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは「シリアライゼーション」 (_serialization_) と呼ばれています。 + +JSON 文字列はそれ自身をファイルとして格納することもできます。 `.json` という拡張子の付いたただのテキストファイルで、 {{glossary("MIME type", "MIME タイプ")}}は `application/json` です。 + +### JSON の構造 + +上で説明したように、JSON は JavaScript オブジェクトにとても似ている形式の文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型（文字列、数値、配列、論理型やその他のリテラル型）を使うことができます。これにより、以下のように階層的にデータを構成することができます。 + +```json +{ + "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" + ] + } + ] +} +``` + +この文字列を JavaScript プログラムへ読み込むと（例えば、変数 `superHeroes` へ代入すると）と、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事で見たのと同様に、ドットや角括弧を使ってデータへアクセスすることができます。例えば次のようになります。 + +```js +superHeroes.homeTown +superHeroes['active'] +``` + +さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中 2 番目のヒーローの 3 番目の能力を参照する場合は、以下のようにします。 + +```js +superHeroes['members'][1]['powers'][2] +``` + +1. まず、変数名 `superHeroes` を指定します。 +2. その中の `members` プロパティへアクセスしたいので、 `["members"]` と指定します。 +3. `members` にはオブジェクトの配列が格納されています. ここでは、配列内の 2 番目のオブジェクトへアクセスするので、 `[1]` を指定します。 +4. そのオブジェクト内で、 `powers` プロパティへアクセスするため, `["powers"]` と指定します。 +5. `powers` プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3 番目が欲しいので、 `[2]` と記述します。 + +> **Note:** 上記の JSON は [JSONTest.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) で参照することができます（ページ内の[ソースコード](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)を参照してください）。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。 + +## JSON の配列 + +上記で、 JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。配列を JSON との間で変換することもできます。例えば、次のものも有効な JSON です。 + +```json +[ + { + "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" + ] + } +] +``` + +これも有効な JSON であり、解釈したデータには配列のインデックスを指定するだけです。例えば、`[0]["powers"][0]`のように表記できます。 + +### その他の注意点 + +- JSON は指定されたデータ形式の純粋な文字列です。プロパティのみを含むことができ、メソッドを含むことはできません。 +- JSON では文字列とプロパティ名を二重引用符で括る必要があります。単一引用符は、JSON 文字列全体を囲む以外では無効です。 +- カンマやコロンが 1 つ抜けるだけでも JSON ファイルは無効になり、動作しません。利用しようとしているデータを注意して確認してください（プログラムに問題がない限り、コンピューターが生成した JSON の方が、エラーが含まれる可能性が低くなります）。 [JSONLint](http://jsonlint.com/) のようなアプリケーションを使って妥当性を検証をすることもできます。 +- JSONは、配列やオブジェクトだけでなく、 JSON 内部に入れることができるあらゆるデータ型のデータだけでも有効なものになります。つまり、例えば、単一の文字列や数値も有効な JSON となります。 +- JavaScript コードではプロパティを引用符で括らなくても構いませんが、 JSON では、引用符でくくった文字列だけがプロパティとして扱われます。 + +## アクティブラーニング: JSON の例を操作してみる + +それでは、ウェブサイト上でどのように JSON 形式のデータを使うことができるか例を通して見てみましょう。 + +### はじめに + +まず、 [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) と [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css) のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な HTML です。 + +```html +<header> +</header> + +<section> +</section> +``` + +他には、この演習で書く JavaScript を含んだ {{HTMLElement("script")}} 要素があります。この時点では、{{HTMLElement("header")}} 要素と {{HTMLElement("section")}} 要素 を取得して、変数へ代入している 2 行コードのみが書かれています。 + +```js +const header = document.querySelector('header'); +const section = document.querySelector('section'); +``` + +演習用の JSON データは <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json> に用意してあります。 + +これを演習ページに読み込み、いくらかの DOM 操作を行って表示します。このようになります。 + + + +### JSON の取得 + +JSON を取得するには、{{domxref("XMLHttpRequest")}} (しばしば **XHR** と呼ばれる) という API を使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用してサーバーからリソース (例：画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み込みせずに、小さな部分のコンテンツを更新することができます。これにより、よりレスポンシブなウェブページを作成できますが、それをもっと詳細に教えるのはこの記事の範囲を超えています。 + +1. まず、取得したい JSON がある URL を変数へ代入します。次のコードを JavaScript の最後の行へ追加してください。 + + ```js + let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; + ``` + +2. HTTP リクエストを作成するのに、 `XMLHttpRequest` コンストラクターに `new` キーワードを付けて使用することで、新しいリクエストインスタンスを作成する必要があります。先ほどのコードの下に、次のコードを追加してください。 + + ```js + let request = new XMLHttpRequest(); + ``` + +3. 新しいリクエストを開始するには、 [`open()`](/ja/docs/Web/API/XMLHttpRequest/open) メソッドを使います。 次のコードを追加してください。 + + ```js + request.open('GET', requestURL); + ``` + + このメソッドは最低 2 つの引数を取ります（他に任意の引数を与えることもできます）。今回の簡単な例では、必要なのは必須の引数 2 つだけです。 + + - リクエストを開始する際に HTTP のメソッドを決める必要があります。今回のケースでは、単純にデータを取得するだけですので [`GET`](/ja/docs/Web/HTTP/Methods/GET) が良いでしょう。 + - リクエストを送る先の URL。今回は JSON ファイルを置いた URL です。 + +4. 次に、以下の 2 行のコードを追加してください。XHR オブジェクトがサーバーから返されるデータを判断できるように [`responseType`](/ja/docs/Web/API/XMLHttpRequest/responseType) に JSON を指定します。この場合、ブラウザー側で JavaScript オブジェクトへ変換してくれます。それから、 [`send()`](/ja/docs/Web/API/XMLHttpRequest/send) メソッドでリクエストを送信します。 + + ```js + request.responseType = 'json'; + request.send(); + ``` + +5. 最後に、サーバーからのレスポンスを待ち、それを処理するコードを用意するので、以下のコードをこれま でのコードの下に追加してください。 + + ```js + request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); + } + ``` + +ここでは 、先ほどのリクエストに対するレスポンス（[`response`](/ja/docs/Web/API/XMLHttpRequest/response) プロパティから取得できます）を `superHeroes` と いう変数へ代入しています。つまり、この変数に JSON を元に生成された JavaScript オブジェクトが格納されているということです。それから 2 つの関数をそのオブジェクトを引数として与えて呼び出しています。最初の関数は引数のデータを `<header>` へ埋め込み、2 つ目は各ヒーローごとの情報カードを作り、`<section>` へ埋め込みます。 + +上記の処理は、リクエストオブジェクトで load イベントが発生した時に呼び出されるイベントハンドラー（[`onload`](/ja/docs/Web/API/XMLHttpRequestEventTarget/onload) を参照）に記述しました。このイベントは、レスポンスがうまく取得できた場合に呼び出されるので、 `request.response` を使って何か処理をしようとしたときに、それが必ず利用できることが保証されています。 + +### ヘッダーへの値の設定 + +ここまでで、JSON の取得と JavaScript オブジェクトへの変換ができました、先ほどの 2 つの関数を実装して使ってみましょう。まずはじめに、以下のコードをこれまでのコードの下に追加してください。 + +```js +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); +} +``` + +まず、 {{HTMLElement("h1")}} 要素を [`createElement()`](/ja/docs/Web/API/Document/createElement) で生成し、その [`textContent`](/ja/docs/Web/API/Node/textContent) プロパティにそのオブジェクトの `squadName` プロパティを設定し、そしてそれを [`appendChild()`](/ja/docs/Web/API/Node/appendChild) で header に追加します。そして、段落についても同様に、要素を生成し、内容のテキストを設定し、 header に追加します。違いは、設定するテキストがこのオブジェクトの `homeTown` と `formed` の各プロパティを結合したものであるという点だけです。 + +### ヒーロー情報カードの作成 + +次に、以下の関数をコードの下へ追加してください。この関数はスーパーヒーローカードの作成と画面表示を行います。 + +```js +function showHeroes(obj) { + const heroes = obj['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); + } +} +``` + +始めに、JavaScript オブジェクトの `members` プロパティを新しい変数に保存します。この配列には複数のオブジェクトがあり、それぞれにヒーローについての情報が入ります。 + +次に、[for ループ](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#the_standard_for_loop)を使って配列のそれぞれのオブジェクトを反復処理します。それぞれの次のようなことを行います。 + +1. 新しい要素をいくつか作成します。`<article>` 1 つ、 `<h2>` 1 つ、 `<p>` 3 つ、`<ul>` 1 つです。 +2. `<h2>` の中身を現在のヒーローの名前 (`name`) にします。 +3. 3 つの段落の中身を、それぞれの `secretIdentity`、 `age`、リストにある情報を紹介していくために「超能力 ("Superpowers:")」で始まる行とします。 +4. `powers` プロパティを `superPowers` という新しい定数に保存します。この定数は今のヒーローの超能力のリストを持つ配列です。 +5. 別の `for` ループを使用して、今のヒーローの超能力を反復処理します。それぞれに対して `<li>` 要素を作成し、中に超能力を入れ、 `listItem` に `<ul>` 要素（`myList`）を `appendChild()` で追加します。 +6. 最後に、 `<h2>`、`<p>`、`<ul>` を `<article>` (`myArticle`) の中に追加してから、その `<article>` を `<section>` の中に追加します。これらを追加する順序は重要で、これが HTML の中で表示される順序になります。 + +> **Note:**: 試してみるための例が上手く取得できなかった場合は、 [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) ソースコードを参照してみてください（こちらで[ライブ実行](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)もできます）。 + +> **Note:**: もし、 JavaScript オブジェクトへのアクセスに使用しているドット/ブラケット記法がよく分からない場合は、 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) を別のタブやテキストエディターで開き、それを参照しながら JavaScript を読んでみるとよいでしょう。また、ドットやブラケット記法の詳細については、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事を見返してみてください。 + +## オブジェクトとテキスト間の変換 + +上記の例では、 XHR リクエストで JSON レスポンスを直接 JavaScript オブジェクトに変換するように設定したため、 JavaScript オブジェクトへのアクセスはシンプルでした。 + +```js +request.responseType = 'json'; +``` + +しかし、時にはそれほど幸運ではないこともあります。生の JSON 文字列を受け取り、それを自分自身でオブジェクトに変換する必要がある場合もあります。また、 JavaScript のオブジェクトをネットワーク経由で送信したい場合、送信前に JSON （文字列）に変換する必要があります。幸い、この 2 つの問題はウェブ開発ではよくあることなので、ブラウザーでは組み込みの [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。 + +- [`parse()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。 +- [`stringify()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify): オブジェクトを引数に取り、等価な JSON 文字列を返します。 + +前者の動作例が [heroes-finished-json-parse.html](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) にあります（[ソース](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html) を見て下さい）。ここでは以前に作成した例とまったく同じことをしていますが、 XHR では生の JSON 文字列を返すようにして、それを `parse()` で JavaScript オブジェクトに変換しているところだけが異なります。コードの重要な部分は以下の通りです。 + +```js +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); +} +``` + +ご想像の通り、 `stringify()` はまったく反対の向きに動作します。次のコードをブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい。 + +```js +let myObj = { name: "Chris", age: 38 }; +myObj +let myString = JSON.stringify(myObj); +myString +``` + +ここでは、 JavaScript オブジェクトを作成してその中身を確認しています。次に `stringify()` を使って JSON 文字列に変換し、返値を新しい変数に保存し、その値も確認しています。 + +## スキルをテストしてみましょう！ + +この記事はここまでですが、最重要事項を覚えていますか？先に進む前に、これが身に付いているかどうかを確認するためのテストがいくつかあります。[スキルテスト: JSON](/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON)を参照してください。 + +## まとめ + +この節では、プログラム内で、JSON を生成する、JSON を解釈する、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。 + +## 関連情報 + +- [JSON リファレンス](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) +- [XMLHttpRequest オブジェクトリファレンス](/ja/docs/Web/API/XMLHttpRequest) +- [XMLHttpRequest の利用](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [HTTP リクエストメソッド](/ja/docs/Web/HTTP/Methods) +- [ECMA のオフィシャル JSON Web サイト](http://json.org/) + +{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} + +## このモジュール + +- [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics) +- [初心者のためのオブジェクト指向 JavaScript](/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Object のプロトタイプ](/ja/docs/Learn/JavaScript/Objects/Object_prototypes) +- [JavaScript での継承](/ja/docs/Learn/JavaScript/Objects/Inheritance) +- [JSON データの操作](/ja/docs/Learn/JavaScript/Objects/JSON) +- [オブジェクト作成の練習](/ja/docs/Learn/JavaScript/Objects/Object_building_practice) +- [バウンスボールに機能を追加する](/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) |