JavaScriptでJSONを使いこなす10選

JavaScriptでJSONを使いこなす初心者向け解説記事 JS
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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関数では、取得した天気情報を表示しています。

●注意点と対処法

JSONを扱う際には、データ構造や形式に注意することが重要です。

正しい形式でデータを扱わないと、エラーが発生することがあります。

また、APIからデータを取得する際には、通信エラーやデータが存在しない場合など、さまざまなエラーが発生する可能性があります。

適切なエラーハンドリングを行い、ユーザーに親切なメッセージを表示することが望ましいです。

●カスタマイズ方法

JSONを使ったアプリケーションや機能をカスタマイズする際には、データ構造や形式に応じた変更を行うことが必要です。

また、APIを利用する場合は、提供されるデータやパラメータを理解し、適切に使用することが重要です。

さらに、JavaScriptの関数やオブジェクトを利用して、データの加工や表示を行うことができます。

まとめ

この記事では、JSONの基本概念や使い方を紹介し、さまざまなサンプルコードを通じて具体的な使用例を示しました。

JSONは、データのやり取りや構造化に非常に便利な形式であり、多くのアプリケーションや機能で活用されています。

また、APIと連携する際にもJSONが広く利用されているため、JSONを理解し、適切に扱うことが重要です。

今回紹介したサンプルコードを参考に、JSONを使った様々なプロジェクトに取り組んでみてください。