【parse / stringify】JavaScriptでJSONを簡単に扱う方法
JSONの概要や書き方などから解説し、JavaScriptでJSONを扱う方法を紹介します。
JSONの概要や書き方などから解説し、JavaScriptでJSONを扱う方法を紹介します。
スキルアップ
2023/02/22 UP
- プログラミング
- javascript
- SE資格・スキル
さまざまなシステムで入出力データ形式として用いられるJSON。お使いのシステムでも、JSONを取り扱う機会は多いのではないでしょうか。しかし、そもそもJSONをよく理解していない、扱い方がわからないという方もいるでしょう。この記事はそのような方向けの記事です。
多くのプログラミング言語で、JSONを読み書きするための関数などが用意されていますが、JavaScriptでは「JSON.parse」や「JSON.stringify」といったメソッドを利用することで簡単に取り扱うことが可能です。
今回は、JSONの概要や書き方などから解説し、JavaScriptでJSONを扱う方法を紹介します。
JSONとは
はじめに、JSONはJavaScript Object Notationの略称であり、テキストベースの構造データ表現フォーマットのことを表します。JavaScriptオブジェクトの表記構文であり、人間が理解しやすく簡潔に記載できるデータフォーマットです。
JSONを使うことで、JavaScriptオブジェクトを文字列化して他のシステムに渡したり、他のシステムで出力されたJSONをパースして、JavaScriptオブジェクトにしたりすることができます。
JSONは、JavaScriptでしか使えないわけではありません。そのほかのプログラミング言語でも利用することが可能です。それぞれのプログラミング言語で、JSONを扱うための関数などが用意されており、その一例を以下に示します。
|
プログラミング言語 |
JSONの生成 |
JSONの読み込み |
|
JavaScript |
JSON.stringfiy() |
JSON.parse() |
|
PHP |
json_encode() |
json_decode() |
|
Python |
Json.dump() |
Json.load() |
|
C# |
DataContractJsonSerializer、DynamicJson |
|
このように、各プログラミング言語でJSONを扱えるため、たとえば、PHPで生成したJSONデータをJavaScriptで受け取る、といったことが可能です。
JSONのフォーマット（形式）・構造と書き方
ここからは、実際のJSONデータを元に解説を進めていきます。
JSONの形式や構造を理解しやすくするために、次のサンプルを用意しました。
|
JSONサンプル |
|
{ "Name" : "JsonData", "Desc" : "JavaScript Object Notation", "UseInt" :1 , "UseBool" : false, "UseArray" : [1,2,3,4,5]} |
|
見やすくしたバージョン |
|
{ "Name" : "JsonData", "Desc" : "JavaScript Object Notation", "UseInt" : 1, "UseBool" : false, "UseArray" : [ 1, 2, 3, 4, 5 ] } |
JSONデータでは、プロパティ名（キー）と値を記載していきます。プロパティ名は、ダブルクォーテーション「”」で囲み、コロン「:」で区切ります。プロパティ名と値はセットで記載し、異なるプロパティ名と値はカンマ「,」で区切ることが基本的な形式です。
|
{“プロパティ名1”:”値1”, “プロパティ名2”:”値2”,・・・} |
また、値には次の「型」が存在しており、それぞれ記述方法が異なります。
|
値の型 |
記述方法 |
|
文字列 |
ダブルクォーテーション「”」で囲む |
|
数値 |
そのまま入力する |
|
ヌル値 |
null（ダブルクォーテーションで囲まない） |
|
真偽値 |
true、falseのいずれかを入力 |
|
オブジェクト |
「｛｝」でくくり、カンマ「,」で区切る |
|
配列 |
「[]」でくくり、カンマ「,」で区切る |
文字列、数値に関しては説明不要と思いますが、そのほかの型については簡単に補足します。「ヌル値」は値が無いことを示すものであり、「真偽値」は「真（true）」と「偽（false）」のいずれかを示す値です。
「オブジェクト」は、階層構造を持つことができる値であり、入れ子のデータを作成することができます。最後に、「配列」は一つのプロパティ名に対して、複数の値を与えたいときに使用するものです。配列要素には文字列～配列までのすべての型が指定できます。
はじめは難しく感じるかもしれませんが、JSONの形式・構造は簡潔であり、人間でも理解しやすいものであることがわかるのではないでしょうか。
JSON自体を配列に
値の型である「配列」に関して、次のサンプルを元にもう少し詳しく解説しましょう。配列を利用することで、JSON自体を配列として扱うことができるようになります。
|
JSONの配列のサンプル |
|
[ { "Name" : "JsonData1", "Desc" : "JavaScript Object Notation1", "UseInt" :1 , "UseBool" : false, "UseArray" : [11,12,13,14,15]}, { "Name" : "JsonData2", "Desc" : "JavaScript Object Notation2", "UseInt" :2 , "UseBool" : true, "UseArray" : [21,22,23,24,25]}, { "Name" : "JsonData3", "Desc" : "JavaScript Object Notation3", "UseInt" :3 , "UseBool" : false, "UseArray" : [31,32,33,34,35]} ] |
|
見やすくしたバージョン |
|
[ { "Name": "JsonData1", "Desc": "JavaScript Object Notation1", "UseInt": 1, "UseBool": false, "UseArray": [ 11, 12, 13, 14, 15 ] }, { "Name": "JsonData2", "Desc": "JavaScript Object Notation2", "UseInt": 2, "UseBool": true, "UseArray": [ 21, 22, 23, 24, 25 ] }, { "Name": "JsonData3", "Desc": "JavaScript Object Notation3", "UseInt": 3, "UseBool": false, "UseArray": [ 31, 32, 33, 34, 35 ] } ] |
複雑なデータ構造を表現するためには、配列による入れ子のデータ構造表記は欠かせません。このサンプルでは、一つの配列の中に3つのJSONデータ（オブジェクト）が記載されています。
配列[0]のデータが「”Name”:”JsonData1”」のオブジェクト、配列[1]のデータが「”Name”:”JsonData2”」のオブジェクトとなっています。
このように、JSON自体を配列として扱うことも可能であり、配列やオブジェクトを入れ子構造で記述することで、複雑なデータ構造を表現することが可能なのです。
JSON.stringify() – JavaScriptでJSONを作成する
ここからは、実際にJavaScriptを使ってJSONデータの入出力をしてみましょう。サンプルコードを示しますので、動作を確認できるWEBサービスなどで、実際に実行して、動きを確認してみてください。
まずは、JSONを生成するための「JSON.stringify()」のサンプルです。
|
// JSON.stringify() のサンプル // 元のオブジェクト const to_json = [ { Name : "JsonData1", Desc : "JavaScript Object Notation1", UseInt :1 , UseString : "String1", UseArray : [11,12,13,14,15]}, { Name : "JsonData2", Desc : "JavaScript Object Notation2", UseInt :2 , UseString : "String2", UseArray : [21,22,23,24,25]}, { Name : "JsonData3", Desc : "JavaScript Object Notation3", UseInt :3 , UseString : "String3", UseArray : [31,32,33,34,35]} ] console.log(to_json); // 確認用 console.log(to_json[0].Name); // 「JsonData1」が表示される
// JSONに変換 const json_string = JSON.stringify(to_json); console.log(json_string); // 確認用 console.log(json_string[0].Name); // 参照できない |
JSON.stringify関数は、JavaScriptのデータをJSONに変換するための関数です。JSONに変換するためのデータとして、サンプルではto_json変数にデータを代入しています。
to_json変数は、3つのオブジェクトが入っている配列であり、この時点では「to_json[0].Name」とすることで、to_json変数の配列0番目のNameである「JsonData1」が参照できます。
その後、json_string変数に、JSON.stringify関数を使って文字列化したJSONデータを代入。JSONデータを文字列化してしまうため、その後は「json_string[0].Name」ではデータが参照できなくなります。
json_string変数の中にある、文字列化されたデータは、テキストファイルに出力するなどして、別システムで利用することができます。
JSON.parse () – JavaScriptでJSONを読み込む
次に、JSONデータをJavaScriptで読み込んでみましょう。
JavaScriptでJSONデータを読み込む場合は、「JSON.parse()」を利用します。
|
// JSON.parse() のサンプル
const to_json = [ { Name : "JsonData1", Desc : "JavaScript Object Notation1", UseInt :1 , UseString : "String1", UseArray : [11,12,13,14,15]}, { Name : "JsonData2", Desc : "JavaScript Object Notation2", UseInt :2 , UseString : "String2", UseArray : [21,22,23,24,25]}, { Name : "JsonData3", Desc : "JavaScript Object Notation3", UseInt :3 , UseString : "String3", UseArray : [31,32,33,34,35]} ]
const json_string = JSON.stringify(to_json); console.log(json_string[0].Name); // 参照できない // ---ここまでは先ほどのサンプルと同じ---
// JSONからオブジェクトに const from_json = JSON.parse(json_string); console.log(from_json); // 確認用 console.log(from_json[0].Name) // 「JsonData1」が表示される |
前半部分は、先ほどの「JSON.stringify() 」のサンプルと同じです。本来であれば、JSONファイルを読み込むなどして実行しますが、わかりやすくするために1つにまとめました。
JSON.stringify関数によって、JSONデータが格納されたjson_string変数に対して、JSON.parse関数を使って元のオブジェクトに戻しています。
JSON.stringfy関数の実行後は文字列化されてしまうため、「json_string[0].Name」ではデータが参照できない部分は先ほどのサンプル通りです。今回は、この文字列化したデータをJSON.parse関数を通して元に戻して、from_json変数に格納します。
そのため、「from_json[0].Name」では、元データの配列0番目のNameである「JsonData1」が参照できるようになります。
このように、JSON.stringify関数とJSON.parse関数を使うことで、簡単にJSONデータの入出力ができることがわかります。
JSONはさまざまな言語と連携も簡単でおすすめ！
JSONと同じようなテキストベースの構造データ表現フォーマットとしては、「XML」が挙げられますが、JSONは可読性が高く、さまざまなプログラミング言語でパースすることが可能です。
JSONは、さまざまなシステムと連携するための基盤となるWeb APIなどを作る際に特に効果を発揮します。システム間でデータの受け渡しが必要である場合は、JSONで入出力してみてはいかがでしょうか。
