【JSON入門】JSONとは?JS相互変換について(stringify/parse)

スポンサーリンク
アイキャッチ 猫JavaScript
スポンサーリンク

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。

スポンサーリンク

JSONファイルとは

どういうファイルなの?

JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。

つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。

JSONの良いところ

JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信さまざまなプログラミング言語との共有を可能にしています。

  • テキストデータのため、軽量
  • オブジェクトのように扱える
  • 単純な構造

オブジェクトとは似て非なるもの

先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。

しかし、JSONはテキストデータであり、オブジェクトではありません

こちらの例を見てください。

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };

テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。

  • プロパティのみ含めることができ、関数は含められない
  • プロパティをダブルクォーテーション(””)で括る
    →括られた文字列のみプロパティとして使用できる

また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。

この辺りを理解しておくだけでも、開発するときに違うと思います。

スポンサーリンク

JSONの基本的な使い方

さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。

オブジェクトからJSONへ(エンコード encode)

stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

var json = JSON.stringify(obj);
console.log(json)

JSONからオブジェクトへ(デコード decode)

parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある

注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。

// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

var obj = JSON.parse(json);
console.log(obj)
スポンサーリンク

まとめ

いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。

良かったら次回も見てみてくださいね!

↓↓↓【JSON入門シリーズ♪】

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




JavaScriptプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました