Jsonに関する基本的なお話

はじめまして、昨年6月に入社しました玉手と申します。
まだ入社半年の新人も新人ですが、開発を担当させて頂いております✨
24歳ピチピチの新社会人!……と言いたいところですが、地元北海道で事務員を5年してから転職でこちらへ来たため、既に若干くたびれたOL感が否めないのが悲しいところでございます……。
心機一転、失いかけているフレッシュさを取り戻しつつ開発を進めていきたいですね!

 

さて、開発を行うようになってから”Json”という言葉をよく耳にするようになりました。
初めて実際に触れたのはAWSの設定を行う時だったような……?少し前までは良く分からず使っていましたが、実際に開発を行うにつれて利用する機会がぐわっと増えたので、初歩の初歩ではございますが自分用に色々まとめてみました!

 

そもそもJsonとは?

JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。

MDN Web Docsより

 

MDNでは上記のように説明がされているようです。
つまりJsonは JavaScript Object Notatioの略称であり、その名前に入っているように「JavaScriptのオブジェクトの書き方を元にしたデータ定義方法」を指すとのこと。
なるほど……?
言ってしまえばJsonとして定められたデータ定義方法に乗っ取って書かれたテキストデータは全てJsonとなるわけですね。
データ定義方法と言えばHTMLやXML、CSVなどなど……。それらと同列と思えば大分身近に感じるような気がします。

 

 

実際の記述方法

基本的には{“キー”:”値”}のように記述すれば〇。
ですが、この時必ずダブルクォーテーションで囲まなければいけません。シングルクォーテーションだとエラーになってしまうとのこと。
ついうっかり間違えてしまいそうなので、頭に入れておくことが必要そうです。

では実際にプログラムで定義・使用する時はどのようにするのでしょうか?ここではJavaScriptでの記述方法をご紹介します!

 

//定義
var dataList = {
"title": "Jsonに関する基本的なお話",
"content": "こんにちは!"
};
//取得
console.log(dataList.title); //出力→Jsonに関する基本的なお話

 

値にはテキストだけでなくbool型や配列、オブジェクトも入れることが出来ます。こちらも実際の例を見ていきましょう!

 

・文字型(※バックスラッシュ以外)

{“name” : “tamate”}

 

・数字(””で囲むと文字扱いになる)

{“id” : 1}

 

・NULL

{“title” : null}

 

・bool型

{“a” : true, “b” : false}

 

・オブジェクト型

{
"id": 1,
"name": "tamate",
"about": {
  "gender": "female",
  "hobby": "reading",
  }
}

 

・配列型

{
"id": 1,
"result": [
  87,
  83,
  71,
  59,
  91
  ]
}

 

以上の六種類を扱うことが出来るようです。

オブジェクト型や配列をひとまとめに格納できるのはとても便利ですね!

サーバーサイドとフロントエンド間のデータの受け渡しに便利なだけでなく、MySQLではカラムの型にJson型があったりJson型でのデータ取得専用の関数があったりなどなど……活用の幅をまだまだ感じるデータ形式です。
活用方法を思いつき次第、また纏めてみたいですね。