この記事の執筆・監修
テクノロジーアンドデザインカンパニー合同会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
はじめに
こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#08 配列」について説明します。
配列とは？
配列とは、複数のデータを格納することができるデータ型です。
変数のレッスンでは、変数は「箱」と説明しました。
例えるなら、変数は1つのデータしかいれらない「箱」なのに対して、配列は複数のデータを入れることができる「ロッカー」です。
1列の配列のことを1次元配列といい、2列以上ある配列は多次元配列といいます。
配列の1つ1つの箱のことを要素といい、箱の数を要素数といいます。
配列のそれぞれの要素には、場所の情報が割り当てられています。
データが住んでいる住所のようなものです。
この住所には、インデックスという番号というものが割り当てられています。
インデックスのことを「添え字」といったりもします。このレッスンでは、インデックスという名前で進めていきます。
一番左のインデックスは0から始まります。1から始まるわけではないので注意です。
そのため、1番最初のインデックスは「0」、2番目のインデックスは「1」、3番目は「2」、4番目は「3」といったように、インデックスは配列が格納されている「順番 - 1」となっています。
配列の作り方 1つめ
それでは、配列の作り方をみていきましょう。
配列の作り方はいくつかあるのですが、2つ紹介します。
Arrayを使う方法と、角括弧（[ ]）を使う方法です。
まず、Arrayを使う方法をみていきます。
書き方のきまりは次のとおりです。
var 変数 = new Array(要素数);
var、変数、イコール、小文字のnew。Array書いて丸括弧。丸括弧の中に要素数を書きます。
Arrayはコンストラクタといいます。コンストラクタを使用した配列の宣言方法を「コンストラクタの初期化」といいます。
これだけではわかりにくいと思うので、ソースコードを見ていきましょう。
var arr = new Array(3);
a[0] = "sato";
a[1] = "suzuki";
a[2] = "takahashi";
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);このコードは、aという変数に、’sato’,'suzuki','takahashi'という3つのデータを代入する配列を作るものです。
コードの意味を説明していきます。
最初にvarを書いて、変数を記述します。
イコールを書いて、new。次にArrayを書いて丸括弧内に配列の要素数を記述します。
これで要素数3の配列ができました。
それぞれの要素にデータをいれていきます。
"変数のあとに要素数を書いて代入です。変数のあとにインデックスを書いて代入です。
"
代入がされているか表示させてみましょう。
表示されました。
var a = new Array("sato","suzuki","takahashi");
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);要素数を指定せずに、直接、データを記述することもできます。
Arrayの中に直接データを記述します。
実行してみましょう。
表示されました。
これが配列の作り方の1つめです。
配列の作り方 2つめ
配列の作り方の2つめです。
角括弧（[ ]）を使う方法です。
リテラルの意味は、直接、文字や数字を記述すると言う意味です。
書き方のきまりは次のとおりです。
var 変数 = [データ1,データ2,….];
この書き方を「配列リテラルの初期化」といいます。
varのあとに変数。イコールを書いて、各括弧の中にデータを直接記述します。
データとデータの間はカンマで区切ります。
コードを書いてみていきましょう。
var a = ["sato", "suzuki", "takahashi" ];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]); このように角括弧の中に、直接データを記述します。
代入されているか確認のため、表示させてみましょう。
それぞれの要素に代入されています。
var a = ["sato", "suzuki", "takahashi" ];
a[1] = "tanaka";
console.log(a[0]);
console.log(a[1]);
console.log(a[2]); 配列のデータの変更をしてみましょう。
要素を指定して代入します。
配列の2番目のsuzukiさんをtanakaさんにしてみます。
2番めなので角括弧に書くインデックスは1です。
変更されているか確認してみましょう。
suzukiさんがtanakaさんに変わっています。
多次元配列
var a;
a = [ ["sato","suzuki"],["takahashi","tanaka"] ];
console.log(a[0][0]);
console.log(a[0][1]);
console.log(a[1][0]);
console.log(a[1][1]);
2次元の配列を作ってみましょう。
2次元配列の場合は、かっこの中にかっこを書き、そこに代入するデータを記述します。
多配列の要素についてです。
2次元配列の場合は、角括弧を2回使用すれば良いです。
satoさんは、1つの配列の、1番目です。なので、0の0です。
suzukiさんは、1つの配列の、2番目です。なので、0の1です。
tanakaさんは、2つの配列の、1番目です。なので、1の0です。
takahashiさんは、2つの配列の、2番目です。なので、1の1です。
表示してみましょう。
satoさん、suzukiさん、takahashiさん、tanakaさんが表示されました。
