Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

JSONを詳細に徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20220221133701p:plain

おはようございます。Shotaです。

プログラミングを勉強していると、JSONを聞いたことがあると思います。

しかし、JSONについてより詳しく説明しろと言われてもなかなかできない人が結構いるのではないでしょうか?

そこで、今回の記事ではJSONについて詳細に解説します。早速、本題に入りましょう。

JSONとは

JSONとは、JavaScript Object Notationの略で、ジェイソンと呼ばれています。JSONJavaScriptで定義されているオブジェクト表記法の一つで、テキスト形式で表記されます。

JSONファイルは拡張子が.jsonのファイルで、処理の中でJSON形式のデータを受け取ったりします。主にWebアプリでデータを転送する際によく活用されます。

JSONの書き方

JSONの書き方は非常にシンプルで、以下の規則に従います。

{ "name": "Taro" }
{ "name": "Taro", "age": 20 }
{
    "name": "Taro",
    "age": 20,
    "is_adult": true
}
  • データは左側に名前、右側に値を書きます。これらはペアで書きます。値は必ず""で囲まなければなりません。''だとエラーが発生します。
  • データの最初と最後は{}(波括弧)でくくります。名前と値の間に:(コロン)を入れます。
  • 名前と値のペアが複数ある場合は、名前と値のペアの間に,を入れます。
  • 配列は[]で、ネストは{}で表記します。

JavaScriptでオブジェクトを扱ったことがあるならそこまで理解に苦労しないと思います。

JSONが対応しているデータ

JSONは以下のデータ型に対応しています。

  • 文字列
  • 数値
  • null
  • 真偽値(true, false)
  • オブジェクト
  • 配列

文字列

文字列は""\以外の文字であれば何でも使えます。

数値

数値は""で囲まずそのまま書きます。""で囲むと文字列として認識されるので十分に注意してください。

{ "point": 100 } // こちらは数値として認識される
{ "point": "100" } // 文字列として認識される

null

nullは全て小文字で指定します。

{ "value": null }

真偽値

JSONでは真偽値を指定できます。こちらも数値と同様に""は必要ありません。

{ "a": true, "b": false }

オブジェクト

JSONではオブジェクトの中にオブジェクトを入れられます。これをネストすると言います。

{
    "id": 1,
    "name": "Kato",
    "status": {
        "age": 20,
        "phone_number": "xxxxxxxxxxxxx",
        "birth": "2001/10/01"
    }
}

配列

オブジェクトの場合は{}を使いましたが、配列を使いたい場合は[]を用います。

{
    "id": 1,
    "name": "Kato",
    "array": [10, 20, 30, 40, 50]
}

JSONの活用例

JavaScriptJSONを活用する際には、主に以下のメソッドがあります。

  • stringify
  • parse

それぞれ順番に解説していきます。

stringify

オブジェクトや値をJSONに変換します。

console.log(JSON.stringify({ a: 1, b: 10 }))

▼出力結果

{ "a": 1, "b": 10 }

parse

文字列をJSONとして解析し、文字列で記述されているJavaScriptの値やオブジェクトをそのまま構築します。生成されたオブジェクトが返される前に変換を実行できます。

const json = '{ "result":true, "count":10 }'
const obj = JSON.parse(json)

console.log(obj.count)
console.log(obj.result)

▼出力結果

10
true

まとめ

今回の記事では、JSONについてサンプルコード付きで詳細に徹底解説しました。

今回の記事を参考に、JSONについて理解を深めていただければ非常に幸いです。今回の記事はこれで終了です。

参考サイト

products.sint.co.jp

and-engineer.com

qiita.com