JavaScriptのJSON.parseを実例とともに解説

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2023年12月)

✔当記事は以下のような方を対象としています

「JavaScriptでJSONをパースする方法って何?」

「JSON.parseを使ったデータ処理を理解したい」

「具体的なJSON.parseの使用例を見たくない?」

✔当記事を読むことで理解できる内容

  • JavaScriptでのJSONのパース方法
  • JSON.parseの使い方とそのテクニック
  • 実際に使用されるJSON.parseの例

当記事では、単にJSONをJavaScriptオブジェクトに変換する方法を説明するだけではなく、JSON.parse機能の細かい使い方やエラーハンドリングまで、実践的な例を交えながら詳細にご紹介していきます。

ぜひ最後までご覧ください。

✔読むのではなく、動画・音声で学びたい方はこちらをどうぞ

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

JSONデータの基本

こちらでは、JSONデータの基本についてお伝えしていきます。

JSONデータの構造を理解することで、データの交換やウェブAPIの操作に役立つでしょう。

  • JSON形式の概念解説
  • JSONオブジェクトとは何か
  • ウェブAPIとJSONの関係

JSON形式の概念解説

JSON(JavaScript Object Notation)は、データ記述言語のひとつで、シンプルで軽量なフォーマットです。

主に異なるシステム間でデータを送受信する際に使用されます。

{"name": "John", "age": 30}

JSON形式で人の名前と年齢を表しています。

読み書きが容易なため、プログラミングやウェブ開発で広く採用されています。

JSONオブジェクトとは何か

JSONオブジェクトとは、データをキーと値のペアで表現したオブジェクトのことを指します。

「fruit」というキーに「apple」という値が紐づいており、「color」というキーには「red」という値が紐づいています。

{"fruit": "apple", "color": "red"}

この形式はJavaScriptのオブジェクトリテラルに似ていますが、JSONはその構文を元に独立した言語非依存のデータフォーマットです。

ウェブAPIとJSONの関係

ウェブAPIは、異なるソフトウェア間の橋渡しをするためのインターフェースです。

アプリケーション同士がデータをやり取りをおこなうところ。

そのやり取りをする際に、JSONフォーマットがよく使われています。

JSON.parse()の探求

次に、JavaScriptでJSONデータを扱う際に核となる関数、JSON.parse()について掘り下げていきましょう。

この関数の仕様を理解することで、JSONデータの安全で効率的な操作が可能になります。

  • JSON.parse()が果たす役割
  • JSON.parse()の基本的な構文
  • 引数の詳細な説明
  • JSON.parse()からの期待される返値
  • JSON.parse()使用時の例外とその扱い

JSON.parse()が果たす役割

JSON.parse()関数は、JSON形式の文字列をJavaScriptのオブジェクトに変換する役割を果たします。

以下のようなJSON文字列をJSON.parse()に渡してみます。

'{"name": "Alice", "age": 25}'

JavaScriptで直接操作可能なオブジェクトを得られます。

{name: "Alice", age: 25}

ウェブAPIから受け取ったデータを扱う際になどに使う方法です。

JSON.parse()の基本的な構文

JSON.parse()の基本的な構文はとてもシンプルです。

JSON.parse(text[, reviver])
  • text: JSON形式の文字列
  • reviver: オプショナルな引数で、変換処理中に各キーの値を変更するための関数を指定する

初心者はまず、基本的な構文に慣れることから始めましょう。

引数の詳細な説明

JSON.parse()に渡す第一引数は、有効なJSON形式の文字列である必要があります。

無効な形式の場合、SyntaxErrorが発生するからです。

第二引数のreviver関数を使用すると、パースが進むにつれて各キーに対してカスタム処理を実行できます。

例えば、日付文字列をDateオブジェクトに変換する処理を挿入する、などです。

JSON.parse()からの期待される返値

JSON.parse()で正常にパースされると、JSON文字列がJavaScriptのオブジェクト、配列、文字列、数値、ブール値、またはnullに変換されます。

一方で、無効なJSONを与えた場合には、エラーがスローされるので適切な例外処理が重要です。

JSON.parse()使用時の例外とその扱い

JSON.parse()を使用する際に、無効なJSON文字列を渡したら、通常はSyntaxErrorがスローされます。

エラー処理には、try...catch構文を使用して例外をキャッチし、適切にハンドリングしましょう。

try {
  const user = JSON.parse('{"name": "Emma", "age": 28');
} catch (e) {
  console.error("パースエラー:", e.message);
}

ここで意図的に閉じカッコを省略しているため、エラーが表示されます。

Fun Tools
ReactとDjangoで作成したWebアプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています!

JSON.parse() を実際に使ってみよう

ここでは、JSON.parse()を実際に使ってコードを書き、JSONデータをパースする方法を見ていきましょう。

実践を通じて、より深い理解とスキルを開発できます。

  • 実際にコードを書いてみる
  • JSONデータのパース手順
  • reviver関数の活用方法

実際にコードを書いてみる

実際にJSON.parse()を使用したコード例を見てみましょう。

例として、次のJSON文字列をパースするコードを書いています:

const json = '{"name": "David", "skills": ["JavaScript", "React"]}';
const person = JSON.parse(json);

console.log(person.name);  // David
console.log(person.skills);  // ["JavaScript", "React"]

JSON文字列がJavaScriptオブジェクトに変換され、nameプロパティやskills配列にアクセスできます。

JSONデータのパース手順

JSONデータをパースする手順はとてもシンプルです。

  1. 有効なJSON文字列を用意
  2. その文字列をJSON.parse()関数に渡して実行
  3. 相当するJavaScriptのデータ構造を得られる

このプロセスは同期的に行われるため、変換が完了したらすぐにデータを使用できます。

reviver関数の活用方法

reviver関数は、JSON.parse()呼び出し時に各キーに対してカスタム処理をおこなう場合に便利です。

たとえば、JSON内での日付の文字列をJavaScriptのDateオブジェクトへ変換する際に使います。

const jsonDate = '{"date": "2023-03-01T12:00:00.000Z"}';
const data = JSON.parse(jsonDate, (key, value) => {
  return key === 'date' ? new Date(value) : value;
});

console.log(data.date instanceof Date);  // true

このコードでは、reviver関数がdateキーを検出すると、その値をDateオブジェクトに変換します。

典型的なJSONパースエラーへの対処法

JSONデータのパース時には、いくつかの典型的なエラーに直面することがあります。

これらに適切に対応する方法を学びましょう。

  • 末尾のカンマは受け入れられない問題
  • JSONではシングルクオート使用は許されない

末尾のカンマは受け入れられない問題

JSON形式では、オブジェクトや配列リテラルの末尾にカンマをつけられせん。

以下のように、末尾のカンマがあるとJSON.parse()はエラーをスローします。

const json = '{"name": "Evan",}';
try {
  const object = JSON.parse(json);
} catch (e) {
  console.error("末尾のカンマは無効です: ", e.message);
}

このエラーを解決するためには、不要なカンマを削除し、適切なJSON形式を保証する必要があります。

JSONではシングルクオート使用は許されない

JSON形式では、文字列をシングルクオート(’)ではなく、必ずダブルクオート(”)で囲みましょう。

シングルクオートで囲われた文字列をJSON.parse()に渡すとエラーになります。

try {
  const wrongJson = "{'key': 'value'}";
  const obj = JSON.parse(wrongJson);
} catch (e) {
  console.error("JSONではシングルクオートは使用できません: ", e.message);
}

適切なJSON形式にするには、全ての文字列をダブルクオートで囲むことが重要です。

JSONとの深い結びつき

JSON.parse()とその逆関数JSON.stringify()はJavaScriptにおけるJSONデータの扱いをより柔軟にします。

これらの関数を適切に使用することで、複雑なデータを簡単に扱えるようになるからです。

  • JSON.stringify()の利用方法
  • JSON.parse()とJSON.stringify()の相互作用

JSON.stringify()の利用方法

JSON.stringify()関数は、JavaScriptのオブジェクトや値をJSON形式の文字列に変換します。

オブジェクトのデータをサーバーに送信したり、ローカルストレージに保存したりする際に有効です。

使用方法は簡単で、変換したいオブジェクトを引数として渡すだけです。

const obj = { name: "Lily", age: 29 };
const jsonString = JSON.stringify(obj);

console.log(jsonString);  // {"name":"Lily","age":29}

このように、オブジェクトがJSON形式の文字列に変換されます。

JSON.parse()とJSON.stringify()の相互作用

JSON.parse()JSON.stringify()を組み合わせることで、オブジェクトのディープコピーを作成できます。

この方法でオブジェクトをコピーすると、元のオブジェクトへの参照は残らず、完全なコピーの作成が可能です。

const original = { name: "Bob", details: { age: 40, city: "New York" } };
const copy = JSON.parse(JSON.stringify(original));

console.log(copy.name);  // Bob
console.log(copy.details === original.details);  // false

このコピーオブジェクトは元のオブジェクトとは独立しているので、片方を変更してももう片方に影響はありません。

Q&A: よくある質問

以下によくある質問をまとめました。

事前にお読みいただくことで、トラブル時の解決が早まるはずです。

JSON.parse()はいつ使うのが適切ですか?

サーバーやほかのAPIから受け取るJSON形式のデータを、JavaScriptオブジェクトに変換する際に使いましょう。

この関数を使うことで、データを簡単に操作できるようになります。

JSON.parse()でパースしたオブジェクトにメソッドは存在しますか?

通常、JSON.parse()でパースされたオブジェクトにはメソッドは含まれません。

JSONはデータフォーマットであり、メソッドを表現できないためです。

データをパースした後でオブジェクトにメソッドを追加することが必要な場合があります。

JSON.parse()が返すエラーをどのように処理すべきですか?

エラー処理にはtry...catch文を使用して、JSON.parse()の呼び出しをラップします。

エラーが発生した場合、catchブロックが実行され、適切なユーザーフィードバックやロギングが可能です。

まとめ

当記事では、JSON.parseの使い方から、データをJSON形式で交換する際の効率的な処理方法についても学びました。

この知識を活かし、日々のコーディングに役立ててください。

当記事構成は、JavaScriptのJSON.parse()を総合的に理解し、効果的に使用するためのテクニックやJSONの背景情報を網羅しています。

少しでも皆さんのプログラミング学習に役立つことを願っています。

タイトルとURLをコピーしました