JavaScriptでJSONを簡単解析!7つのサンプルコードで完全マスター

JavaScript JSON解析 サンプルコードJS
この記事は約9分で読めます。

 

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

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

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

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

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

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

はじめに

この記事を読めば、JavaScriptでJSONデータを簡単に解析できるようになります。

初心者の方でも理解できる内容で、実用的な7つのサンプルコードを通じて、JSONデータの解析や操作に自信がつくこと間違いなしです。

●JavaScriptとJSONについて

まずは、JavaScriptとJSONの基本的な概念を理解しましょう。

○JSONとは

JSON(JavaScript Object Notation)は、データ交換のための軽量なテキスト形式のデータ表現です。

JSONは人間にとって読み書きが容易であり、機械にとっても簡単にパースや生成ができます。

主にウェブアプリケーションで、サーバーとクライアント間のデータのやり取りに用いられます。

○JavaScriptとJSONの関係

JavaScriptはウェブブラウザで動作するプログラミング言語で、ウェブページに動的な機能を追加することができます。

JSONはJavaScriptのオブジェクト表記法を元にしており、JavaScriptでJSONデータを簡単に扱うことができます。

●JSONデータの解析方法

JavaScriptでJSONデータを扱う際には、主に下記の2つのメソッドを使用します。

○JSON.parse

JSON形式の文字列をJavaScriptのオブジェクトに変換するために使用します。

○JSON.stringify

JavaScriptのオブジェクトをJSON形式の文字列に変換するために使用します。

それでは、具体的なサンプルコードを見ていきましょう。

●サンプルコード1:JSONデータの基本的なパース

このコードでは、JSON形式の文字列をJavaScriptのオブジェクトに変換しています。

この例では、JSON形式の文字列をJSON.parse()を使ってオブジェクトに変換し、その後オブジェクトのプロパティにアクセスしています。

// JSON形式の文字列
const jsonString = '{"name": "Taro", "age": 25}';

// 文字列をオブジェクトに変換
const obj = JSON.parse(jsonString);

// オブジェクトのプロパティにアクセス
console.log(obj.name); // 出力:Taro
console.log(obj.age); // 出力:25

●サンプルコード2:JSONデータのネスト構造をパース

このコードでは、ネストされたJSONデータを解析しています。

具体的には、ネストされたJSON形式の文字列をJSON.parse()でオブジェクトに変換し、その後オブジェクトのネストされたプロパティにアクセスしています。

// ネストされたJSON形式の文字列
const jsonString = '{"user": {"name": "Taro", "age": 25}, "skills": ["JavaScript", "HTML", "CSS"]}';

// 文字列をオブジェクトに変換
const obj = JSON.parse(jsonString);

// オブジェクトのネストされたプロパティにアクセス
console.log(obj.user.name); // 出力:Taro
console.log(obj.user.age); // 出力:25
console.log(obj.skills[0]); // 出力:JavaScript

●サンプルコード3:JSONデータを再び文字列に変換

このコードでは、JavaScriptのオブジェクトをJSON形式の文字列に戻す方法を紹介しています。

この例では、オブジェクトをJSON.stringify()でJSON形式の文字列に変換しています。

// JavaScriptのオブジェクト
const obj = {name: "Taro", age: 25};

// オブジェクトをJSON形式の文字列に変換
const jsonString = JSON.stringify(obj);

console.log(jsonString); // 出力:'{"name":"Taro","age":25}'

●サンプルコード4:JSONデータをフィルタリング

このコードでは、JSONデータの配列から特定の条件を満たす要素を抽出する方法を紹介しています。

この例では、Array.prototype.filter()を使って年齢が20歳以上のユーザーのみを抽出しています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 年齢が20歳以上のユーザーを抽出
const adultUsers = users.filter(user => user.age >= 20);

console.log(adultUsers); // 出力:[{name: "Taro", age: 25}, {name: "Jiro", age: 22}]

●サンプルコード5:JSONデータをソート

このコードでは、JSONデータの配列を特定のプロパティでソートする方法を紹介しています。

具体的には、Array.prototype.sort()を使って年齢を基準に昇順でソートしています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 年齢で昇順にソート
const sortedUsers = users.sort((a, b) => a.age - b.age);

console.log(sortedUsers);
// 出力:[{name: "Hanako", age: 18}, {name: "Jiro", age: 22}, {name: "Taro", age: 25}]

●サンプルコード6:JSONデータを検索

このコードでは、JSONデータの配列から特定の条件を満たす要素を検索する方法を紹介しています。

この例では、Array.prototype.find()を使って名前が「Taro」のユーザーを検索しています。

// JSON形式の文字列
const jsonString = '[{"name": "Taro", "age": 25}, {"name": "Hanako", "age": 18}, {"name": "Jiro", "age": 22}]';

// 文字列をオブジェクトに変換
const users = JSON.parse(jsonString);

// 名前が「Taro」のユーザーを検索
const taro = users.find(user => user.name === "Taro");

console.log(taro); // 出力:{name: "Taro", age: 25}

●サンプルコード7:JSONデータを使った簡単なグラフ作成

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

この例では、HTML要素とCSSスタイルを使ってグラフを描画しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .bar {
      display: inline-block;
      background-color: blue;
      margin-right: 2px;
    }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script>
    // JSON形式のデータ
    const jsonString = '[{"item": "A", "value": 10}, {"item": "B", "value": 15}, {"item": "C", "value": 8}]';

    // 文字列をオブジェクトに変換
    const data = JSON.parse(jsonString);

    // グラフを描画
    const chart = document.getElementById("chart");
    data.forEach(d => {
      const bar = document.createElement("div");
      bar.className = "bar";
      bar.style.width = `${d.value * 10}px`;
      bar.style.height = "20px";
      chart.appendChild(bar);
    });
  </script>
</body>
</html>

●注意点と対処法

○構文エラー

JSONデータを扱う際、構文エラーに注意が必要です。JSON.parse()を使用すると、不正な形式のデータがある場合、エラーが発生します。

適切なエラーハンドリングを行い、データの正確性を確認してください。

○データ型の注意

JSONデータには、数値、文字列、真偽値、オブジェクト、配列、nullが含まれます。

データ型の違いによって、予期しない結果が発生することがあります。データ型を確認し、適切な処理を行ってください。

●カスタマイズ方法

○独自のパース関数

JSON.parse()では、第二引数にリボルバ関数を指定することができます。

リボルバ関数を使って、パース時に特定の処理を行うことができます。

○エラーハンドリングの強化

try-catch文を使用して、JSON.parse()やJSON.stringify()のエラーハンドリングを強化できます。

適切なエラーメッセージを表示し、問題の解決に役立ててください。

まとめ

JSONデータを扱う際には、構文エラーやデータ型の違いに注意しながら、適切な方法でパースや操作を行うことが重要です。

この記事で紹介したサンプルコードを参考にして、JSONデータを効果的に利用しましょう。

また、独自のパース関数を用いることで、より柔軟なデータ処理が可能になります。

エラーハンドリングを強化することで、問題が発生した際に迅速に対処できるようになります。

本記事で紹介した内容を理解し、実践することで、JSONデータを扱う際の技術力が向上し、より高度なアプリケーション開発が可能になるでしょう。