※かじとじむ(当サイト)は、ふだんはネット情報のまとめサイトですが、ときどき管理人が学んだことをまとめています。ざっくりまとめタグからどうぞ!
前回に引き続き、JavaScript 入門の第4回です。
今回は、
- 環境構築、数値計算、Math オブジェクト
- 変数、関数
- 文字列、正規表現
- 配列、繰り返し
の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個の要素を持つ配列ということですね。
これをクリックすると、以下のように展開されるはずです。
こういったものを、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初心者です。
ぜひ次のステップへ、チャレンジしてみてください。