注目キーワード
  1. DMM WEBCAMP

Javascript【配列】とは?初心者向け

  • 2020年5月15日
  • 2020年5月20日
  • Javascript
  • 13回
  • 0件

Javascriptの「配列」
なんか難しそうなんだよな・・・。

そうなんですよね。
「配列」言葉の持っているイメージで数学的な意味を感じてしまい、
拒絶感が出がちです。

ただJavascriptの「配列」はわかると非常に便利なモノです。
思わず「おおっ!」と唸るほど便利なものなのです。

Javascriptの「配列」とは?

複数の値をいっしょに管理することができます。
どういうことかと言うと配列は以下のように書きます。

[値1,値2,値3]

配列に入っている各値のことを「要素」と呼びます。

配列は[  ]しかくカッコで囲まれています。
各「要素」は(,)コンマで区切られています。
「要素」のいちばん後ろに(,)はいりません。

配列に「文字」を入れる場合

文字は” “で囲みます。

[“dog”,”bird”,”monkey”]

配列に「数値」を入れる場合

数字はそのままです。” “で囲むと文字扱いになってしまいます。

[21,32,43]

「配列」って便利なの?

「配列」は便利です。
これまでは、

こんな風に記述する必要があったものが、

※見栄えをよくするために全角を使用している箇所があります。
コピペはおすすめしません。

このように記述することが可能です。
「配列」ごと代入することが可能です。

※配列を代入する場合「定数名」は慣習上複数形にすることが多いです。
例animals

これを、

console.log(animals);

で出力すると、

[“dog”,”bird”,”monkey”]

が出力されます。

あれ?dogだけ、とか、
各「要素」だけを出力したい時はどうするんだろう?

配列の「要素」にはそれぞれ「インデックス番号」という番号がついています。
そのインデックス番号を利用して「要素」を指定することができます。

[“dog”,”bird”,”monkey”] 
 0   1   2

※インデックス番号は「0」から始まります。
数え間違いに注意。

const animals = [“dog”,”bird”,”monkey”];

dogを出力したいなら、

console.log(animals[0]);

monkeyを出力したいなら、

console.log(animals[2]);

配列[ ]で囲まれた何番目の「要素」という指定です。
インデックス番号を指定して「要素」を選ぶことができます。

こんなことが出来るとなるとイメージしてみて下さい。
たくさんのデータを配列に入れる。その中の”何々”を指定して画面上に表示させる。そんな使い方ありそうですよね。

そうなった時に、たくさんのデータを入れました。
そのうちのあの「要素」書き換えたいんだよな・・・。
出来るんです。配列では「要素」の値を代入して上書きすることが可能です。

定数「const」でありながらですよ。変数「let」でないにも関わらず・・・。

実際のコードで見てみましょう。

catが出力されます。

「配列」にfor文を使う

「配列」に繰り返し文である「for文」を使う機会は多々あります。
どういうことかと言うと、配列内の「要素」を「for文」で取り出します。

for(変数の定義;条件式;変数の更新){

 処理

}

なかなかイメージがつかないと思いますが、
以下のような感じのことです。

const animals = [“dog”,”bird”,”monkey”];

console.log(animals[0]);
console.log(animals[1]);
console.log(animals[2]);

インデックス番号を指定して「要素」を指定して取り出す。
もしこの配列のデータが何千、何万とあったら正直やってられません・・・。
そんな場合のためにも「for文」での指定が便利です。

↓以下のように書くことが可能です。

dog
bird
monkey
が出力されます。

震えますよね・・・。
天才の発想です。
「配列」ではインデックス番号をつくため、
それを利用して文字も指定することが可能です。

正直こんな発想私にはありません。先人の英知です。文字をインデックス番号で指定する場合の「公式」として覚えて使いましょう。「数学の公式」的な使い方ですね。

ちなみに条件式の「i < 3;」
インデックス番号は0から始まります。
そのため、0、1、2
i < 3で終了ということです。

ループ処理では「変数 let」を「i」と書きがちです。
※一説によると、(i)(j)など1文字変数をループカウンタとして使う慣習は、
最初の高級言語であるFORTRAN(フォートラン)に由来しているそうです。
ループ処理の場合の慣習です。

※FORTRAN(フォートラン)は1954年にIBMのジョン・バッカスに考案され広く使われた世界最初の高水準言語。

注意:慣れるまでは、
animals[0]と書きがちです。
→animals[i]が正解。

animals[0]は条件を満たすことなく0がずっと続くため、
無限ループに陥ります。覚えたての頃やりがちです。

配列には「length」がある

length?
えっなに?

length「配列」に元々用意されているものです。
※length意味:長さ

「const」や「let」も特別な意味を用意された単語でした。
広い意味で同様に「length」もJavascriptで意味を用意された単語なのです。
あった方が便利だからこそ、ある。作ったんでしょうね。

そのため「length」急に出てきてなんだと思いがちです。
覚えるの面倒なんだよ。そう思うかもしれません。
私は思いました。ただ実際に使用して思います。
「length」は我々の敵ではありません。強力な味方なのです。

const animals = [“dog”,”bird”,”monkey”];

animals.length

↑「配列.length」とすることで、「配列の要素数」を取得。
.ドットでつなげます。

console.log(animals.length);
すると、「配列の要素の数」である3が出力されます。

[“dog”,”bird”,”monkey”]
dog,bird,”monkeyで3つあります。

「配列.length」どう使うのか?

条件式の代わりに、「配列.length」を使用しています。

例では配列の中に要素が3つしかありません。
ですが何千、何万とあるとしましょう。
とても数えてられません。
しかもインデックス番号では0から始まります。
数えた上で-1をする・・・。間違います。
ミスを無くすためにも「~.length」はとても便利なのです。