【JavaScript】配列の定義とデータアクセスの基本（リテラル記法とインデックス）

2026年1月25日

概要

JavaScriptにおいて複数のデータをひとまとめに管理するために最も頻繁に使用されるのが「配列（Array）」です。

本記事では、ブラケット [] を使用した基本的な配列の定義方法から、多次元配列やオブジェクトを含む配列の構築、そしてインデックス番号を使用して特定のデータを取り出す方法までを解説します。

仕様（入出力）

配列の構文と意味

構文	意味	戻り値の型
`[値1, 値2, ...]`	配列リテラル。カンマ区切りで要素を定義し、配列を作成する。	Array (Object)
`配列[n]`	インデックスアクセス。配列の n番目の要素を取得する。 ※添字は 0 から始まります。	要素の型に依存

入力: 定義したいデータ（数値、文字列、オブジェクトなど）
出力: 生成された配列オブジェクト、または取得した要素

基本の使い方

1. 様々な配列の定義

JavaScriptの配列は動的であり、異なる型のデータを混在させることも可能です（ただし、通常は同じ型のデータを扱います）。

// 1. 空の配列
const emptyList = [];

// 2. 数値の配列（グラフのデータ点など）
const points = [10, 25, 48, 60];

// 3. 文字列の配列（タグリストなど）
const tags = ['JavaScript', 'HTML', 'CSS'];

// 4. 型が混在する配列（タプル的な用途以外ではあまり推奨されません）
const mixedData = [1, 'Version-A', true];

2. 複雑な構造の配列

配列の中に配列を入れる「多次元配列」や、実務で頻出する「オブジェクトの配列」も定義できます。

// 5. 多次元配列（配列の中に配列）
// 例: 座標データ [x, y, z] のリスト
const coordinates = [
    [10, 20, 0],
    [15, 25, 5],
    [30, 10, 10]
];

// 6. オブジェクトの配列（APIレスポンスなどで一般的）
const users = [
    { id: 101, name: 'Alice', role: 'Admin' },
    { id: 102, name: 'Bob', role: 'User' }
];

3. インデックスによる取得

要素は「0番目」から数えます。

const colors = ['Red', 'Green', 'Blue'];

console.log(colors[0]); // "Red" （先頭）
console.log(colors[1]); // "Green"（2番目）
console.log(colors[2]); // "Blue" （3番目）

コード全文（HTML / JavaScript）

ここでは、サーバーのインフラ構成情報を「オブジェクトの配列」として定義し、特定のサーバー情報をインデックス指定で取得して画面に表示する例を作成します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server List Demo</title>
    <style>
        .server-card {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #f9f9f9;
            font-family: sans-serif;
            max-width: 400px;
        }
        .server-name {
            font-weight: bold;
            color: #333;
            font-size: 1.2em;
        }
        .server-status {
            color: #666;
            font-size: 0.9em;
        }
        .status-active { color: green; }
        .status-maintenance { color: orange; }
    </style>
</head>
<body>

<div id="server-info-area">
    </div>

<script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * サーバー情報のリストを表示するデモ
 */

// 1. オブジェクトの配列を定義
// 実務ではAPIから取得するJSONデータなどがこの形式になります
const serverList = [
    { id: 1, hostname: 'web-server-01', status: 'Active', ip: '192.168.1.10' },
    { id: 2, hostname: 'db-server-01', status: 'Active', ip: '192.168.1.20' },
    { id: 3, hostname: 'cache-server-01', status: 'Maintenance', ip: '192.168.1.30' }
];

// 表示領域の要素を取得
const infoArea = document.getElementById('server-info-area');

/**
 * 指定したインデックスのサーバー情報をDOMに描画する関数
 * @param {Array} list - サーバーリスト
 * @param {number} index - 表示したい要素のインデックス
 */
const renderServerInfo = (list, index) => {
    // 2. 配列から特定の要素にアクセス
    // 存在しないインデックスを指定すると undefined になるためチェックする
    const targetServer = list[index];

    if (!targetServer) {
        infoArea.innerHTML = '<p>指定されたサーバーは見つかりませんでした。</p>';
        return;
    }

    // HTMLの生成
    const statusColorClass = targetServer.status === 'Active' ? 'status-active' : 'status-maintenance';
    
    const html = `
        <div class="server-card">
            <div class="server-name">Host: ${targetServer.hostname}</div>
            <div class="server-status">
                Status: <span class="${statusColorClass}">${targetServer.status}</span>
            </div>
            <div>IP Address: ${targetServer.ip}</div>
        </div>
    `;

    infoArea.innerHTML = html;
};

// 今回はデモとして「2番目（インデックス1）」のDBサーバーを表示します
renderServerInfo(serverList, 1);

カスタムポイント

初期データの変更:serverList の中身を書き換えることで、扱うデータを自由に変更できます。商品リストや社員リストなど、あらゆる一覧データに応用可能です。
動的な選択:現在はコード内で renderServerInfo(serverList, 1) と固定していますが、ボタンクリックなどのイベントと連動させ、index を引数で渡すようにすれば、ユーザー操作に応じて表示を切り替えられます。

注意点

インデックスは0から始まる日常の感覚で「1番目」を取得しようとして array[1] と書くと、実際には「2番目」の要素が取得されます。必ず 0スタート であることを意識してください。
範囲外アクセスは undefined要素数が3つの配列に対して array[99] のように存在しないインデックスを指定しても、エラー（例外）にはならず、単に undefined が返されます。これを利用して存在チェックを行いますが、予期せぬバグの原因にもなり得ます。
多次元配列のアクセス順序const matrix = [[1, 2], [3, 4]] のような入れ子構造の場合、matrix[1][0] のようにブラケットを続けて記述してアクセスします（この例では 3 を取得）。

応用

末尾の要素を取得するテクニック

配列の長さが不明な場合、最後の要素を取得するには length プロパティを利用します。

const logs = ['Start', 'Processing', 'End'];

// 長さ(3) から -1 すると、最後のインデックス(2) になる
const lastLog = logs[logs.length - 1];

console.log(lastLog); // "End"