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

【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

JavaScriptでは、波括弧 { } を使ったオブジェクトリテラルを記述するだけで、JSON（JavaScript Object Notation）と同じ「キーと値のペア」構造を持つオブジェクトを簡単に作成できます。JSONは軽量なデータ交換フォーマットであり、API通信や設定ファイルなど、Web開発のさまざまな場面で利用されています。

以下は、JavaScriptで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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptのJSONオブジェクト</h1>
<div class="sample"></div>
<div style="color: green;" class="result">JSON OBJECT <br></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、JSONオブジェクトを作成して表示します
</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = {
        firstName:'Rohan',
        lastName: 'Sharma',
        Age:14,
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        for(i in obj){
            resEle.innerHTML += 'key = '+i+' value = ' + obj[i] + '<br>';
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

「CLICK HERE」ボタンをクリックすると、オブジェクト内のすべてのキーと値が1行ずつ出力されます。

【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

コードのポイント

  • オブジェクトは { } の中に「キー: 値」の形式でプロパティを定義します。
  • for...in ループを使うと、オブジェクトが持つすべてのキーを順番に取り出すことができます。
  • obj[i] のように記述することで、取り出したキーに対応する値へアクセスできます。

補足：オブジェクトをJSON文字列に変換するには

作成したオブジェクトを実際のJSON文字列として扱いたい場合は、JSON.stringify() メソッドを使用します。

const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"firstName":"Rohan","lastName":"Sharma","Age":14}

このように、JavaScriptのオブジェクトはそのままJSONのデータ構造として活用でき、JSON.stringify() と JSON.parse() を組み合わせることで、文字列との相互変換も簡単に行えます。


  1. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /