どうも。つじけ（tsujikenzo）です。このシリーズでは、JSONについて、全3回でお送りします。（2021年11月に大幅にリニューアルしました）
前回のおさらい
前回は、【基礎後編】4つのプリミティブ型と2つの構造化型、をお届けしました。
JSONは、まず配列か、オブジェクトかどちらかの構造をしていて、JSON内で、6つのJavaScriptの型が使える、という内容でした。
今回は、最終回で、JSONを操作してみよう、をお届けします。
今日のアジェンダ
- 拡張子は.json
- JSONの配列型とオブジェクト型
- JSONを操作しよう
拡張子は.json
CSVファイルの拡張子が.csvである、XMLは.xmlであるように、もしJSONをファイルにするなら拡張子は.jsonです。
メモ帳を用意して、適当なJSONコードを書いて、ファイル名を付けて保存しましょう。（念のため文字コードはUTF-8にしましょう） 
JSONをリテラル、もしくはファイルで確認できるサイトがありますので、こちらにテキストファイルをアップロードします。
すると、「有効なJSON」と、結果がでました。 
ノンプログラマーのわたしたちが、まったくのゼロからJSONファイルを作成することはないと思います。
しかし、基礎さえおさえていれば、いろんなトラブルにも対応できます。
こちらのサイトでは、JSONデータのサンプルを取得できますので、メソッドの実験をしてみたり、JSONを操作するクラスを作成したりしてみましょう。
ちなみに、PythonのJupyterNotebookから生成されるipynbファイルも、JSONファイルです。
いまではインターネット上のさまざまな場面で、JSONは大活躍しています。
JSONの配列型とオブジェクト型
前回もお伝えしましたが、JSONの構造は、配列型かオブジェクト型である必要があります。
サーバーにHTTPリクエスト通信を送信し、返ってくるレスポンス（JSONのことです）には、以下のような、配列型もあります。
[
{'name':'tsujike','age':20,'favorite':'sushi'},
{'name':'eto','age':25,'favorite':'coffee'},
{'name':'takahashi','age':30,'favorite':'blog'}
]
レスポンスを、配列型にするか、オブジェクト型にするか、そもそもJSON形式にするかは、サーバーを運営している人の考え方によります。
配列型とオブジェクト型の違いは、値の検索方法です。
詳細は割愛しますが、検索のしかたが違うということは、メモリの消費量、検索処理の時間にも違いがあります。（メモリの消費量で見ると、配列に入れる方法が一番小さいと言われています。）
どのようなデータを提供するのが、ユーザーのメリットとして大きいか、また、サーバーに負担を掛けないかは、サーバーを運用する人にしかわかりません。
セオリーのようなものはあるものの、すべてのサーバーが統一されたJSON型でやりとりしているかというと、それぞれ違いがあるのも、納得いきます。
JSONを操作しよう
ちょっと脱線してしまいましたが、基礎に戻りましょう。
リテラルに書いたJSONであれ、ダウンロードしてきたJSONであれ、文字列型とJSONオブジェクトの変換のやり取りが学習のポイントです。
JSON文字列
おさらいですが、以下のような、配列を、変数に代入します。
const persons = [
{"name":"tsujike","age":20,"favorite":"sushi"},
{"name":"eto","age":25,"favorite":"coffee"},
{"name":"takahashi","age":30,"favorite":"blog"}
];
JSONの中身の文字列はダブルクォーテーションですので、外側はシングルクォーテーションか、改行するならバックティックがいいでしょう。
const persons = `[
{"name":"tsujike","age":20,"favorite":"sushi"},
{"name":"eto","age":25,"favorite":"coffee"},
{"name":"takahashi","age":30,"favorite":"blog"}
]`;
確実にJSON文字列に変換したいばあいは、JSON.stringify()メソッドでもかまいません。
const persons = [
{"name":"tsujike","age":20,"favorite":"sushi"},
{"name":"eto","age":25,"favorite":"coffee"},
{"name":"takahashi","age":30,"favorite":"blog"}
];
const textJson = JSON.stringify(persons);
JSONオブジェクト
文字列型だと、中の要素にアクセスできません。persons[0]のような配列じゃないしな。。。
ということで、JSON文字列をJSONオブジェクトに変換します。
JSON文字列を、オブジェクトに変換する便利なメソッドはJSON.parse()メソッドです。
const jsonObject = JSON.parse(persons);
先ほどまでString型だったものが、Objectになりました。
console.log(typeof obj1); //object
Objectということは、中の要素にアクセスできますね。ドット記法でも、ブラケット記法でもかまいません。
console.log(obj1[0][‘name’]); //’tsujike’’
HTTPResponseオブジェクトとJSON.parse()メソッド
UrlFetchApp.fetch()メソッドの戻り値は、HTTPResponseオブジェクトです。
サーバーにたいして、HTTPリクエストを送信すると、HTTPResponseオブジェクトを取得します。
この、HTTPResponseオブジェクトには、getContentText()メソッドが提供されており、中身を文字列化できます。
郵便番号APIは、レスポンスでJSONを返しますので、その中身を見てみましょう。
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060';
const response = UrlFetchApp.fetch(url);
const text = response.getContentText();
console.log(text);
/*
{
"message": null,
"results": [
{
"address1": "高知県",
"address2": "南国市",
"address3": "蛍が丘",
"kana1": "ｺｳﾁｹﾝ",
"kana2": "ﾅﾝｺｸｼ",
"kana3": "ﾎﾀﾙｶﾞｵｶ",
"prefcode": "39",
"zipcode": "7830060"
}
],
"status": 200
}
*/
この文字列は、JSON文字列です。
なので、JSONオブジェクトに変換すると、各プロパティにアクセスできるようになります。
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060';
const response = UrlFetchApp.fetch(url);
const text = response.getContentText();
const obj = JSON.parse(text);
console.log(obj.status); //200
そして、不思議なことに、JSON.parse()メソッドは、HTTPResponseオブジェクトを、いきなり解析できます。
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060';
const response = UrlFetchApp.fetch(url);
// const text = response.getContentText();
const obj = JSON.parse(response);
console.log(obj.status); //200
もし、ネット記事や書籍などで、このような書き方を見かけた際は、「文字列化の省略もできるんだ」と思ってください。
なぜ、できるのかは、いつかブログにしたいと思います。（公式リファレンスにもないので、わたしもまだ理解できていません。。。。）
まとめ
以上で、【実践編】JSONを操作してみよう、をお届けしました。
少しとっつき辛かったJSONと、少し仲良くなれたのではないでしょうか。
GASのプロパティストアや、Web APIと関わっていくと、JSONの理解は必須です。
そして、JSONはテキストデータなので、軽量で、さまざまな問題を解決してくれると思っています。
今後も、知識をアップデートしていきたいと思います。おたのしみに！
