JavaScriptで配列内の要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列内の要素を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 配列とは
• 配列内の要素を取得する方法
• 実際に書いてみよう
• まとめ

 

配列とは

配列とは複数の要素をまとめて扱う仕組みです。学校の生徒の成績や小売業の毎日の売上高など、複数の同じ意味合いの要素の集合というのは現実世界にも多く存在します。それらを配列の要素として保持することで、プログラミングで繰り返し構文などで効率的な処理が可能となります。

JavaScript で配列を作成するには以下のように指定します。

const array1 = [178, 166, 182, 174, 180];

この場合、array1 というのが配列の名称となります。配列について詳しくは以下の記事も参考にしてください。

MDN – 配列

関連記事：JavaScriptで配列を比較する方法を現役エンジニアが解説【初心者向け】

関連記事：JavaScriptで指定した要素が配列に存在するかチェックする方法を現役エンジニアが解説【初心者向け】

 

[PR] コーディングで副業する方法とは

配列内の要素を取得する方法

配列内の要素を取得するにはインデックスを指定します。例えば先頭の要素を取得するには以下のように記述します。

array1[0]

インデックスは0から始まることに注意しましょう。よって配列の末尾の要素のインデックスは「配列の要素数 – 1」となります。

 

実際に書いてみよう

今回のサンプルプログラムでは配列内の要素を取得する方法について確認します。実行はChromeブラウザーのデベロッパーツールで行いましょう。

まずは配列を定義します。

const array1 = [178, 166, 182, 174, 180];
console.log(array1);

実行結果は以下のとおりです。

(5) [178, 166, 182, 174, 180]
  0: 178
  1: 166
  2: 182
  3: 174
  4: 180
  length: 5

配列の先頭の要素を取得してみましょう。

console.log(array1[0]);

実行結果は以下のとおりです。

178

繰り返し構文を使用することで配列に対する処理を簡潔に記載することができます。また、配列の要素数が変わっても繰り返し構文の部分は変更する必要がありません。

for (let i = 0; i < array1.length; i++) {
  console.log(array1[i]);
}

実行結果は以下のとおりです。

178
166
182
174
180

少し複雑な処理を行ってみましょう。配列の要素の平均を計算してみます。

let sumval = 0;
for (let i = 0; i < array1.length; i++) {
  sumval += array1[i];
}
console.log(`配列の値の平均は${sumval / array1.length}です`)

実行結果は以下のとおりです。こちらも配列の要素数が変わっても繰り返し構文の部分は変更不要です。

配列の値の平均は176です

 

まとめ

今回の記事では JavaScript で配列内の要素を取得する方法を学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。