2018年8月30日シェアツイートシェアブックマークプログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの配列と基礎的なビルトインオブジェクトの学習ポイントについて紹介します。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、配列を含むビルトインオブジェクトについて理解を深めてゆきましょう。配列って何ニャ?配列はJavaScriptのビルトインオブジェクトの1つになります。「ビルトインオブジェクト」の説明はこのあとに譲るとして、ここでは、今まで学んだことの比較から、配列(Array)について補足します。今まで変数の箱のなかに入っているものは、1つの値でした。777;それに対して、配列は1つの変数の中に複数の値をまとめて入れることが可能になっています。配列の変数の場合、変数の箱の中身は、先頭から順番に小部屋が用意されて、その小部屋に上であげたような個々の変数の中身が入っているイメージです。[];変数宣言及び代入演算子までの記載は、以前から用いていた変数宣言時と同じですね。違いは代入演算子の右辺で、角カッコが記載されているのが特徴です。ここから([)ここまで(])を1つにまとめるように角カッコは用いられており、角カッコで包んだものを代入することで、その代入された変数は配列型の変数になります。空っぽの配列を宣言したい場合は、角カッコ([])だけ記載します。複数のものを小部屋に入れたい場合は、カンマ区切りで設定します。配列の小部屋に入っているものそれぞれを「要素」と呼びます。上記のサンプルコードだと、catsは要素数が4個、somethingは要素数が0個になっていますね。ビルトインオブジェクトって何ニャ?今までの記事でも、それに類するものは取り上げていました。その際にはJavaScriptの便利機能という表現をしていましたが、これらはJavaScriptにそのまま含められている(ビルトイン)便利な機能群になります。JavaScriptのキッチンで料理をし始めた時、戸棚を開いたら、フードプロセッサーやミキサー等、便利な器具が自由に使える状態になっているようなものです。これらを活用せずにコードを書くのは、原始時代の生活に匹敵するような不便さを噛みしめることになると思います。不便な状況の中で、「ひぃひぃ」言いながら作った機能が、もともとJavaScriptに含められていた場合、それは「車輪の再発明」という慣用句を用いつつ否定的に捉えられる傾向があります。その慣用句の通り、もともと存在している車輪を知らず、自分でゼロから作った車輪は、元の車輪に比べれば圧倒的にポンコツで使い勝手が悪いものになることは想像に難くありません。ある車輪を用いるときには、その車輪の使い方を学習する必要があります。その労力は、ゼロから車輪を作る労力に比べればずっと軽いものになるでしょう。その浮いたぶんの労力を、自分が作るシステム本来の価値に注力したほうが、ずっと有益ですね。ビルトインオブジェクトを使う時は「エイヤ!」で使いはじめて良いかニャ?上記でも言及しましたが、JavaScriptのビルトインオブジェクトを用いるときには、まず、「どのように使うのか」を把握することが肝になります。現実世界では、はじめて使うものも、説明書を読まずに「エイヤ!」で使い始めてもそれとなく使える場合はあるかもしれませんが、こと、プログラミングにおいては、もともと備え付けられている機能がどういう用途に用いることができ、どういうルールで動くのかを把握せずに使うと、思わぬ落とし穴にハマってしまう危険性が高まります。同時に、これらを把握することで便利な機能を余すことなく使い倒すことが可能にもなります。「どのように使うのか」を把握する際には、リファレンスを参照することがとても重要になります。ブラウザのFirefoxを作っているMozillaが提供してくれているMDNというサイトは、そのリファレンスとしてとてもおすすめです。使う機能で、ネットで調べてそれっぽいサンプルコードを見つけたから、そのまま自分のコードに追加しようとするのではなく、そこで一歩止まって、MDNのサイトでどういう動きになるのかをチェックすると、サンプルコードのどこをどう変えればよいのかや、また、サンプルコードでは冗長になっていた記載を自分の処理ように最適な書き方に変えるなどのアクションを取れるようになると思います。配列の便利な機能にはどういうのがあるニャ配列型で作った変数経由で用いられる便利な機能は沢山あり、この先の記事でも段階を追ってその一部を取り上げてゆきますが、今回は「末尾に要素を追加する」という便利な機能をピックアップしましょう。先程の例で空っぽの配列を宣言したコードを記載しました。これに対して値を追加してゆくときに用いることができるのが、配列型の持っている「push()メソッド」です。メソッドは関数によく似ていて、これらを混ぜて表現するシーンもたまに見かけますが、厳密に言うと、メソッドはオブジェクトに対する操作を行う関数を指します。メソッドを用いるときには、変数経由で実行するのが特徴です。それ以外は、引数・戻り値など、関数のときに学んだ知識をそのまま用いることが可能です。具体例を見てみましょう。[];something.push("チョコ");上のサンプルコードでsomethingという配列変数の1つ目の要素に「チョコ」が追加されます。"ニャンコ先生"];cats.push("ブチ");上のサンプルコードでは、catsという配列変数の、ニャンコ先生のあと(5番目)の要素として、「ブチ」が追加されます。同じpushメソッドを使っていますが、影響を及ぼす範囲は、そのメソッドを呼び出す前にドット経由で利用した変数のみというのが特徴です。MDNのサイトの見方を簡単に教えて欲しいニャまず、調べる際には、どの型のどのメソッドを調べたいのかから、検索キーワードを作ってゆきましょう。push」で検索してみます。その上で、簡単にサイト内の見方について補足しますね。1まずは概要を一読しつつ2引数・戻り値の有無を確認し32がある場合はどのようなものかも確認し4サンプルコードにも軽く目を通すと良いかもしれません。4のサンプルコードは難しい記述になっているものもありますので、「自分にとって難しい・・」と感じたら、サックリ見切りをつけて、わかりやすいサンプルコードを求めてネットを散策に行って良いと思います。その際は、一度1〜3まで把握した後の散策になりますので、サンプルコードへの読解力向上も期待でき、よりスムーズに調べものが進められるでしょう。このpushメソッドのページからは1pushメソッドが配列の末尾に要素を追加するものであること2引数はありで、戻り値もあり3引数は配列の末尾に追加する要素で、カンマ区切りで複数書いてもOK、また、戻り値は追加したあとの要素数ということがわかりますね。ES2015のテンプレート文字列での記載になっているニャconsole.log(`現在のニャンコは、${catCount}匹ニャ!`);CodeCamp提供のWebマスターコース当メディアを運営しているCodeCampではWebマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にWebサービスをを開発するのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\Webサイト担当者としてのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!最後に配列を含むビルトインオブジェクトについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。JavaScriptでプログラミングをする時は、JavaScriptの用意してくれているビルトインオブジェクトを活用してゆきたいニャもうすでにJavaScriptが用意してくれているものを、自分で作っても劣化版しか作れないニャ「車輪の再発明」はやめて、車輪のフル活用をしてゆくとよいニャ配列は複数のものを一つにまとめることができる便利なデータ型ニャ配列の中に入っているものは要素とよばれて、それらが先頭から順番の小部屋に格納されているイメージニャビルトインオブジェクトの便利な機能を活用する際にはリファレンスを参照するニャどういう動きをして、どういう引数で、どういう戻り値があるのかを知って用いることで、より使いこなしてゆくことができるニャ配列を用いることで一つの変数に複数の値を入れてまとめて持ち運びができることを学びました。それを含め、JavaScriptのビルトインオブジェクトという便利な機能を活用することで、できることの幅がぐっと広がってゆくと思います。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。配列を含むビルトインオブジェクトへの理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。家事も仕事もプログラミングも。2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。