JavaScriptでJSONを使いこなす10選

はじめに
●JSONとは
- ○JSONの基本
●JSONの使い方
●JSONの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでJSONを使いこなす方法がわかり、10種類の実用的なサンプルコードを使って、JSONの使い方、注意点、カスタマイズができるようになります。

これからJavaScriptを学ぶ初心者や、JSONをもっと理解したいという方におすすめの記事です。

●JSONとは

JSON（JavaScript Object Notation）は、データ交換用の軽量なテキストフォーマットです。

JavaScriptをベースにしており、そのためJavaScriptで扱いやすいという特徴があります。

JSONは人間にもコンピュータにも読みやすく、XMLよりもシンプルな構造を持っています。

○JSONの基本

JSONは、オブジェクトと配列の二つの構造を持っています。

オブジェクトはキーと値の組み合わせで表現され、{ }（中括弧）で囲まれます。

配列は複数の値が順序付けられたもので、[ ]（角括弧）で囲まれます。

値には、文字列、数値、真偽値、オブジェクト、配列、nullが使用できます。

●JSONの使い方

ここでは、JSONを使ってデータを扱う基本的な方法として、JSONオブジェクトの作成とアクセス、JSON文字列の解析と生成、JSONデータの取得と送信の3つのサンプルコードを紹介します。

○サンプルコード1：JSONオブジェクトの作成とアクセス

このコードでは、JSONオブジェクトを作成し、そのデータにアクセスする方法を示しています。

この例では、人物の情報を表すJSONオブジェクトを作成し、その名前と年齢にアクセスしています。

// JSONオブジェクトの作成
const person = {
  "name": "山田太郎",
  "age": 25
};

// JSONオブジェクトのデータにアクセス
console.log(person.name); // 山田太郎
console.log(person.age);  // 25

○サンプルコード2：JSON文字列の解析と生成

このコードでは、JSON.parse()を使ってJSON文字列をJSONオブジェクトに変換し、JSON.stringify()を使ってJSONオブジェクトをJSON文字列に変換する方法を紹介しています。

この例では、JSON文字列を解析し、名前を取得し、その後、再びJSON文字列に戻しています。

// JSON文字列の解析
const jsonString = '{"name": "山田太郎", "age": 25}';
const jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 山田太郎

// JSONオブジェクトをJSON文字列に変換
const newJsonString = JSON.stringify(jsonObj);
console.log(newJsonString); // {"name":"山田太郎","age":25}

○サンプルコード3：JSONデータの取得と送信

このコードでは、Fetch APIを使ってJSONデータを取得し、POSTメソッドでJSONデータを送信する方法を紹介しています。

この例では、外部のAPIからJSONデータを取得し、そのデータを加工して、別のAPIに送信しています。

// JSONデータの取得
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(jsonData => {
    console.log(jsonData);

    // JSONデータの送信
    fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(jsonData)
    })
      .then(response => response.json())
      .then(result => {
        console.log(result);
      });
  });

●JSONの応用例

次に、JSONを使ったさまざまな応用例として、グラフ作成、ソート機能、スライダー、設定ファイルの扱い、データのフィルタリング、クイズアプリ、APIからのデータ取得の7つのサンプルコードを紹介します。

○サンプルコード4：JSONを使った簡単なグラフ作成

このコードでは、JSONデータを利用して簡易的な棒グラフを作成する方法を説明しています。

この例では、Chart.jsというライブラリを利用し、JSONデータを基にグラフを描画しています。

// Chart.jsの読み込み
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
document.head.appendChild(script);

// JSONデータ
const graphData = {
  "labels": ["赤", "青", "緑"],
  "datasets": [
    {
      "label": "色の人気投票",
      "data": [12, 19, 3],
      "backgroundColor": ["red", "blue", "green"]
    }
  ]
};

// グラフの描画
script.onload = () => {
  const ctx = document.getElementById('myChart').getContext('2d');
  const chart = new Chart(ctx, {
    type: 'bar',
    data: graphData,
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
};

○サンプルコード5：JSONを使ったソート機能

このコードでは、JSONデータをソートする方法を説明しています。

この例では、配列に格納されたJSONオブジェクトを、指定したキーの値に基づいて昇順にソートしています。

// JSONデータ
const dataArray = [
  { "name": "山田", "age": 25 },
  { "name": "鈴木", "age": 30 },
  { "name": "田中", "age": 20 }
];

// 年齢で昇順にソート
dataArray.sort((a, b) => a.age - b.age);
console.log(dataArray);

○サンプルコード6：JSONを使ったスライダー

このコードでは、JSONデータを使って、画像のスライダーを作成する方法を説明しています。

この例では、JSONデータに格納された画像URLをもとに、自動的に切り替わるスライダーを実装しています。

// JSONデータ
const sliderData = {
  "images": [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg"
  ],
  "interval": 2000
};

// スライダーの実装
let currentIndex = 0;
const imgElement = document.getElementById('sliderImage');

function updateSlider() {
  imgElement.src = sliderData.images[currentIndex];
  currentIndex = (currentIndex + 1) % sliderData.images.length;
}

setInterval(updateSlider, sliderData.interval);

○サンプルコード7：JSONを使った設定ファイルの扱い

このコードでは、JSON形式の設定ファイルを読み込んで、アプリケーションの設定を適用する方法を紹介しています。

この例では、設定ファイルを取得し、JavaScriptで使用できる形に変換しています。

// 設定ファイルの取得
async function fetchConfigFile() {
  const response = await fetch('config.json');
  const configData = await response.json();
  applySettings(configData);
}

// 設定の適用
function applySettings(configData) {
  document.title = configData.title;
  document.getElementById('header').style.backgroundColor = configData.headerColor;
}

fetchConfigFile();

○サンプルコード8：JSONを使ったデータのフィルタリング

このコードでは、JSONデータをフィルタリングする方法を紹介しています。

この例では、配列に格納されたJSONオブジェクトを、指定した条件に基づいてフィルタリングしています。

// JSONデータ
const users = [
  { "name": "山田", "age": 25 },
  { "name": "鈴木", "age": 30 },
  { "name": "田中", "age": 20 }
];

// 年齢が25歳以上のユーザーをフィルタリング
const filteredUsers = users.filter(user => user.age >= 25);
console.log(filteredUsers);

○サンプルコード9：JSONを使ったクイズアプリ

このコードでは、JSONデータを用いてクイズアプリを作成する方法を紹介しています。

この例では、JSONデータに格納されたクイズ情報をもとに、問題を表示し、解答をチェックしています。

// JSONデータ
const quizData = [
  {
    "question": "日本の首都は？",
    "choices": ["東京", "大阪", "名古屋"],
    "answer": 0
  },
  {
    "question": "アメリカの首都は？",
    "choices": ["ニューヨーク", "ワシントンD.C.", "ロサンゼルス"],
    "answer": 1
  }
];

// 問題の表示
function displayQuestion(index) {
  const questionElement = document.getElementById('question');
  questionElement.textContent = quizData[index].question;
}

// 解答のチェック
function checkAnswer(index, choice) {
  return quizData[index].answer === choice;
}

displayQuestion(0);

○サンプルコード10：JSONを使ったAPIからのデータ取得

このコードでは、外部APIからJSON形式のデータを取得し、JavaScriptで利用する方法を紹介しています。

この例では、OpenWeatherMap APIから天気情報を取得し、JavaScriptで使用できる形に変換しています。

// 天気情報APIからデータを取得
async function fetchWeatherData(city) {
  const apiKey = 'your_api_key_here';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
  const response = await fetch(url);
  const weatherData = await response.json();
  displayWeatherInfo(weatherData);
}

// 取得したデータを表示
function displayWeatherInfo(weatherData) {
  const temperature = weatherData.main.temp - 273.15;
  const weatherDescription = weatherData.weather[0].description;
  console.log(`現在の気温は${temperature.toFixed(1)}℃で、天気は${weatherDescription}です。`);
}

fetchWeatherData('Tokyo');

ここで、your_api_key_hereには、OpenWeatherMapのAPIキーを代入してください。

fetchWeatherData関数に都市名を指定することで、その都市の天気情報を取得できます。

displayWeatherInfo関数では、取得した天気情報を表示しています。