JSONとは「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」です。
Python、PHP、JavaScript、C++、Javaなど様々な言語でサポートされており、JSONを間に挟むことで各プログラミング言語間のデータの受け渡しがとても簡単にできます。
本記事ではJSONの概要や実際の書き方を解説します。
JSONの特徴
JSONとは「JavaScript Object Notation」の略で、「JavaScriptのオブジェクトの書き方を元にしたデータ定義方法」のことです。
JavaScriptでオブジェクトを作成する際は {} や [] などの括弧を使って記述しますが、JSONはその記法を元にしています。元々はJavaScriptで使われる想定で作成されたデータ構造なので、JavaScriptと非常に相性が良いです。現在はJavaScript以外にもPythonやJava、PHPなどの幅広い言語で使われていて、JavaScriptなどのクライアント言語とPythonなどのサーバサイド言語間のデータのやり取りで使われることが多いです。
JSONとXMLの違い
近年、データのやり取りはJSONですることが多いですが、JSONが登場する前まではXMLというデータ構造が主に使われていました。
XMLはHTMLの記法を元にしたデータ定義方法で、データ定義言語と呼ばれています。
HTMLと同じようにタグを使ってデータの構造を定義し、柔軟に記述できるので（XMLよりも前に使われていた）CSVよりも複雑な構造も扱えました。しかし、その分人間にとって直感的には理解し難いのが難点でした。
XMLの例
| <?xml version="1.0" encoding="utf-8"?> <data> <item> <id>1</id> <name>tanaka</name> </item> <item> <id>2</id> <name>nakata</name> </item> </data> |
一方、JSONはJavaScriptのオブジェクト記法で定義するので、慣れている人にとっては非常に分かりやすく感じます。
また、例えばPythonからJSONデータを送り、JavaScriptでそのままオブジェクトとして扱う、といった使い方が可能です。XMLだとXML構文を解析する必要がでてくるので、プログラムのパフォーマンスが低下するというデメリットもあります。
JSONの例
| [ {"id" : "1", "name" : "tanaka"}, {"id" : "2", "name" : "nakata"} ] |
最近のWeb開発にはJavaScriptが必ず必要になりました。この環境の変化もJSONが広く使われるようになった要因と言えるでしょう。
JSONの書き方
次に、JSONの書き方を見ていきましょう。
JavaScriptでオブジェクトを扱ったことがあるならそこまで複雑ではありませんし、使ったことがなくても今後JavaScriptを操作する上で役に立つので覚えておきましょう。
基本の書き方
JSONは {} の中にキーと値をコロンで区切って記述します。キーは必ずダブルクォーテーションで囲む必要があり、シングルクォーテーションだとエラーになります。
| {“key” : “value”} |
カンマで区切ると、キーと値の組み合わせを複数記述できます。
| {“key1” : “value1”, “key2” : “value2”} |
行数が多くなってくると読みにくくなってきます。その場合は改行とインデントを使いましょう。
| { “key1” : “value1”, “key2” : “value2”, “key3” : “value3” } |
JSONが対応しているデータ型
JSONは次のデータ型に対応しています。
- 文字列
- 数値
- null
- bool値
- オブジェクト
- 配列
文字列
文字列はダブルクォーテーション(“)、バックスラッシュ(\)以外の文字であればなんでも使用できます（もちろん日本語もOK）。
| {“name” : “tanaka”} |
数値
数値はダブルクォーテーションで囲みません。ダブルクォーテーションで囲むと文字列扱いになるので注意が必要です。
| {“id”, 1} |
null
nullは全て小文字で指定します。
| {“id” : null} |
bool値
bool値（true or false）の指定も可能です。こちらも数値と同じくダブルクォーテーションは必要ありません。
| {“a” : true, “b” : false} |
オブジェクト
オブジェクトの中にオブジェクトを入れることもできます。これを「ネストする」と言います。ここまでくるとデータ構造っぽさが出てきます。
| { "id": 1, "name": "tanaka", "attribute": { "gender": "male", "phone_number": "xxxxxxxxxxx", "birth": "1991/01/01" } } |
配列
オブジェクトの場合は {} を使いましたが、配列を使いたい場合は [] を使います。
配列内の要素はカンマで区切ることで複数入力できます。
| { "id": 1, "name": "tanaka", "result": [ 87, 83, 71, 59, 91 ] } |
JSONの使用例
最後に実際にJavaScript内でJSONを使ってみましょう。
JSON文字列をオブジェクトに変換したり、逆にオブジェクトをJSON文字列に再変換したりしてみます。まずはJSON文字列→オブジェクトから見ていきましょう。
JSON文字列 → オブジェクトへの変換
json_strがJSON文字列です。これをJSON.parse()に渡すことでオブジェクトに変換されます。あとは通常のオブジェクトの扱いと同じで、ドットで繋げながら取得したい要素にアクセスしています。次にオブジェクト→JSON文字列への変換を見ていきましょう。
JavaScriptコード
| var json_str = '{"id":1, "name":"tanaka", "attribute":{"gender":"male", "phone_number":"xxxxxxxxxxx", "birth":"1991/01/01"}}'; var obj = JSON.parse(json_str) console.log(obj.name) console.log(obj.attribute.birth) |
結果
| tanaka 1991/01/01 |
オブジェクト → JSON文字列への変換
objはJavaScriptのオブジェクトです。これをJSON.stringify()に渡してJSON文字列に変換しています。typeofで型を見てみると、stringになっているのが分かります。
普段JavaScript内で使用するときはオブジェクトで良いですが、サーバサイドとデータのやり取りをしたい場合は文字列にして送ると非常に便利です。
JavaScriptコード
| var obj = {"id":1, "name":"tanaka", "attribute":{"gender":"male", "phone_number":"xxxxxxxxxxx", "birth":"1991/01/01"}} var json_str = JSON.stringify(obj) console.log(json_str) console.log(typeof json_str) |
結果
| {"id":1,"name":"tanaka","attribute":{"gender":"male","phone_number":"xxxxxxxxxxx","birth":"1991/01/01"}} string |
さいごに
JSONについて以下の通り解説してきました。
・JSONの特徴
・JSONとXMLの違い
・JSONの書き方
・JSONが対応しているデータ型
・JSONの使用例
プログラミングをしていれば必ず出会うデータフォーマット（JSON、XML、CSV、…）について、この機会に勉強してみてもいいかもしれませんね！
－－－－－参考情報－－－－－
■TV出演動画：ええじゃない課Biz（2022/05/29 放送 TOKYO MX）
アンタッチャブル柴田さん、アルコ＆ピースさんがレギュラーのビジネス情報番組「ええじゃない課Biz」にて、プログラミングスキル判定サービス「TOPSIC」と企業・学校対抗プログラミングコンテスト「PG BATTLE」のご紹介をさせていただきました。
