配列を使って複数のデータを管理しよう

配列を使うと、複数の値を順番にまとめて管理できます。記事タイトルの一覧を例に基本操作を確認します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

配列を作る

const articleTitles = [
  'JavaScriptの歴史',
  '変数とデータ型',
  '条件分岐',
];

console.log(articleTitles);

配列は角括弧で作り、各要素をカンマで区切ります。

番号を使って要素を取得する

console.log(articleTitles[0]);
console.log(articleTitles[1]);

配列の番号は0から始まります。要素数はlengthで確認できます。

console.log(articleTitles.length);

要素を変更・追加する

articleTitles[1] = '変数を理解しよう';
articleTitles.push('関数');

console.log(articleTitles);

番号を指定すると要素を変更でき、push()は配列の末尾へ追加します。constで作った配列でも、配列自体を別の値へ再代入しなければ要素を変更できます。

forEachで繰り返す

articleTitles.forEach((title, index) => {
  console.log(`${index + 1}. ${title}`);
});

forEach()は要素ごとに関数を実行します。第1引数で要素、第2引数で現在の番号を受け取れます。

HTMLへ一覧を追加する

<ul id="article-list"></ul>

const articleList = document.querySelector('#article-list');

articleTitles.forEach((title) => {
  const item = document.createElement('li');
  item.textContent = title;
  articleList.append(item);
});

配列の要素数が増えても、同じ表示処理を繰り返せます。

まとめ

配列は複数の値を順番に管理します。番号による取得、push()による追加、forEach()による繰り返しを使えるようにしましょう。

次の記事では、一つの対象に関係する複数の値をオブジェクトへまとめます。