公開日: | 最終更新日:
【JavaScript】 ゼロから始めるJSON入門
JSONとは、JavaScript Object Notationの略でJavaScriptのオブジェクトの表記法をベースにしたデータフォーマットのことです。
オブジェクト({}
)の中にダブルクォーテーション(""
)で囲った名前と値のペアを記述します。名前の後にはコロン(:
)がつきます。
1
{ "名前": "値"}
複数のデータを記述する際は、以下のようにカンマ(,
)で区切ります。
1
2
3
4
5
{
"id": 1,
"name": "piyoko",
"age": 18
}
JavaScriptの表記法をベースにしていますが、JavaScript専用という訳ではなく他のプログラミング言語でも利用することができます。
JSONの基本情報
この章では、JSONの基本情報について解説します。
構文
JSONは、以下のように記述することで、名前: 値
のペアのデータを設定することが出来ます。
1
{ "名前": "値"}
1
2
3
4
5
{
"名前1": "値1",
"名前2": "値2",
"名前3": "値3"
}
また、JSONはJavaScriptのオブジェクトの表記法がベースとなっています。
JavaScriptのオブジェクトの表記法
JavaScriptでオブジェクトを作成するには、{}
で新しくオブジェクトを作成することが出来ます。
1
const object = {}; // 空のオブジェクトを作成する
また、作成時に以下のようにオブジェクトの名前と値を記述することで定義することが出来ます。
左側の"名前"
がオブジェクトのキー名
で右側がオブジェクトのバリュー
です。
1
2
3
4
5
6
7
const object = {
"名前": "値" //キー名: "バリュー"
};
const user1 = {
"name": "Tanaka" // "name"がキー名で"Tanaka"がバリュー
};
キーとバリューがペアになったものをプロパティ
と言います。このプロパティ
には、オブジェクト名.プロパティのキー名
かオブジェクト名["プロパティのキー名"]
でアクセスすることが出来ます。
1
2
3
4
5
6
7
8
9
const user1 = {
"name": "Tanaka"
};
user1.name // オブジェクト名.プロパティのキー名
> "Tanaka"
user1["name"] // オブジェクト名["プロパティのキー名"]
> "Tanaka"
そして、プロパティのキー名
は、ダブルクォーテーションを省略することができます。
上記のconst user1
の"name": "Tanaka"
は、以下のようにダブルクォテーションを省略して、name: "Tanaka"
にすることができます。
1
2
3
4
5
6
7
8
9
const user1 = {
name: "Tanaka" // "name": "Tanaka"と同様
};
user1.name // オブジェクト名.プロパティのキー名
> "Tanaka"
user1["name"] // オブジェクト名["プロパティのキー名"]
> "Tanaka"
ダブルクォーテーションを省略しても、プロパティにアクセスした際に"name": "Tanaka"
の時と同様の結果を得ることができます。
JavaScriptとJSONとの違い
JSONは、JavaScriptのオブジェクト表記法がベースになっていますが、プログラミング言語ではない為、各プログラムでJSONのデータを扱う際は解析・変換(パース)する必要があります。
例えば、JSON→JavaScript
、JSON→Ruby
, JSON→Java
など
これにより、パースしやすい様に決められたJavaScriptのオブジェクト表記法とは異なるJSON独自の制約があります。
- キー名は、必ずダブルクォーテーションをつける
- バリューにゼロで始まる数値は使うことができない
1
2
3
4
const user1 = {
name: "Tanaka", // キー名のダブルクォーテーションを省略することができる
age: 05 // 0で始まる数値を使うことができる
};
JSONの場合は、キー名のダブルクォーテーションの省略やバリューにゼロで始まる数値は使うことができないので以下のように記述します。
1
2
3
4
{
"name": "Tanaka",
"age": 5
}
参考:「jsprimer JSONとは」より
JavaScript 初心者におすすめの1冊
こちらの「JavaScript「超」入門 第2版」は、完全な初心者、JavaScriptに苦手意識がある、挫折したことがある人におすすめの1冊です。
JavaScriptの基本的な文法や機能について、サンプルを使いながら手を動かして学べます。
噛み砕いた解説で基礎を叩き込みたいという方におすすめ!
JavaScriptをこれから始める人にも、前に挫折したことのある人にも!
JSONを記述する際の注意点
下記は、JSONを記述する際に陥りやすいエラーです。
エラーの原因 | 間違った例 | 正しい例 |
---|---|---|
キー名をシングルクォーテーションで囲っている | 'key': "value" |
"key": "value" |
全角スペースが含まれている | {"key": "value" } | {"key": "value" } |
プロパティの区切りにカンマ(, )がない |
{"key1":"value1" "key2":"value2" } |
{"key1":"value1", "key2":"value2" } |
JavaScriptのコメント構文を使っている | {"name": "Tanaka" // 名前} |
JSONにコメント構文はないので使えない |
JSONで使える型
プロパティの値に使うことが出来る型には、以下の種類あります。
1
2
3
4
5
6
7
8
9
{
"オブジェクト": {
"数値": 1,
"文字列": "pikawaka",
"真偽値": true,
"null値": null,
"配列": [1, 2, 3]
}
}
参考:「 jsprimer JSONとは」より
- オブジェクト -
{}
- 数値 -
1
- 文字列 -
"pikawaka"
- 真偽値 -
true
,false
- null値 -
null
- 配列 -
[]
それでは1つ1つの型を確認していきましょう。
数値
プロパティの値に123
などの数値を指定することが出来ます。
1
2
3
{
"age": 18
}
数値を使う際に先ほども解説しましたが、はじめに0をつけることが出来ないのと小数点から始まる数値を使うことが出来ないので注意してください。
1
2
3
4
{
"error1": 0123,
"error2": .324
}
構文チェックが出来るJSON Pretty Linterで確認すると、以下のようにエラーが発生します。
文字列
プロパティのバリューには、ダブルクォーテーションで囲った文字列を使うことができます。
1
2
3
4
{
"name": "Tanaka",
"comment": "私は平生もし同じ妨害論に対してものの中に聴こうです。はなはだ今をふり者はとうとうその説明なかっです"
}
また、文字列の中には、ダブルクォーテーション( "" )やバックスラッシュ( \ )を使うことができません。
例えば、commentのバリューの妨害論
をダブルクォーテーションで囲み、改行の\n
を追加すると以下のように構文エラーになったり、改行は認識さません。
このようにダブルクォテーション、もしくは改行の\n
でバックスラッシュを文字列の中で有効にする場合は、以下のように手前に\
を配置してエスケープする必要があります。
1
2
3
4
{
"name": "Tanaka",
"comment": "私は平生もし同じ\"妨害論\"に対してものの中に聴こうです。\\nはなはだ今をふり者はとうとうその説明なかっです"
}
エスケープを使用すると、以下のようにエラーが解消されます。
他にもエスケープが必要な文字には、スラッシュ(/
)やバックスペース(\b
)があるので注意してください。
null値
プロパティのバリューには、null値を指定する事が出来ます。null値とは、値がないことを指します。
1
2
3
{
"name": null
}
大文字になると、以下のようにエラーが発生するので注意してください。
真偽値
プロパティのバリューには、true
やfalse
の真偽値を指定する事が出来ます。
1
2
3
4
{
"is_deleted": true,
"is_active": false
}
true
やfalse
は小文字だけ使うことができます。大文字になると、以下のようにエラーが発生するので注意してください。
オブジェクト
オブジェクト({}
)でJSONのデータを作成していましたが、プロパティの値にもオブジェクトを使うことができます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"Tanaka": {
"Totalscore": 250,
"Arithmetic": 80,
"Science": 90,
"Music": 80
} ,
"Ito": {
"Totalscore": 230,
"Arithmetic": 80,
"Science": 80,
"Music": 70
}
}
上記の様にバリューにオブジェクトを使うことによって、階層構造を持つことが出来ます。
配列
プロパティのバリューには、配列[]
を使うことができます。
1
2
3
{
"favorite_fruit": ["strawberry", "cherry", "watermelon"]
}
配列の要素には、文字列や数値はもちろん配列やnull値や真偽値、そしてオブジェクトを使うことができます。
そして、以下のように配列の要素にオブジェクト({}
)を使うことで、オブジェクトのデータを順番に管理することができます。
1
2
3
4
5
6
7
{
"users": [
{"id": 1, "name": "Tanaka", "age":33 },
{"id": 2, "name": "Yosida", "age":18 },
{"id": 3, "name": "Tabe", "age":29 }
]
}
特徴
JSONの特徴には、主に以下の3つが挙げられます。
- 他のプログラミング言語でも使うことができる
- 軽量なデータフォーマット
- データフォーマットとして柔軟性
ほとんどのプログラミング言語において、JSONのデータを書き出すことや読み出すことができます。
また、JSONはテキストデータなのでデータ量が軽いのも特徴です。
データフォーマットとして柔軟性
JSONは、複雑なデータ構造を配列やオブジェクトを使って、柔軟に表現することができます。
例えば、以下のような表でユーザー管理をしている場合について考えてみます。
この表では特に問題が無さそうですが、会社用とプライベート用のemailを分けて管理したい場合は、以下のように会社のemailとプライベートのemailの列を作る必要がありますが、項目が増えるたびに横に列が増えて管理し辛くなりますし、重複した項目名が増えてややこしいくなります。
しかし、JSONではemailを以下のようにオブジェクトを使って階層化することで、重複した項目の種類(例: email)が増えても、管理がしやすくなります。
1
2
3
4
5
6
7
8
9
{
"id": 1,
"name": "Tanaka",
"age": 19,
"email": {
"company": "example.com",
"private": "pri-example.com"
}
}
JavaScriptでJSONを扱う方法
この章では、JavaScriptでJSON文字列をオブジェクトに変換したり、逆にオブジェクトをJSON文字列に変換する方法を解説します。
オブジェクトをJSON文字列に変換
JavaScriptのオブジェクトを JSON文字列に変換するには、以下の様にJSON.stringify()
メソッドを使います。
1
2
// 引数に渡したJavaScriptのオブジェクトをJSON文字列に変換する
JSON.stringify(JavaScriptのオブジェクト)
例えば、引数のJavaScriptのオブジェクトを以下のように記述します。
1
2
3
4
const user_object = { id: 1, name: "Tanaka", age: 19 }
JSON.stringify(user_object)
> "{"id":1,"name":"Tanaka","age":19}"
上記のコンソールで実行すると、キー名が全てダブルクォーテーションで囲われたJSON文字列が返却されます。
これは、JavaScriptとJSONとの違いで解説しましたが、JSONでは、ダブルクォーテーションでキー名を囲わなければならないなどの独自の仕様がある為です。
JSON形式に変換出来ないオブジェクト
オブジェクトの値がSymbol
や関数
のプロパティの場合は、JSON形式に変換する事が出来ないので注意してください。
1
2
3
4
5
// プロパティの値がシンボルの場合
JSON.stringify({ test1: Symbol("") })
// プロパティの値が関数の場合
JSON.stringify({ test2: function() {} })
上記のコードをコンソールで実行すると、以下のようにJSON文字列に変換されていない事がわかります。
JSON文字列をオブジェクトに変換
JSON文字列をJavaScriptのオブジェクトに変換するには、以下のようにJSON.parse()
メソッド使います。
1
2
// 引数に渡した文字列をJSONとして解析し、オブジェクトに変換する
JSON.parse(JSON文字列);
例えば、JSON文字列の箇所を以下のように記述します。
1
JSON.parse('{"id":1,"name":"Tanaka","age":19}');
コンソールで実行すると、JSON.parse
メソッドの引数に渡したJSON文字列がオブジェクトに変換されます。
引数の注意点
JSONは、ダブルクォーテーション
を容認してしまうので、JSON.parse()
メソッドの引数に渡す外側の引用符は、シングルクォテーション ではなく、ダブルクォテーションにするとエラーが発生します。
以下のように、先ほどのコードを外側の引用符をシングルクォテーション
からダブルクォテーション
に変更します。
コンソールで実行すると、以下のようにエラーが発生します。
JSON.parse
メソッドを使用する際は、引数に渡す外側の引用符をシングルクォテーションにするように注意してください。
オブジェクトに変換したデータの取り出し方
JSON.parse
メソッドでオブジェクトに変換したJSON文字列のデータを取り出すには、以下のように記述します。
1
2
3
4
5
6
7
8
9
10
const obj = JSON.parse('{"id":1,"name":"Tanaka","age":19}');
obj.id // obj["id"] でも良い
> 1
obj.name // obj["name"] でも良い
>"Tanaka"
obj.age // obj["age"] でも良い
>19
ネストした階層の場合
JSON文字列のデータが以下のようなネストした階層だった場合の取得方法も確認します。
ネストした階層のcompany
やprivate
のバリューを取得するには、以下のように親のキー名(email
)に加えて、子のキー名(private
やcompany
)を指定してます。
1
2
3
4
5
6
7
8
9
10
11
// JSON文字列をオブジェクトに変換してobjに格納する
const obj = JSON.parse('{"id": 1,"name": "Tanaka","age": 19, "email": {"company": "example.com","private": "pri-example.com"}}');
> {id: 1, name: "Tanaka", age: 19, email: {…}}
// companyのバリューを取得
obj.email.company
> "example.com"
// privateのバリューを取得
obj.email.private
>"pri-example.com"
配列のネストした階層のデータを取得したい場合
以下のように、配列の中でネストした階層のデータを取得したい場合を確認していきます。
上記の構造は、良くデータを外部のアプリケーションなどから取得(Web API)した際に、このような構造で返却される事が多いです。(実際は、もっと複雑です。)
配列の中のネストした階層のcompany
やprivate
のバリューを取得するには、以下のように記述します。
1
2
3
4
5
6
7
8
9
10
const obj = JSON.parse('{"users":[{"id":1,"nickname":"ピカ子","age":18,"email": {"company": "example1.com","private": "pri-example1.com"}},{"id":2,"nickname":"ピカオ","age":14,"email": {"company": "example2.com","private": "pri-example2.com"}}]}');
> {users: Array(2)}
// companyのバリューを取得
obj.users[0].email.company
> "example1.com"
// privateのバリューを取得
obj.users[0].email.private
> "pri-example1.com"
配列からデータを取り出してから、email
のネストしたキー名をそれぞれ指定することでデータを取得することが出来ます。
RubyでJSONを扱いたい場合は「JSON形式のデータをRubyで扱う方法」を参考にしてください。
手元に置いておきたい1冊
こちらの「初めてのJavaScript 第3版」は、基本的な文法から高度な使い方まで非常に広範にわたる内容がこの1冊にまとめられています。
タイトルに「初めての」と付いていますが、完全なプログラミング初心者向けというわけではないので注意が必要です。Rubyなど他の言語を勉強している方にとっては良書となります。
これだけ広範な内容をカバーして丁寧に解説している本はあまりないので、手元に置いておいて損はない1冊です。
最初から全て理解するというわけではなく、必要な時に都度見返すようにしましょう!
ECMAScript 2015(ES2015)の入門書!
この記事のまとめ
- JSON とは、JavaScript Object Notationの略でJavaScriptのオブジェクトの表記法をベースにしたデータフォーマットのこと
- キー名は、必ずダブルクォーテーションをつける
JSON.parse()
メソッドでJSON文字列をJavaScriptのオブジェクトに変換出来て、JSON.stringify()
メソッドでJavaScriptのオブジェクトをJSON文字列に変換することができる