JSON(ジェイソン)とは

JSONは、JavaScript Object Notationを短縮した名前です。人間でも読んだり、作ったりすることができるように考えられたデータフォーマットです。

Twitter, Slackなど多数のAPIでJSONは利用されています。名前にjavascriptが入っているので、使用できる範囲が狭いように感じるかもしれませんが、実はPHPやRubyなど特定のプログラム言語に依存ぜず使用することすることができます。そのため、JSONの基本を理解し一度処理方法を身につけてしまえば、その知識をさまざまな場所で活用することができます。

JSONが使われる理由

JSONが使われる理由は、主に以下の3つの特徴を持っているためです。

  • 読みやすい構造
  • 軽量（必要なデータ以外に必要用なデータないため）
  • 言語に依存しない

Javascriptの記述先(事前準備)

動作確認を行うために下記のHTMLのscriptタグの中にコードを記述していきます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
</head>
<body>
   
<script>
  ここに記述    
</script>
    
</body>
</html>

JSONの理解を深めよう

最もシンプルで分かりやすいJSONデータ

JSONのデータは、キーと値のペアを持っており、キーと値を使って記述していきます。

JSONデータを持つ下記の変数personを例に説明を行います。キーはfirstName, キーに対する値は五郎となりキーと値のペアは’:’（コロン）を使って区切ります。複数のキーと値を持つ場合は、’,’（コンマ）によってペアを分け、それを{}カーリーブレースで囲めばJSONデータとなります。

JSONはキーも値もダブルくおテーションで囲む必要があります。


let person= {
    "firstName" : "五郎",
    "lastName" : "山下",
    "age" : "22"
};

キーがついていることで、その値が何の値なのかを説明することができるため、わかりやすいデータ構造をしていることがこの例を見ただけでも理解して頂けるかと思います。

JSONデータへのアクセス方法

先ほどの変数person に保存されたJSONデータへのアクセスを確認しておきましょう。変数名.キーで値を取り出すことができます。


document.writeln("その人の名字は:  " + person.firstName);
document.writeln("年齢は: " + person.age);

ブラウザ上にはperson.firsNameの値が表示されます。

person.firstNameを表示

person.firstNameを表示

配列にJSONデータを保存する

JSONデータは配列の一つの要素として保存することもできます。先ほどの変数personを元に配列を作成します。


let brothers = [{
   "firstName" : "一郎",
   "lastName" : "山下",
   "age" :  "29",
   "height" : "170",
   "weight" : "60"
}]

配列には複数の要素を保存することが可能です。配列を利用すれば、複数のJSONデータを一つの変数として保存することができます。


let brothers = [{
   "firstName" : "一郎",
   "lastName" : "山下",
   "age" :  "29",
   "height" : "170",
   "weight" : "60"
},
{
   "firstName" : "三郎",
   "lastName" : "山下",
   "age" :  "27",
   "height" : "176",
   "weight" : "68"
},
{
   "firstName" : "五郎",
   "lastName" : "山下",
   "age" :  "22",
   "height" : "165",
   "weight" : "54"
}];

配列に保存されているJSONデータへのアクセス方法

配列の各要素には先頭から順番に番号が振られているので、番号を元に配列の要素へのアクセスを行います。配列の要素の番号を指定した後にJSONデータにアクセスを行います。

配列の最初の要素の情報を取得したいので、0を指定してアクセスを行います。


document.writeln("長男の名前は:  " +brothers[0].firstName);
document.writeln("年齢は: " + brothers[0].age);
document.writeln("身長は: " + brothers[0].height);
document.writeln("体重は: " + brothers[0].weight);

ブラウザで確認すると以下のように表示されます。

配列に保存されたJSONデータへのアクセス

配列に保存されたJSONデータへのアクセス

配列にループ処理を行い、JSONデータにアクセス

配列に保存されたデータは、ループ処理を行い、配列の全要素のJSONデータにアクセスを行うことができます。


for ( i in brothers ) {
document.writeln("名前は:  " + brothers[i].firstName);
document.writeln("年齢は: " + brothers[i].age);
document.writeln("身長は: " + brothers[i].height);
document.writeln("体重は: " + brothers[i].weight + "
");
}

配列は3つの要素から構成されていたので、ループ処理により、3つの要素のJSONデータにアクセスできていることを確認することができます。

ループを利用してJSONデータへアクセス

ループを利用してJSONデータへアクセス

ネストされたJSONデータを保存する

これまで扱ったJSONデータは、1つのキーに対して1つの値を設定していましたが、今回は、1つのキーに対して1つの値ではなくJSONデータを割り当てます。JSONデータの中にまたJSONデータが入っている構造です。その構造のことをネストと呼びます。

下記がネストされたJSONデータです。


let brothers= {
  "ichiro" : {
   "age" :  "29",
   "height" : "170",
   "weight" : "60"
},
"saburo" : {
   "age" :  "27",
   "height" : "176",
   "weight" : "68"
},
"goro" : {
   "age" :  "22",
   "height" : "165",
   "weight" : "54"
}}

ネストされたJSONデータへのアクセス

配列の場合は、配列の要素にアクセスする場合は番号を指定していましたが、JSONの場合は、キーを指定します。JSONのデータ構造がわかっていれば、配列よりもわかりやすくデータへアクセスを行うことができます。


document.writeln("年齢は: " + brothers.saburo.age);
document.writeln("身長は: " + brothers.saburo.height);
document.writeln("体重は: " + brothers.saburo.weight);

ブラウザにはアクセスしたデータが表示されます。

ネストされたJSONデータへのアクセス

ネストされたJSONデータへのアクセス

さらにageキーにもJSONデータを割り当てることができるためネストは何階層にも行うことができます。

ネストされたJSONデータを配列に保存する

ネストされたJSONデータを配列に保存することもできます。


var brothers= [{
  "ichiro" : {
　 "name": "一郎",
   "age" :  "29",
   "height" : "170",
   "weight" : "60"
   }
},
{
"saburo" : {
　 "name": "三郎",
   "age" :  "27",
   "height" : "176",
   "weight" : "68"
}
},
{
"goro" : {
　 "name": "五郎",
   "age" :  "22",
   "height" : "165",
   "weight" : "54"
}
}
]

アクセスは配列の番号を使用して行います。


document.writeln("二男の名前は:  " +brothers[1].saburo.name);
document.writeln("年齢は: " + brothers[1].saburo.age);
document.writeln("身長は: " + brothers[1].saburo.height);
document.writeln("体重は: " + brothers[1].saburo.weight);

JSON文字列をオブジェクトに変換する

以下のようにシングルクォーテーションで囲まれたJSON文字列の場合はJSON.parseを実行しなければ、person.firstnameといった形で処理を行うことができません。


let person= '{
    "firstName" : "五郎",
    "lastName" : "山下",
    "age" : "22"
}';

もしJSON文字列のようにperson.firstnameを実行するとundefinedといったエラーが発生します。そのような場合はJSON.parse()を実行してください。


JSON.parse(person)

JSON実践編

楽天ブックス系APIを利用してJSONデータを取得してみよう

ここまでの説明でJSONデータの基本を理解したので実際にAPIを使用してJSONデータの取得を行ってみます。

楽天市場のAPIを利用するためには、事前に楽天ウェブサービスから登録を行いアプリID/デベロッパーIDを取得する必要があります。

APIを使用して楽天ブックスで扱う洋書の中で、タイトルにPHPを含む書籍のJSONデータを取得します。APIのパラメータ等の詳細は、楽天ブックス洋書検索APIから確認して下さい

必須パラメータのappkicationIdに取得したアプリID、titleパラメータにPHPを入力します。下記の入力した文字列をブラウザのアドレスバーに入れて情報を取得します。


https://app.rakuten.co.jp/services/api/BooksForeignBook/Search/20170404??applicationId=XXX&title=PHP

ブラウザ上にはAPIから取得したデータが出力されますが、取得したJSONデータは、キーと値のペア、また配列とネストされたJSONデータで構成されています。本文書でJSONデータの扱い方を理解していれば、取得したデータの読み方もわかるかと思います。


{"count":19,"page":1,"first":1,"last":19,"hits":19,"carrier":0,"pageCount":1,"Items":[{"Item":{"title":"PHP: 20 Lessons to Successful Web Development","titleKana":"","japaneseTitle":"PHP: 20 Lessons to Successful Web Development","author":"Robin Nixon":......

URLの指定等が誤っている場合、エラーもJSONで戻されます。


{"error":"wrong_parameter","error_description":"BooksBook/Search doesn't have version 23456"}

JSONデータをPHPで処理する

JSONデータはプログラム言語に依存しないという特徴を持っているのでさまざなな言語で処理を行うことができますが、ここではPHPを使ったJSONデータの扱い方について説明します。

JSONデータは、楽天APIを使用して取得したものを使用します。


$url = 'https://app.rakuten.co.jp/services/api/BooksForeignBook/Search/20170404?applicationId=XXX&title=PHP';

$json_book_data = file_get_contents($url,true);

PHPでは、JSONデータをそのまま扱うことができないので、json_decodeを利用して、JSONデータを配列に変換します。


$array_book_data = json_decode($json_data,true);

json_decodeでJSONデータを配列にすると下記のようになります。


array:9 [▼
  "count" => 19
  "page" => 1
  "first" => 1
  "last" => 19
  "hits" => 19
  "carrier" => 0
  "pageCount" => 1
  "Items" => array:19 [▼
    0 => array:1 [▼
      "Item" => array:24 [▼
        "title" => "PHP: 20 Lessons to Successful Web Development"
        "titleKana" => ""
        "japaneseTitle" => "PHP: 20 Lessons to Successful Web Development"
        "author" => "Robin Nixon"
        ・
        ・
      ]
    ]
    1 => array:1 [▼
      "Item" => array:24 [▼
        "title" => "PHP for the Web: Visual QuickStart Guide【バーゲンブック】"
        "titleKana" => ""
        "japaneseTitle" => "PHP for the Web: Visual QuickStart Guide【バーゲンブック】"
        "author" => "Larry Ullman"
        ・
        ・
    2 => array:1 [▶]
    ・
    ・

  ]
  "GenreInformation" => []
]

PHPの本のタイトルだけ確認したい場合は、配列の構造を確認し、foreachのループ処理で本のタイトルだけ出力させることが可能です。


foreach ($array_book_data['Items'] as $item){
             echo $item['Item']['title'].'<br>';
  }


PHP: 20 Lessons to Successful Web Development
PHP for the Web: Visual QuickStart Guide【バーゲンブック】
Murach's PHP and MySQL (2nd Edition)
PHP Quick Scripting Reference
Effortless E-Commerce with PHP and MySQL
PHP and MySQL in Easy Steps
   ・
   ・

まとめ

JSONの基礎から実践まで一通り説明しました。特に基礎を理解していれば、APIで取得したJSONデータも比較的簡単に読むことができたかと思います。少しでもJSONデータを身近に感じてもらったと思うので、JSONの理解があいまいだった人もこれを機にJSONデータを活用してください。

同じカテゴリーのおすすめ記事

あわせて読みたい
webpack4 mini css
webpack 4でmini-css-extract-pluginを使う
あわせて読みたい
WEBサイトが表示される仕組み
あわせて読みたい
SVGをHTMLで使いたい人のためのSVG入門
あわせて読みたい
初めてでもわかるTailwindcss入門(1)基礎編
あわせて読みたい
webpack and babel
入門者/初心者にもわかるwebpack 4の基礎(Babel編)