JavaScriptでJSONを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでJSONを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

JSONとは

JavaScript Object Notationの略で、文字列のデータ形式の一つです。JavaScriptのオブジェクト表記をベースにしているので、とても似た形になっています。

また、文字列なのでネットワークを通したデータのやり取りに使いやすいです。そのためネット上のサービスを使用する際のやりとりにも多く使われています。

まずはJavaScriptとほぼ同じ構文で表すデータ形式と認識してください。

実際のJSONデータを紹介します。一例として、名前と年齢にコース名を持つ場合のJSONです。データの形がそのままでもなんとなくわかるかと思います。

{

	"name": "テックアカデミージュニア",
	"age": 12,
	"course": ["はじめてのScratchコース", "ゲームアプリコース"]
}

 

XMLHttpRequestの使い方

簡単に使用できるように最小限の記述で使い方を説明します。主に4つの処理になります。

1. XMLHttpRequestを生成する：生成というと難しく感じるかもしれませんが、new XMLHttpRequest とするだけです
2. 通信するURLをセットする：1で生成したXMLHttpRequestに通信先のURLをopenというメソッドでセットします
3. 通信して取得したデータの処理を用意する：通信が終わったときに、この処理が無いとエラーになるので通信をする処理の前に記述します
4. 通信する：sendというメソッドを呼び出すことでセットしたURLに通信をします

 

[PR] フロントエンドで副業する学習方法を動画で公開中

XMLHttpRequestで要素を取得して出力する

XMLHttpRequestでなにかのサイトのデータを取得して使うような場合を想定した処理を紹介します。なにかのサイトのデータ取得は、今回は簡略化のために自分で登録したJSONを返してくれるサービスを使用します。

JSON OKIBAというサイトでJSONデータを登録するとURLが用意されます。このサイトに下記のJSONデータを登録して、それを返してくれるURLを作りXMLHttpRequestで通信してみます。

{

	"name": "テックアカデミージュニア",
	"age": 12,
	"course": ["はじめてのScratchコース", "ゲームアプリコース"]
}

let xhr = new XMLHttpRequest();
xhr.open('GET', "https://jsondata.okiba.me/v1/json/0UhCO200106082116");

xhr.onload = () => {
  let responseJson = JSON.parse(xhr.response);
  console.log(responseJson.name);
}

xhr.send();

解説

「let xhr = new XMLHttpRequest()」にて、XMLHttpRequestを生成してxhrという変数に入れています。
「xhr.open(‘GET’, “https://jsondata.okiba.me/v1/json/0UhCO200106082116”)」にて、URLを設定しています。

また、今回は特にパラメータやアクセスキーなどの指定は必要ないので通信メソッドはGETとしています。
「xhr.onload」にて、通信が終わった後に取得したデータをコンソールに表示する処理を記述しています。
onloadは通信が終わりデータを取得すると呼び出されるメソッドです。

取得したデータは、「xhr.response」のようにresponseの中に入っています。「JSON.parse」にて、取得したJSONデータをJavaScriptのJSONオブジェクトに変換しています。JSONオブジェクトは「responseJson.name」のように、JSONのキーの名前でアクセスできます。

 

監修してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。