【JavaScript】「JSON」ファイルを読み込んで「配列」として使う

ウェブ制作ノウハウ

2025.02.102025.02.16

この記事は約2分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

今回は、「JavaScript」で「JSON」ファイルを読み込み、使用する方法について書いていきます。

fetch() を使用して少しややこしいので、備忘録としてこの記事を残しておきます。

サンプル用コード
- JSON
- JavaScript

サンプル用コード

JSON

[
  { "grade": 3, "name": "Kozue" },
  { "grade": 2, "name": "Kaho" },
  { "grade": 1, "name": "Ginko" }
]

JavaScript

// JSON を扱うための関数
async function getJSON(url) {
  // URL から JSON を読み込む
  let res = await fetch(url);

  // JSON を正常に読み込めていれば処理
  if(res.ok) {
    // JSON を配列に入れる
    let json_array = await res.json();
    console.log(json_array[0]['name']);// -> Kozue
  }
}

const JSON_URL = './folder/sample.json';// JSON の場所
getJSON(JSON_URL);// 関数を実行

JSON の読み込みには fetch() を使うんですが、promise が関係してくるので少しややこしいです。

今回は、async await を使ってなるべくシンプルに書いてみました。then() でも同様の処理はできるので、お好みでそちらを使っても大丈夫です。

ちなみに、ネットでは import を使う方法も紹介されていますが、Firefox ではエラーが出てしまいダメでした。こちらの方法の方が簡単ですし、対応して欲しいですね。

今回は分かりやすくするため最低限の例外処理しかしていません。実際に使用する場合は、こちらのページを参考にエラー処理をした方が良いと思います。

「PHP」で「JSON」を読み込む方法については、下記リンク先の記事で紹介しています。