Ne:Code道場～JavaScript 配列の中身の利用の巻～

はじめに

この記事ではJavaScriptの配列の中身の利用について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、配列の中身の利用について理解を深めてゆきましょう。

複数のものをまとめている配列、中身を取り出すときにはどうすれば良いニャ？

前回の記事で、ビルトインオブジェクトについて補足しつつ、そのうちの一つである配列の宣言部分までを取り上げました。
配列の変数は、実体は１つでも、中身に複数の値を持つことができるという内容でしたが、その中身の個々の値を取り出す際にも、それ専用の書き方があります。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
// 変数の後にここでも角カッコを書いているニャ
// 角カッコの中には数字を書いているニャ
// このコードを実行すると、cats変数の先頭に書いてある「ミケ」が出力されたニャ！
// 1番目なのに、「0」って書いているニャ？
console.log(cats[0]);

配列宣言時も用いた角カッコ、値を取り出す際にも利用します。
配列の中の要素は、先頭から順番に0番目、1番目という小部屋に入っているので、取り出す際の角カッコ内には、それをもとに何番目の要素を取得したいかによって、数値を変えてゆきます。
開始が1からで無い点に、猫弟子は疑問をもっているようですが、プログラミングではゼロを最初にしてゼロから始まることが往々にしてあります。「ゼロオリジン」という言い方があるくらいです。

中身を全部取り出すにはどうかけば良いニャ？

先程のcatsという変数の中身を全て出力するとなった場合、どのように書けるでしょう。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
// ゼロから順番に書いてゆくニャ！
// ニャンコ先生は0から始まって3番目だから、0～3で書くニャ！
console.log(cats[0]);
console.log(cats[1]);
console.log(cats[2]);
console.log(cats[3]);
// ・・・なんだか、師匠の視線が冷たいニャ。。！
// この書き方はまずそうな気がするニャ！

師匠からの氷の視線で「まずい」と気づくことができた猫弟子でしたが、実際このコードは動きはしますが、好ましくはありません。
プログラミングを書いているときには、往々にしてそういうシーンに出くわします。
「動けばいい」で書いたコードは、確かに動きはしますが、変更がしづらくなり、メンテナンス性が下がります。また、他の人が書いたコードを見た時に、読みにくくなってしまったり、迷惑をかけてしまう場合もあります。
学習において最初は動けばいいからスタートしたとしても、そこから徐々に、「よりよく書くには」を意識してゆくと、プログラミング力はさらに伸びてゆくと思います。

サンプルコードのまずいポイントを教えてニャ

さて、上記のコード、配列の中身全てに対して処理を行っている書き方で、せっかく配列として一つにまとめているのに、全て手書きで列挙している点がまずいポイントですね。複数のものをまとめて管理している配列では、複数のものの個数が状況によって変わる場合がありますから、上のコードだと、変わった場合出力する部分も書き換えないといけません。また現在は個数がせいぜい4個なので間違えにくく、且つ、間違えていても比較的気づきやすいかもしれませんが、ミスはつきものなので、連番の数字を書き換えてしまう可能性もゼロではありませんよね。そしてもし間違えていた場合は見つけるのはとても骨を折ります。茨の道になりそうですね。

配列の中身全てに処理をしたい場合はどう書くニャ

以前の記事で繰り返しの処理について取り上げましたが、繰り返し処理は配列と相性がとても良い構文になります。
配列の中身は複数のものがありますが、その複数のもの、最初から最後まで「繰り返し」処理を行えばシンプルに書けそうというのはイメージが湧くのでは無いでしょうか。
まずは具体的なコードから見てゆきましょう。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
// 繰り返しの時に登場したfor文だニャ
// for文の条件式のところに、配列変数catsが使われているニャ！
// ドットは、そのデータ型の便利な機能を使う際に用いるものだったニャ
// lengthは配列の便利な機能に違いないニャ！
for (let i = 0; i < cats.length; i++) {
  // さっきconsole.logを合計4回書いたのに、ここでは1回だニャ！
  // 角カッコの中にfor文のiを使ってシンプルにまとめてるニャ
  console.log(cats[i]);
}

for文の条件式の中で、配列の変数にドット経由で「length」というものを用いていますね。
このlengthは配列の変数の便利機能として用いる時に、配列の中身の要素数を取得することができます。
上記のサンプルコードだと、変数の中には4匹の猫がいるので、cats.lengthは「4」という数字が取得できます。中身を数える場合は、数えるという特性上、開始は1からになります。配列の要素にアクセスする際の0と混ざらないように注意しましょう。
条件式の「i < cats.length」は「iが4未満の場合」となり、結果、iの値は猫弟子が書いたように、「0～3」まで姿を変え、配列の中の各要素を順に出力することができています。

配列の中身をただ順番に処理したい場合はどう書くニャ

最初のサンプルコードでは、for文を用いたベーシックな配列の中身全てへの処理を記載しました。ただ、このfor文だと、iという変数が宣言されていますが、このiは、ただ配列の中身を取り出すのにもちいられ、i自体（何番目）という情報は利用されていません。
例えば、以下のような書き方をする場合は、iも利用されていると言えます。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
for (let i = 0; i < cats.length; i++) {
  // ミケの時は、「1番、ミケニャ！よろしくニャ～」と表示されるニャ
  // この書き方は、「ES2015のテンプレート文字列」だったニャ
  // iは0から始まっているから、+1した値を出力しているニャ～
  // テンプレート文字列の${}の中には、このように計算式も入れられるんだニャ
  console.log(`${i + 1}番、${cats[i]}ニャ！よろしくニャ～`);
}

上記のように何番目自体も処理で用いる場合は、for文の何番目かの情報も必要ですが、最初のサンプルコードのように、順番の情報は個別には使わず、ただ、配列の中身を繰り返し処理したいという場合には、「for-of」という構文がES2015より利用可能になっています。
まずは具体例を見てみましょう。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
// はニャ！？丸カッコの中がとってもシンプルになったニャ！
// 「catsのcat」と読めるから、英語的にも読みやすい文だニャ
for (let cat of cats) {
  // 動きは最初のサンプルコードと全く同じニャ
  // 漫画のダルマ落としのように、どんどん次の要素がcatという変数の中に入ってきているニャ
  console.log(cat);
}

少し横道にそれますが、ES2015以前も「for-of」とは別に、よく似た「for-in」という構文がありました。
でもこの書き方は、本来、オブジェクトの中身を列挙するのに用いるもので、配列の中身の処理に用いてしまうと、予期せぬ挙動をしてしまう可能性があるため、配列での利用は非推奨となっている構文でした。（このあたりは、オブジェクトに関連してfor-inを取り上げる際に補足します。）
　
また、せっかくですので、配列自体の便利機能としてforEachメソッドを取り上げます。意味合いとしては「for-of」と似ていて、配列の中身を順番に処理してゆくことができるメソッドとなります。以前の記事で取り上げたコールバック関数を引数にして用います。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
// これは、コールバック関数だニャ！！
// catsから、各（each）猫を順番に処理してゆくという繰り返し処理ができるってことニャ
cats.forEach(cat => {
  console.log(cat);
});

上記の記事で、「配列の説明で用いる予定です」と補足したコールバック関数、この例でも、無名関数を使うメリットを体感していただけると思います。
配列の中身をただ順番に処理したいだけなので、そのために関数を別途宣言するのは冗長ですよね。しかも、無名関数とすることで配列の中の要素に、catという名前をつけて、各要素ごとにどういう処理をしているのかも一目瞭然になりますね。
意味合いは、for-ofと全く同じですので、ES2015を用いない場合はこちらの記載で書くのもありでしょう。
また、興味がある方は、是非、MDNのforEachのページを確認してみると、良い勉強になるでしょう。と言いますのは、実は、forEachの書き方でも「（for文のiのような）何番目」という情報も扱うことができるのです。新しい機能を用いるときのリファレンスの重要性がここでも輝きますね。
　
もちろん、配列の中身全てに処理をする際に、ベーシックなfor文の記載でも問題ありません。「for-of」や「forEach」での書き方がわかりにくい場合はfor文で配列を展開する書き方を、まずはしっかり抑えてゆくことにしましょう。

最後に

配列の中身の利用について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

1. 配列の中身を何番目指定で取り出す場合には、角カッコを用いるニャ
   1. その際の何番目は、ゼロからスタートした数字を指定できるニャ
2. 配列と繰り返し処理は相性バツグンニャ
   1. for文の条件式で、配列のlengthを用いることで、「中の要素全てに対する処理」という抽象的な記載が可能になるニャ
   2. 抽象的に書いておくことで、修正する際の修正箇所がぐっと減るニャ
3. 繰り返し処理の中の順番は特に利用せず、ただ中身を繰り返したい場合の書き方もあるニャ
   1. ES2015から利用可能になった「for-of」、また、配列の便利機能として利用できるforEachメソッドがあるニャ
   2. どちらも、配列の中身をダイレクトに変数として順番に受けながら処理を記載することができるニャ

配列から中身を取り出す時に、繰り返し処理を併用することで複数の値をまとめて処理できることを学びました。複数のものを一つにまとめ、それを共通的に処理することによって、できることの幅がぐっと広がってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
配列への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。