898 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(Twitter) https://twitter.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データを扱うための便利な関数が用意されている