DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 配列 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.6】

配列 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.6】

配列は複数のデータを1つにまとめて管理できるデータ型です。配列は多くのトピックがあるのですが、今回は基本的なものに絞って解説します。

配列は正確には「Arrayオブジェクト」です。プロトタイプ継承により「Array.prototype」オブジェクトを暗黙に継承します。ただしこの回の段階ではオブジェクトやプロトタイプ継承を学んでいないので、単に「配列」と表記しています。解説もあえてオブジェクトには触れず、表面的な使い方の説明になっています。

Google ChromeのJavaScriptコンソールを開きます。

まず配列を定義します。fruitsという変数名に配列を割り当てます。

> var fruits = ["バナナ", "リンゴ", "メロン", "スイカ"];
<- undefined

配列を出力してみましょう。

> fruits
<- ["バナナ", "リンゴ", "メロン", "スイカ"]

要素の取り出し

配列の単一の要素を取り出すには角括弧の間にインデックスの整数を指定します。
先頭の要素のインデックスは0で、順番に自動でインデックスがふられます。

> fruits[0]
<- "バナナ"
> fruits[1]
<- "リンゴ"

マイナスや範囲をこえるインデックス値を指定した場合、エラーではなくundefinedが返されます。

> fruits[-1]
<- undefined
> fruits[10]
<- undefined

空の配列

[]と書くと要素がない空の配列を定義できます。あとからpush()などで要素を追加するときに使います。

> var lst = [];
<- undefined

分割代入を使った要素の取り出し

分割代入を使うと、インデックス値を使わず、一行で複数の変数に配列を分割して代入ができます。

> var [fruit1, fruit2, fruit3, fruit4] = fruits;
<- undefined
> fruit1
<- "バナナ"
> fruit2
<- "リンゴ"
> fruit3
<- "メロン"
> fruit4
<- "スイカ"

var [fruit1, fruit2, fruit3, fruit4]のように代入先の変数も角括弧で囲みます。
分割代入はECMAScript 2015で新たに加わった仕様です。

様々なデータ型を混在できて、データの重複も可能

実際に、ほとんどこういう配列のコードは書きませんが仕様上は可能です。

> var mix = [true, 1, "こんにちは", 1, true]

要素の書き換え

インデックス値を指定して、代入すると可能です。

> var foods = ["ラーメン", "カツ丼", "鉄火丼"]
<- undefined
> foods[0] = "うどん";
<- "うどん"
> foods
<- ["うどん", "カツ丼", "鉄火丼"]

要素の末尾への追加

push()で配列の末尾に要素を追加できます。

> foods.push("ステーキ");
<- 4
> foods
<- ["うどん", "カツ丼", "鉄火丼", "ステーキ"]

末尾の要素の取り出し

pop()を使うと配列の末尾の要素を取り出すことができます。取り出された要素は、配列から削除されます。

> foods.pop()
"ステーキ"
> foods
["うどん", "カツ丼", "鉄火丼"]

先頭の要素の取り出し

shift()を使うと配列の先頭の要素を取り出すことができます。取り出された要素は、配列から削除されます。

> foods.shift();
<- "うどん"
> foods
<- ["カツ丼", "鉄火丼"]

splice()を使った要素の追加、置換、削除

splice()を使うと、要素の追加、置換、削除ができます。

splice(抽出開始位置, 取り出す要素数)と指定すると、指定の範囲の要素が抽出され、配列から削除されます。

> var fruits = ['バナナ', 'リンゴ', 'メロン', 'スイカ'];
<- undefined
> fruits.splice(1, 2)
<- ["リンゴ", "メロン"]
> fruits
<- ["バナナ", "スイカ"]

取り出す要素数を省略した場合、配列の最後の要素までが抽出され、配列から削除されます。

> var fruits = ['バナナ', 'リンゴ', 'メロン', 'スイカ'];
<- undefined
> fruits.splice(1);
<- ["リンゴ", "メロン", "スイカ"]
> fruits
<- ["バナナ"]

splice(抽出開始位置, 取り出す要素数, 削除箇所に挿入する要素)と指定すると、指定の範囲の要素が抽出され、削除されます。削除箇所に挿入する要素が配列に追加されます。削除箇所に挿入する要素は複数個指定できます。

> var fruits = ['バナナ', 'リンゴ', 'メロン', 'スイカ'];
<- undefined
> fruits.splice(1, 2, "イチゴ", "ぶどう")
<- ["リンゴ", "メロン"]
> fruits
<- ["バナナ", "イチゴ", "ぶどう", "スイカ"]

取り出す要素数をゼロで指定すると、要素は削除されず、抽出開始位置の後に、要素を追加できます。

> var fruits = ['バナナ', 'リンゴ', 'メロン', 'スイカ'];
<- undefined
> fruits.splice(1, 0, "イチゴ", "ぶどう")
<- []
> fruits
<- ["バナナ", "イチゴ", "ぶどう", "リンゴ", "メロン", "スイカ"]

配列に指定の要素があるかどうかのチェック

indexOf();を使うと、配列内に値があれば、そのインデックス値を返します。なければ、-1を返します。比較は===と同じなので、同じデータ型で値も同じ場合になります。

> var fruits = ["バナナ", "リンゴ", "メロン", "スイカ"];
<- undefined
> var index = fruits.indexOf("リンゴ");
<- undefined
> index
<- 1
> var index = fruits.indexOf("みかん");
<- undefined
> index
<- -1
> var nums = [5, 3, 10, 100];
<- undefined
> var index = nums.indexOf(3);
<- undefined
> index
<- 1
> var index = nums.indexOf(200);
<- undefined
> index
<- -1

配列の結合

concat()を使うと配列と配列を結合して新しい配列をつくります。

> var names1 = ["田中", "鈴木"];
<- undefined
> var names2 = ["佐藤"]
<- undefined
> names1.concat(names2);
<- ["田中", "鈴木", "佐藤"]

concat()は結合した新しい配列を作るので、元の配列には影響がでません。

> names1
<- ["田中", "鈴木"]
> names2
<- ["佐藤"]

concat()で結合した新しい配列を使う場合は、別の変数を設定します。

> names3 = names1.concat(names2);
<- ["田中", "鈴木", "佐藤"]
> names3
<- ["田中", "鈴木", "佐藤"]

配列の要素の個数

lengthで調べることができます。

> var fruits = ['バナナ', 'リンゴ', 'メロン', 'スイカ'];
<- undefined
> fruits.length
<- 4

文字列への変換

join()を使うと、配列からひとつの文字列に変換することができます。区切り用の文字列を指定できます。

> var foods = ['ラーメン', 'カツ丼', '鉄火丼']
<- undefined
> foods.join("と")
<- "ラーメンとカツ丼と鉄火丼"

join()は元の配列に影響は及ぼしません。生成した文字列を使いたいときは、変数を使います。

> var str = foods.join("と");
<- undefined
> str
<- "ラーメンとカツ丼と鉄火丼"

配列はまだまだポイントがあるのですが、今回は基礎的なところだけをまとめました。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター・Web制作者
ON VISITINGを制作・運営。
お問い合わせ