みなさんこんにちは、ZeroTerasu(@ZeroTerasu)です。
APIを活用したウェブアプリ作成の際に、避けては通れない「JSON(”ジェイソン”と読みます)」について基本事項と操作方法についての記事を作成しました。
また、「JSON使用例」→「 1. JSON文字列 → オブジェクト 変換 」の項目では、実際にTwitter APIから取得したレスポンス(JSONデータ)から、必要な情報を抽出する方法について解説しています。
JSON形式とは?
例外はありますが、よく使われるJSON形式として、JSON形式 = 「キーが必ず””で囲われた辞書型」と考えて頂ければ理解しやすいのではないかと思います。
下記に、シンプル且つよく使われるJSON形式の例を記述します。
JSON形式の例={”キー1″ : 値1, “キー2” : 値2, …}
通常の辞書型形式との違いは、キーを必ず「””(ダブルクォーテーション)」で囲う必要がある点です。値(Value)は、””で囲っても囲わなくてもどちらも可能です。但し、 値(Value)を””で囲った場合、「数値」ではなく、「文字列」として扱われるので注意が必要です。
また、辞書型については、下記リンク先で解説しております。
JSONのデータ型
JSONが対応しているデータ型には、下記があります。
- 文字列 (“…”)
- 数値 (1, 123, 1.11など)
- null (null)
- bool値 (true, false)
- オブジェクト ({…})
- 配列 ([…])
JSON形式 の例
以下にJSON形式として正しい形式と誤った形式の例を示します。
(正) {“name” : “Suzuki”, “age” : 30}
(誤) {‘name’ : ‘Suzuki’, ‘age’ : 30}
※キーがシングルクォートで囲われているためJSON形式としては扱われず、辞書型として扱われます。
(誤) {name : “Suzuki”, age : 30}
※キーが””で囲まれていないため JSON形式としては扱われず、辞書型として扱われます。
(正) [ “Sato”, “Suzuki”, “Tanaka” ] ※配列形式もJSON形式として認められています。
(正) “Sato” ※文字列(キー=無し、値=文字列)のみもJSON形式として認められています。
(正) 30 ※数値( キー=無し、値=数値 )のみもJSON形式として認められています。
(正) [{
”name” : “Suzuki”,
“age” : 30,
},
{
“name” : “Tanaka”,
“age” : 25,
}]
※上記のように配列([…])の中に複数のオブジェクト({…})を入れることもできます。
(正) {
“name” : “Suzuki”,
“age” : 30,
“information”:{
“gendar” : “men”,
“e-mail” : “**********”,
“birth” : “1991/**/**”,
}
}
※上記のように オブジェクト({…}) の中にオブジェクト({…})を入れることもできます。 (「ネスト」と呼ばれます。(「入れ子構造」とも呼ばれます。)
JSON詳細説明
JSONとは、JavaScript Object Notationの略であり、テキストベースのデータ表現フォーマットの一種と説明されます。簡単に言いますと、JSONとは「データのやり取りをする際のフォーマットの一種」とお考え下さい。
JSONは、JavaScript構造データオブジェクトの表記法をベースとしており、JavaScriptでオブジェクトを生成する際に使用される{}や[]を用いて表記されます。また、後述しますが、JSON文字列→オブジェクトに変換すると、「オブジェクト.要素」のように「.(ドット)」で繋いで要素を取得することが出来ます。普段、JavaScriptコードを書かれている方にとっては馴染みやすいポイントかと思います。
JSON使用例
JSON形式データの取り扱い方法は大きく下記の2つの方法があります。
1. JSON文字列 → オブジェクト 変換
APIを通じて取得したデータは、「JSON文字列」であるパターンが多いと思います。そのため、取得した「JSON文字列」をJSON.parse(JSON文字列)として、JSON.parse()の引数として渡してあげることによって、オブジェクトに変換してから目的の要素を取得することができます。
下記は、実際にTwitter APIで自身のアカウントのツイートを5件取得した際に得られたJSON文字列です。(コード内では説明のため、”json”という変数に取得したJSON文字列を格納していますが、実際にAPIを通じて得られるデータは、{“data”: … “result_count”:5}の部分です。
今回は、取得したデータの中から、全ての”text”だけ抽出したいと思います。
より理解を深めて頂きたく、失敗事例も掲載しておりますが、成功事例だけ素早く確認されたい場合は、1-7行目および”修正ステップ3″のみ参照頂ければ、目的の結果が得られるようになっております。
var json =
{"data":[{"id":"******************5","text":"This is the sample tweet5"},
{"id":"******************4","text":"This is the sample tweet4"},
{"id":"******************3","text":"This is the sample tweet3"},
{"id":"******************2","text":"This is the sample tweet2"},
{"id":"******************1","text":"This is the sample tweet1"}],
"meta":{"oldest_id":"******************8","newest_id":"******************5","result_count":5}}
Logger.log(json[0]) // 結果:null
Logger.log(json["data"]) // 結果:null
Logger.log(json["meta"]) // 結果:null
Logger.log(typeof json) // 結果:object
Logger.log(json.data) // 結果:null
// 上記の辞書型から値を抽出する方法を試したが、うまくいかなかった。
// 恐らく、見かけ上は辞書型と同じ構造をしていても、実際のデータ型はあくまで「JSON文字列」なので、
// JSON.parse()に渡して、オブジェクトに変換しなければ値を抽出出来ないものと思われる。
// そこで、以下のように3ステップの順を追って、徐々に目的の値に近づけていくようにした。
// 修正ステップ1:JSON文字列 → オブジェクト 変換
Logger.log(JSON.parse(json))
// 結果:ダブルクォーテーションがキーおよび値から消え、キーと値が"="で結ばれた。この状態がオブジェクトである。
{data=[{text=This is the sample tweet5, id=******************5},
{id=******************4, text=This is the sample tweet4},
{id=******************3, text=This is the sample tweet3},
{text=This is the sample tweet2, id=******************2},
{id=******************1, text=This is the sample tweet1}],
meta={oldest_id=******************1, result_count=5.0, newest_id=******************5}}
// 修正ステップ2:ステップ1でオブジェクトの取得方法が判明したので、オブジェクトから"data"オブジェクトのみ抽出する。
Logger.log(JSON.parse(json).data)
// 結果 "data"オブジェクトから配列形式で"text"キーが含まれたオブジェクトが5個抽出された。
[{text=This is the sample tweet5, id=******************5},
{id=******************4, text=This is the sample tweet4},
{id=******************3, text=This is the sample tweet3},
{text=This is the sample tweet2, id=******************2},
{id=******************1, text=This is the sample tweet1}]
// 修正ステップ3 ステップ2で"data"オブジェクトの抽出方法が判明したので、その中から"text"オブジェクトを抽出する。
for(let i = 0; i <= 4; i ++){
Logger.log(JSON.parse(json).data[i].text)
}
// 結果 無事に目的の"text"データが抽出された。
This is the sample tweet5
This is the sample tweet4
This is the sample tweet3
This is the sample tweet2
This is the sample tweet1
2. オブジェクト → JSON文字列 変換
普段、JavaScript内での処理でのみJSONファイルを扱う場合は、JSON文字列への変換は必要になる場面が無いかもしれませんが、サーバーとのやり取りや、ご自身でAPIを作成される際には、JSON文字列への変換が必要になる場面があるかもしれませんので、記載します。
let obj ={
"name" : "Suzuki",
"age" : 30,
"information":{
"gendar" : "men",
"e-mail" : "**********",
"birth" : "1991/**/**",
}
};
let json_str = JSON.stringify(obj);
Logger.log(json_str);
Logger.log(typeof obj);
Logger.log(typeof json_str);
結果:
// {"name":"Suzuki","age":30,"information":{"gendar":"men","e-mail":"**********","birth":"1991/**/**"}}
// object
// string
コメント