今すぐマスターしたい！JavaScriptで配列を使う方法【初心者向け】

今回は、JavaScriptで配列を使う方法についてプログラミング初心者向けに解説した記事になります。

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

• 配列とは
• 配列を実際に書いてみよう
• 配列の初期化
• 配列のインデックス
• 配列の中身を一括処理する方法

配列とは

配列とは、1つの変数に、複数の値やオブジェクトを格納するための仕組みです。変数に数値や文字列を格納する場合は、通常、1つの変数に1つの値しか格納できません。

しかし配列を使うことで、グループ化されたデータを1つの変数に格納して扱うことができます。

 

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

配列を実際に書いてみよう

まずは、基本的な配列の書き方を実際に試してみましょう。

JavaScript

// 配列データの定義
var programs = ["JS", "HTML", "CSS"];

// 配列が持つデータの1つ目をコンソール出力
console.log( programs[0] ); // インデックス：0 を指定

// 配列にデータを追加する
programs.push( "PHP", "RUBY" ); // pushメソッドの利用

// 配列全体をコンソールで確認する
console.log( programs );

実行結果

JS
["JS", "HTML", "CSS", "PHP", "RUBY"]

配列でどんなことができるか、ざっくりと理解できたと思います。慣れてきたところで、詳しい解説を見ていきましょう。

 

配列の初期化

配列を初期化するには、以下の2通りの方法があります。

var array1 = []; // 簡単な方式
var array2 = new Array(); // 本来の方式

いずれの場合も変数は「配列型（Array型)」として初期化され、Array型に実装されているpush()などのメソッドが利用できるようになります。

初期化することで、array1, array2 は「配列型のオブジェクト」として機能します。また、これは「空の配列の定義方法」となりますので、
上記のarray1,array2ともに、中身が空の配列オブジェクトとなります。

初期化と同時に値をセットする場合は、以下のように記述します。

var programs1 = ["JS", "HTML", "CSS"];
var programs2 = new Array("JS", "HTML", "CSS");

配列のインデックス

配列のインデックスとは、データを取り出す際に使われる指定番号のようなものです。

配列は、複数のデータを保持することができます。データを格納する領域（箱のようなもの）は並び順を決めて連番で管理されていますので、
取り出す際には番号を指定することで、取得対象を選択できます。

この番号のことを、「インデックス」と呼びます。インデックスは、0から順番に番号が付与されることに注意してください。

インデックス指定の例

var programs = ["JS", "HTML", "CSS"];
console.log( programs[0] ) // JSが取得できる
console.log( programs[1] ) // HTMLが取得できる

インデックスを指定する時は、変数名の後に[ ]を付与することに注意しましょう。

インデックスを指定して値を格納する

インデックスを指定することで、指定した場所のデータだけ書き換えることもできます。サンプルプログラムを見てみましょう。

JavaScript

var programs = ["JS", "HTML", "CSS"];
programs[0] = "JavaScript"; // 配列の一つ目の領域を上書きする
consolel.log( programs[0] );

実行結果

JavaScript

通常の変数と同じように、配列が持つ格納場所に値を代入できます。

配列の中身を一括処理する方法

配列には、中身を一括で処理するためのforEachメソッドが実装されています。

ここでは、最も簡単なforEach()の使い方を紹介します。

JavaScript : forEach()を使ったプログラム例

var programs = ["JS", "HTML", "CSS"];
programs.forEach( item => console.log(item) ); // ラムダ式を利用

実行結果

JS
HTML
CSS

たった1行で配列が持つ値すべてに対して特定処理を実行できる、強力なメソッドです。プログラム中の「item」は仮の引数で、配列が持つデータの内の1つを表現しています。それぞれのデータについて、console.log( データ );を実行するわけです。

JavaScriptで配列を使う方法については以上です。

他にPHPの配列の記事もあるので合わせてご覧ください。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

執筆してくれたメンター

寺谷文宏（てらたにふみひろ） Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。

 

 

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。