【プロゲート復習】Javascriptで配列を使ってみよう。

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • 配列とは
  • 配列をつかって複数の値を扱う 

対象読者は、次のような方を対象としています。

Javascriptで配列を学びたい!

プロゲートの復習がしたい!

前回では、ループ処理を学びました。今回は、配列に触れていきましょう

配列とは

複数の値をまとめて管理するには、配列を用います。

配列は、[値1, 値2, 値3] というように作ります。それぞれの値を、 要素 と呼びます。

配列を使うと、下のように、複数の値をまとめて書くことができます。

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero);

配列も1つの値なので、変数に代入ができます!

配列の要素を取り出す。

配列の中身を1つだけ取り出すことは出来るの??

もちろんです。配列の要素には、インデックス番号が割り振られています。特定の要素を取り出すには、変数名[番号]とします

じゃぁ、アンパンマンを取り出してみる!

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero[1]);

あれ?hero[1]って書いたら、ウルトラマンがとれちゃった、、どうして??

ここで注意点、インデックス番号は、0から始まります。なので最初の値は、hero[0] で取り出せますね。

それを早く言わんかい!!

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero[0]);

アンパンマンがとれましたね!

配列のインデックス番号は0から始まる。

配列の要素を更新する

次に配列の要素を更新してみましょう

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero[0]);
hero[0] = "ジャコピーマン"
console.log(hero[0]);

こんな感じで、上書きが可能になっています。

配列の操作

ここからは配列を便利に扱う技術を2つ紹介します。

  • length
  • push

1つめは length についてです。

lengthは『 配列.length 』のように、書きます。

すると、配列の要素の数を取得できます。

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero.length);

要素が増えていくと、lengthは非常に重宝します

2つめは、push について学びます。

配列.push(追加したい値) 』と書くことで、配列の後ろに値を追加出来ます。

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero);
hero.push("ジャコピーマン");
console.log(hero);

後ろに追加できましたね!

lengthはプロパティ、pushはメソッドという概念です。詳しくは、後に『オブジェクト』を学ぶところで出てきます。

配列とループ処理

配列は、複数の値を取り扱うことから、ループ処理ととても相性が良いです。

配列の中の値を、ループ処理で一気に取り出す、といったことが可能です。

配列とループ処理は、お肉と白ご飯レベルに相性が良いです!

悪魔の組み合わせだね!

では早速、配列とfor文を使った例題をみてみましょう!

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
for(var i = 0; i < hero.length; i++){
    console.log(hero[i]);
}

hero.lengthが3なので、iが0~2の間でループします!

要素番号iがループしてるから、全ての値を取り出せているんだね!!

そうです!for文を使えば、配列の中の値全てを簡単に出力することが出来ます!

配列とループ処理はセット!2つが揃うことで本領発揮します!

配列も理解必須の概念です。

今回は、配列の基礎について学びました。

次回でもうちょっと詳しく配列を学ぼうと思います。

配列は、ループ処理などと同じく、プログラミングの核となる概念です。

配列を使えば、ショッピングサイトのお買い物カゴを作ることができます。

一番身近なのは、Amazonでしょうか?商品をカゴに追加していくと、カゴに複数の商品が入りますよね。

あれがまさしく配列に、商品を突っ込んでいるのです。

買い物に入っている商品の数は、lengthを使えば簡単に出せますね。

このブログを通じてあなたは着実とプログラミングの力を高めて行っています。自信を持ってください。

Javascriptの体系的な知識を得るなら以下の書籍もオススメです。

コメント