JSONってなに??

765 Views

August 09, 23

スライド概要

開発業務未経験で入社し、業務していく中で「JSON」という言葉を目にする機会が増えてきたため、概要をまとめました。

一読してもらうことで、Web開発で用いる「JSONとは何か」が分かるはずです!

■ 資料概要

・JSONとは
・JSONの書き方
・JSONの活用例①(フロントエンドとバックエンドでのデータのやり取り)
・JSONの活用例②(RDBMSでの取り扱い)

profile-image

日本・中国・カナダを拠点に、AWS や GCP・Azure などのマルチクラウドに対応した、クラウド / サーバーの構築・移行、24時間365日の運用保守 / 監視、負荷テスト、Webシステム開発、サーバーサイド / API 開発 など、クラウド / サーバーに特化したサービスをご提供いたします。 ● コーポレートサイト https://beyondjapan.com ● YouTube https://www.youtube.com/c/beyomaruch ● X(Twitter) https://twitter.com/beyondjapaninfo ● Instagram https://www.instagram.com/beyondjapan_24365

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

JSONってなに??

2.

JSONとは ● JSONは「JavaScript Object Notation」の略称 ○ JavaScript:プログラミング言語の1つ ○ Object Notation:データを簡単に扱えるようにフォーマットとして構造化した記述方法 ■ JavaScriptのオブジェクト表記法に由来するデータの記述方式 ● データ通信が必要な場面で言語を問わず活用されている、共通のデータ記述形式 ○ JavaScriptに限らず、各種プログラミング言語で利用できる ○ 特にREST APIなどで使われる

3.

JSONのメリット ● ● JSONが登場する前まで主に使われていたXMLと比較してテキスト量が少ないため、 高速な通信が求められる場合に有用 JSONは項目と値のペアで記載するため視覚的に確認しやすく、 階層が深くなっても構造を追いやすい ○ XMLの例 ○ JSONの例

4.

JSONの型 ● JSONで使用できる型は6つある ○ 文字列(”...”) ダブルクォーテーションで囲んだ文字列を指定 数値(123, 12.3など) ■ 123, 12.3などの数値を指定 Null値(null) ■ nullはすべて小文字で指定 Bool値 ■ trueかfalseの2値のいずれかを指定 オブジェクト({...}) ■ {...}で指定 ■ 階層構造を持つことが可能 配列([...]) ■ 配列要素には、文字列、数値、Null値、真偽値、オブジェクト、配列すべてを使用可能 ■ ○ ○ ○ ○ ○

5.

JSONの書き方① ● 基本的な形式:データのkeyとvalueを{ }の中にコロンで区切って記載 ※keyは文字列、valueは様々なデータ型で記述可能 ※文字列は必ずダブルクォーテーション(”)で囲む→シングルクォーテーション(’)は不可 ※データが2つ以上ある場合は、カンマで区切る ● 読みやすさを重視し、データを改行したりインデントを使って見た目を変えても問題なし

6.

JSONの書き方② ● 配列や値のみの表記もJSONに従ったデータとして認められる ※文字列は必ずダブルクォーテーションで囲う

7.

JSONでよくある記述ミス ● シングルクォーテーションを使用している 2行目:valueである「tanaka」に「’」を使用しているので構文エラー 3行目:keyである「age」に「’」を使用しているので構文エラー ● 適切でないカンマ 3行目:複数のオブジェクトがあるにも関わらず「,」で区切られていない 6行目:配列として複数の要素があるにも関わらず「,」で区切られていない

8.

JSONの活用例 ● フロント側(例: JavaScript)とバックエンド(例: PHP (Laravel) )でのデータのやり取り リクエスト フロントエンド バックエンド レスポンス

9.

フロント(JavaScript)での JSONの取り扱い方 ● fetchメソッドなどを用いて APIを叩くことで、 JSONデータを取得する ○ 非同期のネットワーク通信を簡単にわかりやすく記述できるメソッド ○ フロント側のJavaScriptから、HTTPリクエストを送信し、 指定した URL からリソース(データ)を取得することができるようになる 出力結果 (11ページ目に記載の処理がバックエンド側で実行され、 フロント側で受け取った後の出力結果)

10.

バックエンド(PHP(Laravel))での JSONの取り扱い方① ● フロント側からのリクエストにてJSONデータを受け取る場合 ○ リクエストのContent-Typeヘッダが適切にapplication/jsonへ設定されている限り、 inputメソッドを介してJSONデータにアクセスできる リクエストボディ:JSONデータ

11.

バックエンド(PHP(Laravel))での JSONの取り扱い方② ● レスポンスとしてフロント側にJSONデータを送る場合 ○ コントローラーから配列を返すことで、Laravelが自動的にJSONレスポンスへ変換する

12.

RDBMS(MySQL)での JSONの取り扱い方 ● ● JSON型はMySQL5.7以上で利用できる JSONデータを扱うための便利な関数が用意されている(下記一部) ○ JSONデータ生成(JSONオブジェクトを生成)→JSON_OBJECT ○ JSONデータ検索(指定パスのデータ抽出)→JSON_EXTRACT

13.

まとめ ● JSONとはデータ通信が必要な場面で言語を問わず活用されている、 共通のデータ記述形式 ● JSONを用いることで、フロント側とバックエンド側での通信時に 情報を簡単にやり取りすることができる ● RDBMSでもバージョンによってはJSON型を利用でき、 JSONデータを扱うための便利な関数が用意されている