JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのJSON.parse()メソッドとは？基本の使い方とサンプルコードを解説

JSON.parse()メソッドとは

JSON.parse()メソッドは、JSON形式の文字列を解析（パース）し、そこからJavaScriptオブジェクトを生成するためのメソッドです。Web APIなどから受け取ったJSONデータをJavaScriptで扱える形に変換する際に、最もよく使われる手法の一つです。

基本的な構文は以下の通りです。

JSON.parse(text[, reviver])

第1引数には解析対象のJSON文字列を指定し、省略可能な第2引数のreviver関数を使うと、変換後の値を加工することもできます。

サンプルコード

以下は、JSON.parse()メソッドを使ってJSON文字列を解析し、その結果を画面に表示する具体的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JSON.parse()メソッド</h1>
<div class="sample">
{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、上記のJSON文字列が解析されます
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let parsedJson = JSON.parse(sampleEle.innerHTML);
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = "Name = " + parsedJson.name + "<br>";
      resultEle.innerHTML += "Country = " + parsedJson.country + "<br>";
      resultEle.innerHTML += "Sports = " + parsedJson.sports;
   });
</script>
</body>
</html>

出力結果

このコードを実行すると、ページには赤色で表示されたJSON文字列と「CLICK HERE」ボタンが表示されます。

JavaScriptのJSON.parse()メソッドとは？基本の使い方とサンプルコードを解説

「CLICK HERE」ボタンをクリックすると、JSON.parse()によって解析されたオブジェクトから各プロパティの値が取り出され、次のように画面に表示されます。

JavaScriptのJSON.parse()メソッドとは？基本の使い方とサンプルコードを解説

ポイントまとめ

  • JSON.parse()は「JSON文字列 → JavaScriptオブジェクト」への変換を行う。
  • 逆に、オブジェクトをJSON文字列に変換する場合はJSON.stringify()を使用する。
  • 引数として渡す文字列が正しいJSON形式でない場合、SyntaxErrorがスローされるため、必要に応じてtry...catchでのエラーハンドリングを推奨。
  1. JavaScriptのgetTime()メソッドとは？使い方とサンプルコードを解説

    getTime()メソッドとはJavaScriptのgetTime()メソッドは、1970年1月1日0時0分0秒（UTC、いわゆる「エポック」）から経過した時間をミリ秒単位で返すDateオブジェクトのメソッドです。この値はUnixタイムスタンプとしても知られており、日付の比較や計算、有効期限の管理など、さまざまな場面で活用されています。以下に、getTime()メソッドを使った具体的なサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset=

  2. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO