JavaScriptとJSONの使い方

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptとJSONを使用したWeb開発を行う方を対象にしています。この記事を読むことで、JSONのデータを取得してHTMLの要素に入れる方法がわかります。JSONのデータの取得方法や、JavaScriptでHTMLの要素を操作する方法など、基本的な知識も解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * JavaScriptの基本的な知識（変数、データ型、関数） * HTMLの基本的な知識（要素、属性） * JSONの基本的な知識（データ構造、パース）

JavaScriptとJSONの概要

JavaScriptとJSONは、Web開発では不可欠な技術です。JavaScriptは、ブラウザやサーバー側で動作するプログラミング言語で、Webページの動的効果や、アプリケーションのロジックを実装するために使用されます。JSON（JavaScript Object Notation）は、軽量なデータ交換形式で、人間が読みやすく、機械が解析しやすいデータ構造を提供します。

JSONのデータを取得してHTMLの要素に入れる方法

このセクションでは、JSONのデータを取得してHTMLの要素に入れる具体的な手順を説明します。

ステップ1: JSONのデータを準備する

まず、JSONのデータを準備します。例えば、以下のようなJSONのデータを用意します。

Json

[
  {
    "name": "John Doe",
    "age": 30
  },
  {
    "name": "Jane Doe",
    "age": 25
  }
]

ステップ2: JavaScriptでJSONのデータを取得する

次に、JavaScriptでJSONのデータを取得します。以下のコードのように、fetch APIを使用してJSONのデータを取得できます。

Javascript

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSONのデータを処理する
  })
  .catch(error => {
    console.error(error);
  });

ステップ3: HTMLの要素に入れる

最後に、JSONのデータをHTMLの要素に入れます。以下のコードのように、HTMLの要素を取得して、JSONのデータを表示できます。

Javascript

const ul = document.getElementById('list');
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = `${item.name} (${item.age})`;
  ul.appendChild(li);
});

ハマった点やエラー解決

実装中に遭遇する問題や、エラーの解決方法について記載します。例えば、JSONのデータを取得できない場合、ネットワークエラーまたはJSONのデータが不正な可能性があります。以下のコードのように、エラーをキャッチして、エラーのメッセージを表示できます。

Javascript

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSONのデータを処理する
  })
  .catch(error => {
    console.error(error);
    const errorMessage = document.getElementById('error-message');
    errorMessage.textContent = 'エラーが発生しました：' + error.message;
  });

まとめ

本記事では、JavaScriptとJSONの使い方について説明しました。

JavaScriptでJSONのデータを取得する方法
HTMLの要素に入れる方法
エラーの解決方法

この記事を通して、JavaScriptとJSONの基礎的な知識が得られたでしょう。次のステップでは、更に高度なテーマについて取り上げます。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

JavaScriptとJSONの使い方💻