【JS初心者になろう】 配列、繰り返し

※かじとじむ(当サイト)は、ふだんはネット情報のまとめサイトですが、ときどき管理人が学んだことをまとめています。ざっくりまとめタグからどうぞ!


前回に引き続き、JavaScript 入門の第4回です。

今回は、

  1. 環境構築、数値計算、Math オブジェクト
  2. 変数、関数
  3. 文字列、正規表現
  4. 配列、繰り返し

の4についてです。
(今回が最後になります。)

配列

これまで、数値と、文字列を扱ってきましたが、
JSでは、これらを「まとめて」扱うことができます。

もう少し詳しく言うと、JSには、

  • プリミティブ(基本型)と、
  • オブジェクト(参照型)という2種類があって、

いままで扱ってきた、数値や文字列は、両方ともプリミティブでした。

今回は、オブジェクトの代表格である、配列を紹介します。

===

たとえば、数字の配列とは、数字がたくさん並んでいるものです。

<入力>

[1, 2, 3, 4, 5, 6];

</入力>
< (6) [1, 2, 3, 4, 5, 6]

文字列の配列もできます。

<入力>

[`壱`, `弐`, `参`, `肆`, `伍`, `陸`];

</入力>
< (6) [‘壱’, ‘弐’, ‘参’, ‘肆’, ‘伍’, ‘陸’]

さらには、数字と文字列を混在させることもできます。

<入力>

[1, `弐`, 3, `肆`, 5, `陸`];

</入力>
< (6) [1, ‘弐’, 3, ‘肆’, 5, ‘陸’]

配列の中に、さらに配列を入れることもできます。

<入力>

[[11, 12], [21, 22]];

</入力>
< (2) [Array(2), Array(2)]

Arrayというのが、英語では配列を意味します。
Array(2)というのは、2個の要素を持つ配列ということですね。

これをクリックすると、以下のように展開されるはずです。

0: (2) [11, 12]
1: (2) [21, 22]
length: 2

こういったものを、2次元配列と言います。

ということは、3次元配列、4次元配列も可能ということです。
(頭が混乱するので、あまりやりすぎないようにしてください)

===

さて今度は、配列を変数に入れてみましょう。
※変数aが、定義されていないことを確認してから使ってください。

<入力>

let a = [`壱`, `弐`, `参`, `肆`, `伍`, `陸`];

</入力>
< undefined

たとえば、0番目の文字(壱)を取り出したいなら、次のようにします。

<入力>

a[0];

</入力>
< ‘壱’

番号は、0から始まることに注意してください。
また、範囲外の数字は入れられません。

<入力>

a[-1];

</入力>
< undefined

<入力>

a[6];

</入力>
< undefined

繰り返し

しかし、この配列とかいうもの、何が楽しいのでしょうか。
実際、今のままでは、あまり利用価値がありません。

配列で利用価値が出てくるのは、繰り返し処理をできるからです。

ここでは、いちばんスタンダードな配列のメソッドを紹介します。

map()

というメソッドです。

引き続き、先ほどのaという変数に入れた配列を使います。

<入力>

a.map(num => `上弦` + num);

</入力>
< (6) [‘上弦壱’, ‘上弦弐’, ‘上弦参’, ‘上弦肆’, ‘上弦伍’, ‘上弦陸’]

numの前に、文字列を足していることが分かります。

命令は、1度しかしていないのに、6つの要素すべてに対して、処理をしてくれています。
これが、map()メソッドの繰り返しの力です。

===

このmap()メソッドを、さらに観察してみましょう。
これ、よく見ると、関数が入っていることに気が付いたでしょうか。

「num => `上弦` + num」の部分が、関数になっています。

これは、現時点ではややこしいかもしれません。
理屈の部分は、入門書などで調べてみてください。

こういった繰り返し操作は、map()だけではなく、
for文、forEachメソッドなど、いくつか用意されています。

その時々に応じて、使い分けることで、
JSに、効率よく命令できるというわけです。

初心者への道

今回で、配列を扱うことができるようになりました。

前回同様、「改訂新版 JavaScript本格入門」の中での対応するページは、

  • 配列:3.3.1章
  • 繰り返し:3.3.1章

となっていますので、もしよければあわせて読んでみてください。


===

配列が扱えるようになると、
一度実行した内容を保存しておきたいと
思うようになってくるのではないでしょうか。

いちいち入力するのが面倒ですからね。

そこで次にやるべきなのは、
エディタで保存してJSを動かすことです。

ウインドウズなら、メモ帳でも始められます。

上記の入門書では、Visual Studio Codeという
高性能なエディタ(無料)がオススメされています。

こういったものをインストールするようになれば、
もう立派なJS初心者です。

ぜひ次のステップへ、チャレンジしてみてください。