2024/12/11 (更新日:2024/12/11)

【JavaScript】配列とは何か？その意味と使い方の解説！【forEach()】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

JavaScriptの基礎である「配列」はデータ構造の一種です。複数のデータを一つにまとめるための構造で、言い換えると「ボックスみたいなもの」です。この記事では配列の意味や基本的な使い方を初心者向けに解説します！

この記事の内容！

JavaScriptにおける「配列」とは何か？
配列の使い方！
配列とよく一緒に使われる「forEach」の使い方！

また、下の動画でも「配列」と「forEach()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

配列とは何か？

const fruits = ['りんご', 'ばなな', 'みかん'];

配列は、複数の値をまとめるためのデータ構造です。一般的な変数は一つの値しか持てませんが、配列は複数の値を統一して管理できます。例えば、数字や文字列を一つの配列に格納できます。

配列の構造：「インデックス」と「要素」

const fruits = ['りんご', 'ばなな', 'みかん'];
console.log(fruits[0]); // 'りんご'
console.log(fruits[2]); // 'みかん'

配列は「インデックス」と「要素」から構成されています。

インデックス: 配列の要素の位置を指します。最初は「0」から始まります。
要素: 配列に格納された各個のデータのことを指します。

要素は「配列の要素」とかって言われたりします。

「配列」の使い方！

それでは基本的な配列の知識はまとめ終わったので、その配列の使い方についてまとめますね！

わーい！

「配列」にアクセス方法！

const fruits = ['りんご', 'ばなな', 'みかん'];
console.log(fruits[0]); // 'りんご'
console.log(fruits[2]); // 'みかん'

角括弧の中にインデックスを書くことで「配列」にアクセスすることができます。

配列の値を書き換える

const fruits = ['りんご', 'ばなな', 'みかん'];
fruits[1] = 'ブルーベリー';
console.log(fruits); // ['りんご', 'ブルーベリー', 'みかん']

配列の値は、上のように再代入することで書き換えられます。

たとえ、配列がconstで宣言されていても、中身の値は変更可能です。

配列の長さを取得する

const fruits = ['りんご', 'ばなな', 'みかん'];
console.log(fruits.length); // 3

配列の要素の個数を知りたい場合は、「length」を使用します。

よく「配列」は「forEach」と一緒に使われる

よく「配列」は「forEach」と一緒に使われます。

「forEach」を使うと、配列の要素を１つずつ取り出し、それらに対して何らかの処理をすることができます。

for文を使っても同じことができますが、「forEach」の方がスッキリ書けますね。

const fruits = ['りんご', 'ばなな', 'みかん'];
fruits.forEach((fruit, index) => {
  console.log(`要素${index + 1}: ${fruit}`);
});

出力

要素1: りんご
要素2: ばなな
要素3: みかん

このように「配列」の要素を使って何らかの処理をしたい場合は「forEach」を使うといいでしょう！

「forEach」の使い方！

「forEach」には関数を渡せばOKです。

その関数の処理が、「配列」の要素の数だけ繰り返されます。

その関数の１つの目の引数には、「配列」のそれぞれの要素が入ってきます。

そして、２つ目の引数には、その「配列」の要素に対応する「インデックス」が入ってきます。

参考リンク！

仕様書。
https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array-objects

https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.foreach

MDN。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

まとめ！

配列は、複数のデータを簡単に管理し、操作できる強力なツールです。基本的なパターンを覚えるだけで、複雑なデータの処理もより簡単に行えるようになります。この記事の例を参考にして、ぜひ配列を使いこなしてみてください！

こんな感じですかね！

ではまた！