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

JSON.parse()とは？JavaScriptでの使い方を初心者向けにわかりやすく解説

JSON.parse()メソッドとは

Webサーバーからデータを受信する場合、そのデータは常に文字列（string）として届きます。しかし、JavaScriptでデータを操作するには、文字列のままでは不都合なことが多く、オブジェクトへ変換する必要があります。この変換を行うのが JSON.parse() メソッドです。

JSON.parse() は、JSON形式の文字列を引数として受け取り、それを解析（パース）して、対応するJavaScriptのオブジェクトや値を返します。

基本構文

JSON.parse(text)
  • text： JSON形式として有効な文字列を指定します。

なお、第2引数に関数（reviver）を渡すことで、変換後の各プロパティに対して独自の処理を加えることも可能です。

使用例

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

<html>
<body>
<script>
    // JSON形式の文字列
    var obj = '{"name":"Jon", "age":20, "city":"Columbia"}';

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

    document.write(res);
    console.log(res);
</script>
</body>
</html>

実行結果

[object Object]
{name: "Jon", age: 20, city: "Columbia"}

結果の解説

  • document.write(res) の場合： オブジェクトは自動的に文字列化されるため、「[object Object]」という形式で表示されます。これはブラウザ上の標準的な挙動です。
  • console.log(res) の場合： 開発者ツールのコンソールには、変換後のオブジェクトの中身（name、age、city の各プロパティ）が正しく表示されます。

補足：逆の変換には JSON.stringify() を使う

反対に、JavaScriptのオブジェクトをJSON形式の文字列へ変換してサーバーへ送信したい場合は、JSON.stringify() メソッドを使用します。JSON.parse() と JSON.stringify() は対になる関係にあるため、セットで覚えておくと便利です。

  1. JavaScriptの「import as」「export as」構文を徹底解説！別名でのモジュール読み込みと書き出し方法

    JavaScriptのモジュールシステムでは、asキーワードを使うことで、モジュールを任意の別名でインポートしたりエクスポートしたりできます。 import as と export as とは import as を使うと、エクスポートされた名前付きモジュール（名前付きエクスポート）を、自分の好きな名前を付けて読み込むことができます。 export as を使うと、ローカルで定義した関数や変数に別名を付けて外部に公開できます。これにより、内部実装の名前と外部に見せる名前を分けることが可能になります。 以下に、JavaScriptにおける import as および export as 構文の具

  2. Windows 10の「タイムライン」機能とは？その魅力と使い方を徹底解説

    Windows 10のApril 2018 Update（2018年4月更新プログラム）がついに登場し、数々の新機能や改善点が追加されました。 まだアップデートを適用していない場合は、手動でダウンロードする方法をご確認ください。主な変更点としては、Windows Helloの改善や、Microsoftへ送信されるデータに対するコントロール強化などが挙げられます。しかし、筆者が特にお気に入りの新機能は「タイムライン（Timeline）」です。この記事では、タイムラインについて知っておくべき情報と、使い始めるための手順を詳しくご紹介します。 Windows 10タイムラインとは？ タイムラインは