javascriptでJSON形式を扱う（parseとstringify）【現役SEが紹介】

javascriptのJSONの扱い方を知りたい。
そもそも、JSONというものが何かということも教えてほしい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

・JSONとは
・javascriptのJSON.parseの使い方
・javascriptのJSON.stringifyの使い方

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptのJSONの扱い方について説明していきます。

JSONとはデータ形式の一種で、サーバとのやり取りでよく使用したりします。
javascriptでJSONデータを扱う際はJSONを読み込む処理が必要になってきます。
本記事でJSONを扱う方法を分かりやすく説明していきます。

JSONとは

JSONとは、JavaScript Object Notationの略でデータフォーマットの1種です。

システムでは、データをやりとりする際にどういったデータの形式でやりとりを行うかあらかじめ決めておくことが多いです。

CSVなども有名なデータフォーマットの1つになります。

JSONは、名前の通りjavascriptのオブジェクト型をベースとした形式で、javascriptで扱いやすいデータ形式でもあります。

もし、オブジェクトがどういったものかイメージできない方は先に以下の記事をご覧いただくと良いかと思います。

初心者向けにオブジェクトについて分かりやすく解説しております。

今から説明するparse、stringifyはJSONの文字列データとjavascriptのオブジェクト型への変換に使用する処理になります。
なので、まずjavascriptのオブジェクト型を理解してからの方がこの後の内容が理解しやすいかと思います。

javascriptでJSONのデータを扱う際は、JSON.parseを利用します。

parse（パース）という言葉はここだけでなく、システム開発でよく使用される言葉なのでこれを機に覚えておくと良いかと思います。
直訳すると「解析する」という意味になります。このデータをパースして使用するみたいな感じでよく話に出てきたりします。

JSONデータはあくまでも文字列データいわゆるテキスト情報なので、そのまま使用せずjavascriptで扱いやすくするためにオブジェクト型に変換することが多いです。

それをこの「JSON.parse」で行います。

例えば以下の通りです。

const json = '{"name":"test", "age":20}';
const object = JSON.parse(json);

console.log(json.name);
console.log(object.name);

上記の実行結果は以下のようになります。

> undefined 
> "test"

json.nameはまだオブジェクトに変換する前にname属性を取得しようとしています。
そのままの場合、オブジェクト型ではないのでjson.nameといった取得ができません。

もし、プログラム上で上記のような特定の属性情報取得して扱いたい場合は一度オブジェクトに変換してしまったほうが扱いやすくなるわけです。

変換の仕方はJSON.parse(json)だけです。
カッコ内にオブジェクトに変換したい文字列または文字列の変数を入れるだけでできます。

もし、JSON文字列がJSONのルールを守っていない場合、こんな感じのエラーがでます。

Error: Unexpected token a in JSON at position 1

どこが悪いかまで教えてくれるので、上記のようなエラーが出たら確認してみましょう。

次にこちらは逆の変換になります。オブジェクト型からJSONの文字列に変換する場合です。

書き方もparseとほとんど同じです。

const object = {"name":"test", "age":20};
const json = JSON.stringify(object);

jsonの変数に変換されたJSON文字列が入ります。

javascript内でのやりとりであれば、オブジェクト型のままで問題ないですが、JSON形式として外部とやりとりする際はJSON文字列に変換する必要があります。

parseと合わせてセットで覚えておきましょう。

javascriptのJSONの扱いについて説明しました。
parseとstringifyのメソッド使用して変換を行う形になります。

サーバとREST APIなどでデータのやりとりする場合、このJSONのデータフォーマットを高確率で使用することになります。

フロントエンジニアにとって、必要な知識になりますので、今回の記事でなんとなくでも覚えておいてもらえたらと思います。