配列を使ってみよう

このレッスンでは、JavaScriptで配列を使う基本の書き方を学び、複数のデータをまとめて効率よく扱えるようになることを目標にします。「JavaScript 配列 使い方」「JavaScript forEach 初心者」で調べている方に向けた内容です。

配列は、複数のデータをまとめて入れておける箱です。[ ]で作り、.lengthで個数を調べ、for文やメソッドで中身を扱えます。「1つの変数に1つの値」というやり方だけでは、名前を100個扱いたいときに変数を100個も作らねばならず現実的ではありません。配列を使えば、こうした複数のデータを1つの変数でまとめて管理できます。

サンプルコードではfruitsという配列を作り、.lengthで要素数を、.forEach()で各要素を1つずつ処理しています。.forEach((要素, index) => { ... })という書き方は、配列の各要素に同じ処理を行いたいときによく使われる基本パターンで、この後学ぶ.map()や.filter()とも共通する考え方です。

初心者がよくつまずくのが、配列の添字(インデックス)が0から始まる点です。fruits[1]は2番目の要素を指すため、「1番目=fruits[0]」という感覚のズレでバグを生みやすくなります。また存在しない添字にアクセスすると、エラーにならずundefinedが返ってくる点にも注意が必要です。

実際の開発現場では、商品一覧やユーザーのコメント一覧など、複数件のデータはほぼ必ず配列として扱われます。データベースやAPIから受け取るデータも配列形式であることが多く、配列の操作に慣れることはWeb開発の基礎体力そのものと言えます。

配列には.push()で末尾に要素を追加したり、.pop()で末尾の要素を取り除いたりするメソッドも用意されています。こうした基本のメソッドを組み合わせることで、買い物かごに商品を追加する処理のような、実際のアプリでよくある操作も簡単に実装できます。

配列の要素を削除したいときは.splice()、特定の位置に要素を挿入したいときも同じく.splice()を使います。少し複雑な引数を取るメソッドですが、配列の途中を編集したいときによく登場するので、名前だけでも覚えておくと役立ちます。