今すぐマスターしたい！JavaScriptで配列を使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【配列】を使う方法を解説した記事です。配列では複数の値を入れて使いまわすことができます。応用としてforEach()の使い方も紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、JavaScriptで配列を使う方法についてプログラミング初心者向けに解説した記事になります。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
配列とは
配列とは、1つの変数に、複数の値やオブジェクトを格納するための仕組みです。変数に数値や文字列を格納する場合は、通常、1つの変数に1つの値しか格納できません。
しかし配列を使うことで、グループ化されたデータを1つの変数に格納して扱うことができます。
田島メンター！配列というのは、変数がたくさん集まった箱みたいな感じでしょうか？
その通り！プログラムで扱いやすいようにインデックスでアクセスできるんだ。
インデックスっていうのは、どういったものですか？
配列名[0]とか配列名[1]のような感じなんだ。インデックスは場所みたいな意味なんだ。さっそく実際に配列を書いてみよう！
配列を実際に書いてみよう
まずは、基本的な配列の書き方を実際に試してみましょう。
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");
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
配列のインデックス
配列のインデックスとは、データを取り出す際に使われる指定番号のようなものです。
配列は、複数のデータを保持することができます。データを格納する領域（箱のようなもの）は並び順を決めて連番で管理されていますので、
取り出す際には番号を指定することで、取得対象を選択できます。
この番号のことを、「インデックス」と呼びます。インデックスは、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コースを担当。 |
console.logってchromeのその他→デベロッパーツールを使うと表示されるんですね。
モダン（近代的）なブラウザだとたいていあるね。
インデックスやlengthプロパティって合わせて使うんですか？
合わせて使うことが多いね。インデックスを[0]、[1]と増やしていけば、それぞれの変数にアクセス出来るよね。後は配列の長さ分だけループ文で繰り返したりするんだよ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
