【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 初心者におすすめの１冊

リンクをコピーしました

こちらの「JavaScript「超」入門 第2版」は、完全な初心者、JavaScriptに苦手意識がある、挫折したことがある人におすすめの１冊です。

JavaScriptの基本的な文法や機能について、サンプルを使いながら手を動かして学べます。

噛み砕いた解説で基礎を叩き込みたいという方におすすめ！

確かな力が身につくJavaScript「超」入門 第2版

JavaScriptをこれから始める人にも、前に挫折したことのある人にも！

楽天市場

Amazon

JSONを記述する際の注意点

リンクをコピーしました

下記は、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
• 配列 - []

それでは１つ１つの型を確認していきましょう。

数値

リンクをコピーしました

プロパティの値に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の特徴には、主に以下の３つが挙げられます。

• 他のプログラミング言語でも使うことができる
• 軽量なデータフォーマット
• データフォーマットとして柔軟性

ほとんどのプログラミング言語において、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で扱う方法」を参考にしてください。

手元に置いておきたい１冊

リンクをコピーしました

こちらの「初めてのJavaScript 第3版」は、基本的な文法から高度な使い方まで非常に広範にわたる内容がこの１冊にまとめられています。

タイトルに「初めての」と付いていますが、完全なプログラミング初心者向けというわけではないので注意が必要です。Rubyなど他の言語を勉強している方にとっては良書となります。

これだけ広範な内容をカバーして丁寧に解説している本はあまりないので、手元に置いておいて損はない１冊です。

最初から全て理解するというわけではなく、必要な時に都度見返すようにしましょう！

初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書！

楽天市場

Amazon

役に立ったらSHARE♪

• twitter
• facebook
• はてブ