JavaScriptのPromiseでよく使うfetch()メソッドとJSONについて

JavaScript

JavaScriptのPromiseでよく使うfetch()メソッドとjsonファイルについてまとめました。
Promiseの書き方は次の記事を参考にしてみてください。

jsonファイルについて

jsonファイルについて、基本的には配列のような[]の中に、オブジェクトのような{}の形式でデータが羅列されています。

[
  {
    "name": "yamada",
    "age": 30
  },
  {
    "name": "sasaki",
    "age": 40
  },
  {
    "name": "kondo",
    "age": 16
  }
]

基本的にはJavaScriptの配列とオブジェクトの形式でOKなのですが、異なる点があるので、次の3点だけは押さえておきましょう。

  1. jsonファイルでは、シングルクォーテーションで文字列を囲むことはできません。必ずダブルクオーテーションを使います。
  2. JavaScriptではプロパティは囲む必要はありませんが、jsonファイルでは、必ずプロパティもダブルクオーテーションで囲います。
  3. JavaScriptでは最後にカンマを付けてもいいのですが、jsonファイルでは、最後のデータにカンマをつけてはいけません。

JSON（文字列）の操作

JSONは、JavaScriptのオブジェクトにとてもよく似ていますが、JavaScriptでは文字列扱いとなります。
JSONオブジェクトのメソッドを使うことで操作できるようになります。

JSON.stringify()メソッド

JSON.stringify()メソッドはオブジェクトをJSON(文字列)に変換します。

//オブジェクト
const object1 = { a: 0, aa: 1, aaa: 3 };
console.log(object1);//{a: 0, aa: 1, aaa: 3}

//JSON文字列に変換する
const json = JSON.stringify(object1);
console.log(json); //{"a":0,"aa":1,"aaa":3}
console.log(typeof json); //string

このように、オブジェクトがJSONデータに変換されます。
また、typeofでstringが返されることで、JSONデータは、文字列であることがわかります。

JSON.stringify()の第二引数

JSON.stringify()の第二引数に配列や関数をとることで、特定の条件でJSONの文字列を出力できます。
関数には、引数にプロパティとその値を設定します。それらが1ループごとにまわってきます。

//オブジェクト
const object1 = { a: 0, aa: 1, aaa: 3 };
//第二引数に関数をとる
function replacer(prop, val) {
  // 2より上の数字のみ返すという条件とする
  if (val < 2) {
    return;
  }
  return val;
}
const json2 = JSON.stringify(object1, replacer);
console.log(json2); //{"aaa":3}

配列の場合は、オブジェクトのプロパティを文字列で指定します。

//オブジェクト
const object1 = { a: 0, aa: 1, aaa: 3 };
//第二引数に配列をとる
const json3 = JSON.stringify(object1, ["a","aaa"]);
console.log(json3);//{"a":0,"aaa":3}

指定したプロパティと値を格納したJSON(文字列)が生成されます。

JSON.parse()メソッド

JSON.parse()メソッドは、JSON(文字列)からオブジェクトに変換します。

//オブジェクト
const object2 = { a: 0, aa: 1, aaa: 3 };
//JSON文字列に変換する
const json = JSON.stringify(object2, ["a", "aaa"]);
// JSON文字列からオブジェクトに変換する
const parsedObj = JSON.parse(json);
console.log(parsedObj); //{a: 0, aaa: 3}

fetch()メソッド

fetch()メソッドを使うことで、サーバー上からデータを取得できます。

fetch()メソッドの使い方

window.fetch()なので、windowは省略できます。
fetch()の第一引数にリクエスト先のURLを記述します。
同じ階層にusers.jsonというファイルを置いたとします。

console.log(fetch('users.json')); 
//Promise {}

そうすると、コンソールで確認するとPromiseが返されていることがわかります。
つまり、then()メソッドでチェーンすることが可能です。

サーバーから返されたデータについて

then()メソッドでチェーンすることでサーバーから返されたデータの中身をみることができます。

fetch('users.json').then(function (response) {
  console.log(response);
});
//Response {type: "basic", url: "http://...users.json",
// redirected: false, status: 200, ok: true, …}

このresponseには、サーバーから返されたデータが格納されています。
そして、たとえばOK: trueならサーバーからデータが取得できたという意味となります。
status: 200はhttp statusのことで、通信が問題なく完了したことを表します。
protoを確認するといろんなメソッドが使えることがわかります。
その中でもjson()メソッドはよく使います。

json()メソッド

json()メソッドを使うことで、ようやく加工できるデータが手に入ります。

fetch('users.json')
  .then(function (response) {
    console.log(response);
    return response.json();
  })
  .then(function (json) {
    console.log(json);
  });

// (3) [{…}, {…}, {…}]
// 0: {name: "yamada", age: 30}
// 1: {name: "sasaki", age: 40}
// 2: {name: "kondo", age: 16}

このようにjson()メソッドを使うことで、格納されていたjsonファイルのデータを取得することができます。

jsonファイルのデータを加工する

fetch('users.json')
  .then(function (response) {
    console.log(response);
    return response.json();
  })
  .then(function (json) {
    console.log(json);
    for (const user of json) {
      console.log(`私は${user.name}です。${user.age}才です。`);
    }
  });
// 私はyamadaです。30才です。
// 私はsasakiです。40才です。
// 私はkondoです。16才です。

このようにして、jsonファイルのデータを好きなように加工することができます。

  • fetch()はPromiseのオブジェクトを返す
  • responseは、jsonデータが格納されているresponseオブジェクト
  • jsonデータを加工するためには、json()メソッドを使う必要がある

というこの3点は重要な点になります。
response.json()の戻り値もPromiseになります。
これをasync/awaitを使って記述します。

async/awaitとfetch()メソッド

async/awaitで上の例文を書き換えると、次のようになります。

async function fetchData() {
  const response = await fetch('users.json');
  const json = await response.json();
  for (const user of json) {
    console.log(`私は${user.name}です。${user.age}才です。`);
  }
}
fetchData();
// 私はyamadaです。30才です。
// 私はsasakiです。40才です。
// 私はkondoです。16才です。

よりスッキリとしたコードになります。
Promiseをより直感的に記述できるasync/awaitに関しては次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso