2018年8月30日シェアツイートシェアブックマークプログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの配列の中身を活用する際の学習ポイントについて紹介します。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、配列の中身の利用について理解を深めてゆきましょう。複数のものをまとめている配列、中身を取り出すときにはどうすれば良いニャ?前回の記事で、ビルトインオブジェクトについて補足しつつ、そのうちの一つである配列の宣言部分までを取り上げました。配列の変数は、実体は1つでも、中身に複数の値を持つことができるという内容でしたが、その中身の個々の値を取り出す際にも、それ専用の書き方があります。1番目なのに、「0」って書いているニャ?console.log(cats[0]);配列宣言時も用いた角カッコ、値を取り出す際にも利用します。配列の中の要素は、先頭から順番に0番目、1番目という小部屋に入っているので、取り出す際の角カッコ内には、それをもとに何番目の要素を取得したいかによって、数値を変えてゆきます。開始が1からで無い点に、猫弟子は疑問をもっているようですが、プログラミングではゼロを最初にしてゼロから始まることが往々にしてあります。「ゼロオリジン」という言い方があるくらいです。中身を全部取り出すにはどうかけば良いニャ?先程のcatsという変数の中身を全て出力するとなった場合、どのように書けるでしょう。・・・なんだか、師匠の視線が冷たいニャ。この書き方はまずそうな気がするニャ!師匠からの氷の視線で「まずい」と気づくことができた猫弟子でしたが、実際このコードは動きはしますが、好ましくはありません。プログラミングを書いているときには、往々にしてそういうシーンに出くわします。「動けばいい」で書いたコードは、確かに動きはしますが、変更がしづらくなり、メンテナンス性が下がります。他の人が書いたコードを見た時に、読みにくくなってしまったり、迷惑をかけてしまう場合もあります。学習において最初は動けばいいからスタートしたとしても、そこから徐々に、「よりよく書くには」を意識してゆくと、プログラミング力はさらに伸びてゆくと思います。サンプルコードのまずいポイントを教えてニャさて、上記のコード、配列の中身全てに対して処理を行っている書き方で、せっかく配列として一つにまとめているのに、全て手書きで列挙している点がまずいポイントですね。複数のものをまとめて管理している配列では、複数のものの個数が状況によって変わる場合がありますから、上のコードだと、変わった場合出力する部分も書き換えないといけません。現在は個数がせいぜい4個なので間違えにくく、且つ、間違えていても比較的気づきやすいかもしれませんが、ミスはつきものなので、連番の数字を書き換えてしまう可能性もゼロではありませんよね。間違えていた場合は見つけるのはとても骨を折ります。茨の道になりそうですね。配列の中身全てに処理をしたい場合はどう書くニャ以前の記事で繰り返しの処理について取り上げましたが、繰り返し処理は配列と相性がとても良い構文になります。配列の中身は複数のものがありますが、その複数のもの、最初から最後まで「繰り返し」処理を行えばシンプルに書けそうというのはイメージが湧くのでは無いでしょうか。具体的なコードから見てゆきましょう。console.log(cats[i]);}for文の条件式の中で、配列の変数にドット経由で「length」というものを用いていますね。このlengthは配列の変数の便利機能として用いる時に、配列の中身の要素数を取得することができます。上記のサンプルコードだと、変数の中には4匹の猫がいるので、cats.lengthは「4」という数字が取得できます。中身を数える場合は、数えるという特性上、開始は1からになります。配列の要素にアクセスする際の0と混ざらないように注意しましょう。cats.length」は「iが4未満の場合」となり、結果、iの値は猫弟子が書いたように、「0~3」まで姿を変え、配列の中の各要素を順に出力することができています。配列の中身をただ順番に処理したい場合はどう書くニャ最初のサンプルコードでは、for文を用いたベーシックな配列の中身全てへの処理を記載しました。このfor文だと、iという変数が宣言されていますが、このiは、ただ配列の中身を取り出すのにもちいられ、i自体(何番目)という情報は利用されていません。以下のような書き方をする場合は、iも利用されていると言えます。1}番、${cats[i]}ニャ!よろしくニャ~`);}上記のように何番目自体も処理で用いる場合は、for文の何番目かの情報も必要ですが、最初のサンプルコードのように、順番の情報は個別には使わず、ただ、配列の中身を繰り返し処理したいという場合には、「for-of」という構文がES2015より利用可能になっています。具体例を見てみましょう。console.log(cat);}少し横道にそれますが、ES2015以前も「for-of」とは別に、よく似た「for-in」という構文がありました。この書き方は、本来、オブジェクトの中身を列挙するのに用いるもので、配列の中身の処理に用いてしまうと、予期せぬ挙動をしてしまう可能性があるため、配列での利用は非推奨となっている構文でした。(このあたりは、オブジェクトに関連してfor-inを取り上げる際に補足します。)また、せっかくですので、配列自体の便利機能としてforEachメソッドを取り上げます。意味合いとしては「for-of」と似ていて、配列の中身を順番に処理してゆくことができるメソッドとなります。以前の記事で取り上げたコールバック関数を引数にして用います。console.log(cat);});上記の記事で、「配列の説明で用いる予定です」と補足したコールバック関数、この例でも、無名関数を使うメリットを体感していただけると思います。配列の中身をただ順番に処理したいだけなので、そのために関数を別途宣言するのは冗長ですよね。無名関数とすることで配列の中の要素に、catという名前をつけて、各要素ごとにどういう処理をしているのかも一目瞭然になりますね。意味合いは、for-ofと全く同じですので、ES2015を用いない場合はこちらの記載で書くのもありでしょう。興味がある方は、是非、MDNのforEachのページを確認してみると、良い勉強になるでしょう。言いますのは、実は、forEachの書き方でも「(for文のiのような)何番目」という情報も扱うことができるのです。新しい機能を用いるときのリファレンスの重要性がここでも輝きますね。配列の中身全てに処理をする際に、ベーシックなfor文の記載でも問題ありません。「for-of」や「forEach」での書き方がわかりにくい場合はfor文で配列を展開する書き方を、まずはしっかり抑えてゆくことにしましょう。CodeCamp提供のWebマスターコース当メディアを運営しているCodeCampではWebマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にWebサービスをを開発するのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\Webサイト担当者としてのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!最後に配列の中身の利用について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。配列の中身を何番目指定で取り出す場合には、角カッコを用いるニャその際の何番目は、ゼロからスタートした数字を指定できるニャ配列と繰り返し処理は相性バツグンニャfor文の条件式で、配列のlengthを用いることで、「中の要素全てに対する処理」という抽象的な記載が可能になるニャ抽象的に書いておくことで、修正する際の修正箇所がぐっと減るニャ繰り返し処理の中の順番は特に利用せず、ただ中身を繰り返したい場合の書き方もあるニャES2015から利用可能になった「for-of」、また、配列の便利機能として利用できるforEachメソッドがあるニャどちらも、配列の中身をダイレクトに変数として順番に受けながら処理を記載することができるニャ配列から中身を取り出す時に、繰り返し処理を併用することで複数の値をまとめて処理できることを学びました。複数のものを一つにまとめ、それを共通的に処理することによって、できることの幅がぐっと広がってゆくと思います。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。配列への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。家事も仕事もプログラミングも。2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。