Ne:Code道場～JavaScript 配列とビルトインオブジェクト入門編の巻～

はじめに

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

配列って何ニャ？

配列はJavaScriptのビルトインオブジェクトの1つになります。
「ビルトインオブジェクト」の説明はこのあとに譲るとして、ここでは、今まで学んだことの比較から、配列（Array）について補足します。
今まで変数の箱のなかに入っているものは、1つの値でした。

// catという変数には「ミケ」という文字の値が1つ入っているニャ
let cat = "ミケ";
　
// countという変数には「777」という数字の値が1つ入っているニャ
let count = 777;

それに対して、配列は1つの変数の中に複数の値をまとめて入れることが可能になっています。
配列の変数の場合、変数の箱の中身は、先頭から順番に小部屋が用意されて、その小部屋に上であげたような個々の変数の中身が入っているイメージです。

// catsという変数には4匹の猫の名前が入っているニャ
// 先頭の小部屋に入っているのは、「ミケ」ニャ
// 最後の小部屋に入っているのは、「ニャンコ先生」ニャ
// catに対して、cats、変数名が複数形になっていると、複数のものをまとめて持ってる感が増すニャ♪
let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
　
// これは中身空っぽの配列変数「something」を宣言しているニャ
let something = [];

変数宣言及び代入演算子までの記載は、以前から用いていた変数宣言時と同じですね。
違いは代入演算子の右辺で、角カッコが記載されているのが特徴です。ここから（[）ここまで（]）を1つにまとめるように角カッコは用いられており、角カッコで包んだものを代入することで、その代入された変数は配列型の変数になります。
空っぽの配列を宣言したい場合は、角カッコ（[]）だけ記載します。
複数のものを小部屋に入れたい場合は、カンマ区切りで設定します。
配列の小部屋に入っているものそれぞれを「要素」と呼びます。上記のサンプルコードだと、catsは要素数が4個、somethingは要素数が0個になっていますね。

ビルトインオブジェクトって何ニャ？

今までの記事でも、それに類するものは取り上げていました。その際にはJavaScriptの便利機能という表現をしていましたが、これらはJavaScriptにそのまま含められている（ビルトイン）便利な機能群になります。
JavaScriptのキッチンで料理をし始めた時、戸棚を開いたら、フードプロセッサーやミキサー等、便利な器具が自由に使える状態になっているようなものです。
なので、これらを活用せずにコードを書くのは、原始時代の生活に匹敵するような不便さを噛みしめることになると思います。
不便な状況の中で、「ひぃひぃ」言いながら作った機能が、もともとJavaScriptに含められていた場合、それは「車輪の再発明」という慣用句を用いつつ否定的に捉えられる傾向があります。
その慣用句の通り、もともと存在している車輪を知らず、自分でゼロから作った車輪は、元の車輪に比べれば圧倒的にポンコツで使い勝手が悪いものになることは想像に難くありません。
もちろん、もともとある車輪を用いるときには、その車輪の使い方を学習する必要があります。でも、その労力は、ゼロから車輪を作る労力に比べればずっと軽いものになるでしょう。その浮いたぶんの労力を、自分が作るシステム本来の価値に注力したほうが、ずっと有益ですね。

ビルトインオブジェクトを使う時は「エイヤ！」で使いはじめて良いかニャ？

上記でも言及しましたが、JavaScriptのビルトインオブジェクトを用いるときには、まず、「どのように使うのか」を把握することが肝になります。現実世界では、はじめて使うものも、説明書を読まずに「エイヤ！」で使い始めてもそれとなく使える場合はあるかもしれませんが、こと、プログラミングにおいては、もともと備え付けられている機能がどういう用途に用いることができ、どういうルールで動くのかを把握せずに使うと、思わぬ落とし穴にハマってしまう危険性が高まります。と同時に、これらを把握することで便利な機能を余すことなく使い倒すことが可能にもなります。
「どのように使うのか」を把握する際には、リファレンスを参照することがとても重要になります。
ブラウザのFirefoxを作っているMozillaが提供してくれているMDNというサイトは、そのリファレンスとしてとてもおすすめです。
はじめて使う機能で、ネットで調べてそれっぽいサンプルコードを見つけたから、そのまま自分のコードに追加しようとするのではなく、そこで一歩止まって、MDNのサイトでどういう動きになるのかをチェックすると、サンプルコードのどこをどう変えればよいのかや、また、サンプルコードでは冗長になっていた記載を自分の処理ように最適な書き方に変えるなどのアクションを取れるようになると思います。

例えば配列の便利な機能にはどういうのがあるニャ

配列型で作った変数経由で用いられる便利な機能は沢山あり、この先の記事でも段階を追ってその一部を取り上げてゆきますが、今回は「末尾に要素を追加する」という便利な機能をピックアップしましょう。
先程の例で空っぽの配列を宣言したコードを記載しました。これに対して値を追加してゆくときに用いることができるのが、配列型の持っている「push()メソッド」です。
メソッドは関数によく似ていて、これらを混ぜて表現するシーンもたまに見かけますが、厳密に言うと、メソッドはオブジェクトに対する操作を行う関数を指します。なのでメソッドを用いるときには、変数経由で実行するのが特徴です。
ただ、それ以外は、引数・戻り値など、関数のときに学んだ知識をそのまま用いることが可能です。
まずは、具体例を見てみましょう。

let something = [];
something.push("チョコ");

上のサンプルコードでsomethingという配列変数の1つ目の要素に「チョコ」が追加されます。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
cats.push("ブチ");

上のサンプルコードでは、catsという配列変数の、ニャンコ先生のあと（5番目）の要素として、「ブチ」が追加されます。
まったく同じpushメソッドを使っていますが、影響を及ぼす範囲は、そのメソッドを呼び出す前にドット経由で利用した変数のみというのが特徴です。

MDNのサイトの見方を簡単に教えて欲しいニャ

まず、調べる際には、どの型のどのメソッドを調べたいのかから、検索キーワードを作ってゆきましょう。Google先生で検索する場合は、「MDN Array push」（MDN 型名 メソッド名）、MDNのサイト内で直接検索するならば、「Array push」で検索してみます。
その上で、簡単にサイト内の見方について補足しますね。
①まずは概要を一読しつつ
②引数・戻り値の有無を確認し
③②がある場合はどのようなものかも確認し
④サンプルコードにも軽く目を通す
と良いかもしれません。
ただ、④のサンプルコードは難しい記述になっているものもありますので、「自分にとって難しい・・」と感じたら、サックリ見切りをつけて、わかりやすいサンプルコードを求めてネットを散策に行って良いと思います。
その際は、一度①〜③まで把握した後の散策になりますので、サンプルコードへの読解力向上も期待でき、よりスムーズに調べものが進められるでしょう。
このpushメソッドのページからは
①pushメソッドが配列の末尾に要素を追加するものであること
②引数はありで、戻り値もあり
③引数は配列の末尾に追加する要素で、カンマ区切りで複数書いてもOK、また、戻り値は追加したあとの要素数
ということがわかりますね。

// 参考として、今回のcatsは空っぽで宣言してるニャ
let cats = [];
// pushメソッドを使ってまとめて入れてるニャ
// 今回は例として、敢えて戻り値を変数に入れてるニャ
// 戻り値を使わないなら、最初のサンプルコードのように、変数に受け取る必要はないニャ
let catCount = cats.push("ミケ", "タマ", "トラ", "ニャンコ先生", "ブチ");
// 「現在のニャンコは5匹ニャ！」と出力されるニャ
// ES2015のテンプレート文字列での記載になっているニャ
console.log(`現在のニャンコは、${catCount}匹ニャ！`);

最後に

配列を含むビルトインオブジェクトについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

1. JavaScriptでプログラミングをする時は、JavaScriptの用意してくれているビルトインオブジェクトを活用してゆきたいニャ
   1. もうすでにJavaScriptが用意してくれているものを、自分で作っても劣化版しか作れないニャ
   2. 「車輪の再発明」はやめて、車輪のフル活用をしてゆくとよいニャ
2. 配列は複数のものを一つにまとめることができる便利なデータ型ニャ
   1. 配列の中に入っているものは要素とよばれて、それらが先頭から順番の小部屋に格納されているイメージニャ
3. ビルトインオブジェクトの便利な機能を活用する際にはリファレンスを参照するニャ
   1. どういう動きをして、どういう引数で、どういう戻り値があるのかを知って用いることで、より使いこなしてゆくことができるニャ

配列を用いることで一つの変数に複数の値を入れてまとめて持ち運びができることを学びました。それを含め、JavaScriptのビルトインオブジェクトという便利な機能を活用することで、できることの幅がぐっと広がってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
配列を含むビルトインオブジェクトへの理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。