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

JavaScriptのJSON配列とは？基本構造と実装例をわかりやすく解説

JSON（JavaScript Object Notation）は軽量なデータ交換形式であり、その配列はJavaScriptの配列とほぼ同じ形で表現されます。角括弧 [] の中に値をカンマ区切りで並べることで、文字列や数値、オブジェクトなど複数のデータをひとつにまとめて扱えます。以下は、JavaScriptのオブジェクト内にJSON配列を含めた基本的な例です。

let obj = {
    name:'Rohan',
    sports : ['cricket','Football','volleyball','hockey']
}

この例では、「sports」というプロパティに4つのスポーツ名が配列として格納されています。このような構造により、関連する複数の値を整理して管理できるのがJSON配列の大きな利点です。

実装例

次のコードは、ボタンをクリックするとJSON配列の内容が画面に表示されるシンプルなデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JSON配列のサンプル</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JSON配列</h1>
<div class="sample"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、JSON配列の内容が表示されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let obj = {
        name:'Rohan', sports : ['cricket','Football','volleyball','hockey']
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        obj.sports.forEach(item=>{
            sampleEle.innerHTML += item + '<br>';
        })
    });
</script>
</body>
</html>

コードのポイント

  • forEach() メソッド：配列の各要素に対して、順番にコールバック関数を実行します。
  • innerHTML：取得したテキストを <br> タグとともに出力先の要素に追加し、1項目ずつ改行して表示します。
  • addEventListener：ボタンのクリックイベントを検知して処理を開始します。

実行結果

ページを開いた直後は、以下のように「ここをクリック」ボタンが表示されます。

JavaScriptのJSON配列とは？基本構造と実装例をわかりやすく解説

ボタンをクリックすると、配列に格納された各要素（cricket、Football、volleyball、hockey）が順番に改行されて表示されます。

JavaScriptのJSON配列とは？基本構造と実装例をわかりやすく解説


  1. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

  2. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し