JSONってなに？？
1K Views
August 09, 23
スライド概要
開発業務未経験で入社し、業務していく中で「JSON」という言葉を目にする機会が増えてきたため、概要をまとめました。
一読してもらうことで、Web開発で用いる「JSONとは何か」が分かるはずです！
■ 資料概要
・JSONとは
・JSONの書き方
・JSONの活用例①（フロントエンドとバックエンドでのデータのやり取り）
・JSONの活用例②（RDBMSでの取り扱い）
日本・中国・カナダを拠点に、AWS や GCP・Azure などのマルチクラウドに対応した、クラウド / サーバーの構築・移行、24時間365日の運用保守 / 監視、負荷テスト、Webシステム開発、サーバーサイド / API 開発 など、クラウド / サーバーに特化したサービスをご提供いたします。 ● コーポレートサイト https://beyondjapan.com ● YouTube https://www.youtube.com/c/beyomaruch ● X https://x.com/beyondjapaninfo ● Instagram https://www.instagram.com/beyondjapan_24365
関連スライド
各ページのテキスト
JSONってなに？？
JSONとは ● JSONは「JavaScript Object Notation」の略称 ○ JavaScript：プログラミング言語の1つ ○ Object Notation：データを簡単に扱えるようにフォーマットとして構造化した記述方法 ■ JavaScriptのオブジェクト表記法に由来するデータの記述方式 ● データ通信が必要な場面で言語を問わず活用されている、共通のデータ記述形式 ○ JavaScriptに限らず、各種プログラミング言語で利用できる ○ 特にREST APIなどで使われる
JSONのメリット ● ● JSONが登場する前まで主に使われていたXMLと比較してテキスト量が少ないため、 高速な通信が求められる場合に有用 JSONは項目と値のペアで記載するため視覚的に確認しやすく、 階層が深くなっても構造を追いやすい ○ XMLの例 ○ JSONの例
JSONの型 ● JSONで使用できる型は6つある ○ 文字列（”...”） ダブルクォーテーションで囲んだ文字列を指定 数値（123, 12.3など） ■ 123, 12.3などの数値を指定 Null値（null） ■ nullはすべて小文字で指定 Bool値 ■ trueかfalseの2値のいずれかを指定 オブジェクト（{...}） ■ {...}で指定 ■ 階層構造を持つことが可能 配列（[...]） ■ 配列要素には、文字列、数値、Null値、真偽値、オブジェクト、配列すべてを使用可能 ■ ○ ○ ○ ○ ○
JSONの書き方① ● 基本的な形式：データのkeyとvalueを{ }の中にコロンで区切って記載 ※keyは文字列、valueは様々なデータ型で記述可能 ※文字列は必ずダブルクォーテーション（”）で囲む→シングルクォーテーション（’）は不可 ※データが2つ以上ある場合は、カンマで区切る ● 読みやすさを重視し、データを改行したりインデントを使って見た目を変えても問題なし
JSONの書き方② ● 配列や値のみの表記もJSONに従ったデータとして認められる ※文字列は必ずダブルクォーテーションで囲う
JSONでよくある記述ミス ● シングルクォーテーションを使用している 2行目：valueである「tanaka」に「’」を使用しているので構文エラー 3行目：keyである「age」に「’」を使用しているので構文エラー ● 適切でないカンマ 3行目：複数のオブジェクトがあるにも関わらず「,」で区切られていない 6行目：配列として複数の要素があるにも関わらず「,」で区切られていない
JSONの活用例 ● フロント側（例： JavaScript）とバックエンド（例： PHP (Laravel) ）でのデータのやり取り リクエスト フロントエンド バックエンド レスポンス
フロント（JavaScript）での JSONの取り扱い方 ● fetchメソッドなどを用いて APIを叩くことで、 JSONデータを取得する ○ 非同期のネットワーク通信を簡単にわかりやすく記述できるメソッド ○ フロント側のJavaScriptから、HTTPリクエストを送信し、 指定した URL からリソース（データ）を取得することができるようになる 出力結果 （11ページ目に記載の処理がバックエンド側で実行され、 フロント側で受け取った後の出力結果）
バックエンド（PHP(Laravel)）での JSONの取り扱い方① ● フロント側からのリクエストにてJSONデータを受け取る場合 ○ リクエストのContent-Typeヘッダが適切にapplication/jsonへ設定されている限り、 inputメソッドを介してJSONデータにアクセスできる リクエストボディ：JSONデータ
バックエンド（PHP(Laravel)）での JSONの取り扱い方② ● レスポンスとしてフロント側にJSONデータを送る場合 ○ コントローラーから配列を返すことで、Laravelが自動的にJSONレスポンスへ変換する
RDBMS（MySQL）での JSONの取り扱い方 ● ● JSON型はMySQL5.7以上で利用できる JSONデータを扱うための便利な関数が用意されている（下記一部） ○ JSONデータ生成（JSONオブジェクトを生成）→JSON_OBJECT ○ JSONデータ検索（指定パスのデータ抽出）→JSON_EXTRACT
まとめ ● JSONとはデータ通信が必要な場面で言語を問わず活用されている、 共通のデータ記述形式 ● JSONを用いることで、フロント側とバックエンド側での通信時に 情報を簡単にやり取りすることができる ● RDBMSでもバージョンによってはJSON型を利用でき、 JSONデータを扱うための便利な関数が用意されている