【JavaScript入門】JSONの作成とparse() / stringify()の使い方！

こんにちは、ライターのマサトです！

今回は、JavaScriptでよく使われるデータ形式の「JSON」について学習していきましょう！

JSONデータを使うことで、データベースをテキスト形式で簡単にかつ軽量に扱うことができるので便利です。

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、JSONについてしっかり学習して自分のスキルアップを目指しましょう！

「JSON」とは？

それでは、まず最初にJSON(JavaScript Object Notation)について基本的な知識から学習を進めていきましょう！

「JSON」は、さまざまな情報をやり取りするためのデータ形式のことでファイルの拡張子は「.json」になります。

JSONは軽量で単純なテキストデータのため、サーバー間の通信やさまざまなプログラミング言語との共有などにも効果的です！

JavaScriptのオブジェクト形式のような構造をしていることから、特にJavaScriptと親和性が高いのが特徴です。

本記事では、「JSON」について基本から応用技まで学べるように構成しているのでぜひ参考にしてみてください！

「JSON」の使い方

この章では、JSONデータの基本的な使い方について学習をしていきます。

一般的な作成方法からデータの追加・削除について詳しく見ていきましょう！

JSONデータを作成する方法

まずは、最も基本となるJSONデータの作成方法から学習しましょう。

JavaScriptのオブジェクト構造を作る時とほとんど同じなのですが、プロパティと値をそれぞれ「” “」で囲む必要があります。

次のサンプル例を見てください！

var json = {
    "name": "taro",
    "age": "30",
    "tel": "090-0123-4567"
}

この例では、「name / age / tel」という3つのプロパティと値がペアになったJSONデータを作成しています。

基本的な構造はオブジェクトと同じであることが分かるでしょう。

ちなみに、このデータを「○○○.json」というファイル名で保存すれば、さまざまなケースで利用できるJSONファイルになります。

配列構造のJSONデータを作る方法

JSONデータは、オブジェクトと同じように配列構造を形成することも可能なのでご紹介しておきます！

例えば、3人分の情報が記載されたJSONデータを1つにまとめたい時は次のように記述します。

var json = [
    {
        "name": "太郎",
        "age": "30",
        "tel": "090-0123-4567"
    },
    {
        "name": "花子",
        "age": "23",
        "tel": "080-4567-8901"
    },
    {
        "name": "三郎",
        "age": "18",
        "tel": "070-3456-7890"
    }
]

この例では、一人ずつのJSONデータを配列に格納することでまとめているのが分かりますね。

このようにカンマ区切りで複数のデータをまとめることも可能で、データの階層構造を作ることもできる柔軟性を持っています。

JSONデータを参照する方法

今度は、作成したJSONデータをプログラムで利用するために参照方法について見ていきいましょう！

次のJSONデータを見てください。

var json = {
    "name": "taro",
    "age": "30",
    "tel": "090-0123-4567"
}

これは冒頭で作成したJSONですが、例えば「name」プロパティの値を取得して表示するにはどうすれば良いでしょうか？

実は、一般的なオブジェクトと同じように指定可能です。

次のサンプル例を見てください！

console.log(json.name);

実行結果

taro

この例では、JSONデータが格納されている変数名に「.（ドット）」を繋げることでプロパティにアクセスしています。

「json.name」のようにプロパティ名を繋げるだけで、その値を取得できているのが実行結果からも分かりますね。

もちろん、配列構造のJSONも「json[2].name」のように配列を扱う感覚で値を取得することができます。

「JSON」データの操作

この章では、JSONデータをプログラミングするのに便利な追加・削除の方法について見ていきましょう！

主に、push / deleteを活用したプログラミング手法について学んでいきます。

pushでJSONデータを追加する方法

まずは、JSONへ任意のデータを追加する基本的な方法について見ていきましょう！

考え方としては、普通のオブジェクト構造にデータを追加する方法と同じなので簡単です。

例えば、次のようなJSONがあるとします。

var json = {
    "name": "taro",
    "age": "30",
    "tel": "090-0123-4567"
}

このJSONデータに新しく「area」というプロパティと値を追加したい場合は次のように記述します。

json.area = "Tokyo";

これで、JSONデータへ「”area”: “Tokyo”」という項目が新規に追加されたことになります。

また、配列構造をしているJSONについては「push」を活用することで追加が行えます。

json.push({name: '五郎'});

この場合、JSONの末尾に新しいデータが追加されることになります。

もし、既存のデータにあるプロパティを追加したいというケースでは、一般的な配列を扱うように操作できます。

json[1].area = 'tokyo';

この例は、1番目に登録されているJSONデータの中に「area」というプロパティを新規に追加するという意味になります。

deleteでJSONデータを削除する方法

今度は、任意のJSONデータを削除する方法について見ていきましょう！

これも考え方はオブジェクト構造を削除する手法と同じです。

最も簡単な方法としては、オブジェクトデータを削除できる「delete」演算子を使うことでしょう。

次のサンプル例を見てください！

var json = {
    "name": "taro",
    "age": "30",
    "tel": "090-0123-4567"
}

delete json.age;

console.log( json );

実行結果

{"name":"taro","tel":"090-0123-4567"}

この例では、「delete」演算子を使って「age」プロパティを削除しているのが分かります。

実行結果を見ると「name / tel」の2つのプロパティだけしか表示されていないのが確認できますね！

「JSON.stringify()」の使い方

この章では、さまざまな値をJSONデータにエンコード（変換）するための方法について学習をしていきます。

主に、「JSON.stringify()」メソッドを使ったオブジェクトや配列のJSON化について学んでいきます。

オブジェクトをJSONにエンコード(encode)する方法

まずは、さまざまな値をJSONデータにすることができる「JSON.stringify()」メソッドについて見ていきましょう！

「JSON.stringify()」を使うと、例えばオブジェクトデータをJSONに変換するような処理が簡単に実現します。

一般的な記述としては、

【JSON.stringify( オブジェクトデータ )】

のように引数へJSON化したいデータを指定すればOKです。

次のサンプル例を見てください！

var obj = {
    name: '太郎',
    age: 30,
    area: 'Tokyo'
}


var json = JSON.stringify( obj );

console.log( json );

実行結果

{"name":"太郎","age":30,"area":"Tokyo"}

この例では、オブジェクトデータを「JSON.stringify()」でJSON化しているのが分かりますね。

実行結果を見ると各プロパティが「” “」で囲まれているのも確認できます。

ちなみに、プロパティの値が「undefined」の場合はJSONに変換された時に省略されるので注意しておきましょう！

配列(Array)をJSONにエンコード(encode)する方法

今度は、配列データをJSONにエンコード（変換）してみましょう！

配列を使うケースとしては、複数のオブジェクトデータをまとめている場合が多いでしょう。

次のような配列構造があるとします。

var users = [
    {
        name: '太郎',
        age: 30
    },
    {
        name: '花子',
        age: 20
    },
    {
        name: '田中',
        age: 25
    }
];

この例では、3人分のユーザーデータ（オブジェクト）を格納した配列があります。

この場合もオブジェクトをJSON化する手順とまったく同じで、配列データを次のように指定します！

var json = JSON.stringify( users );

console.log( json );

実行結果

[{"name":"太郎","age":30},{"name":"花子","age":20},{"name":"田中","age":25}]

配列「users」をJSON.stringify()の引数に指定しているのが分かります。

「JSON.parse()」の使い方

この章では、JSONのデコードについて学習をしていきましょう！

JSONデータは単なるテキストデータなので、JavaScriptで扱えるような形式に変換する方法について学びます。

JSONデータをオブジェクトにデコード(decode)する方法

これまで学習してきた「JSONデータ」は、単純なテキストデータであり文字列でもあります。そのため、JavaScriptでJSONデータを受け取った場合、プログラムで利用しやすい形式に変換する必要があるのです。

これを簡単に実現してくれるのが「JSON.parse()」メソッドです！

例えば、次のサンプル例を見てください！

var obj = {
    name: '太郎',
    age: 30,
    area: 'Tokyo'
}

// オブジェクトデータをJSON化
var json = JSON.stringify( obj );

console.log( json.name );

実行結果

undefined

この例では、オブジェクトデータをJSONにエンコードしたあとに「name」プロパティを出力しています。実行結果を見ると「undefined」になっているのが分かりますね。

つまり、文字列データのJSONにオブジェクトのようなアクセスはできないという意味になります。

そこで、JSONを再びオブジェクトデータの形式に変換して、JavaScriptから簡単に扱えるようにしてみましょう！

var obj = {
  name: '太郎',
  age: 30,
  area: 'Tokyo'
 }
// オブジェクトデータをJSON化
 var json = JSON.stringify( obj );
 
 // JSONを再びオブジェクトデータの形式に変換
 json = JSON.parse( json );
 console.log( json.name );

実行結果

太郎

この例では、「JSON.parse()」の引数にJSONデータを指定することで、オブジェクトデータに変換しています。

すると、先ほどは「undefined」だったのが今度はしっかりと「太郎」という値が出力されていますね。

このように、JSONデータのエンコード・デコードはペアでよく使われるので慣れておくようにしましょう！

まとめ

今回は、JavaScriptでよく使われるデータ形式の「JSON」について学習をしました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！