【レッスン#7】 「配列の使い方」を学ぶプログラミング

プログラミング教材#7では「配列」を使って同じ名前の変数でたくさんの種類の値を管理する方法を学びます。

プログラミング教材#7の概要

プログラミング教材#7のサンプルコード①

See the Pen 教材#7-1 by programmingbird (@programmingbird) on CodePen.

☆★△▲をランダムに200個表示する

サンプルコード①はボタンを押すと4種類のマーク☆★△▲がランダムに200個表示されるコードです。前回学習したプログラミング教材#6 「条件分岐」を利用すればできなくはなさそうですが4種類の条件分岐はなかなか面倒に思えます。こんなときJavaScriptをはじめとして多くのプログラミング言語には「配列」という便利なツールが用意されています。サンプルコード①で具体例を見てみましょう。

プログラミング教材#7 サンプルコード①の解説

「配列」の基本的な使い方

配列は変数の一種です。4種類のマーク☆★△▲を変数に入れるときに、普通の変数を使うと例えばそれぞれをmark1,mark2,mark3,mark4など別の名前の変数に入れることになります。ところがこのやり方だとfor文で繰り返し処理をしたり、乱数を使ってランダムに選んだりということができません。

配列は同じ名前の一つの変数でありながら、添字(インデックス)と呼ばれる番号を指定することで複数の値を同時に持っておくことができる変数です。たくさんの引き出しがついているタンスをイメージするとよいでしょう。

JavaScript // 配列の設定

冒頭のvar marks = ["☆", "★", "△", "▲"];で配列の初期設定をしています。marksという配列(先ほどのたとえ話でいうタンス)を準備し、その要素(引き出し)に順番に☆、★、△、▲という文字を入れています。

これを取り出すときは、marks[○]という感じで大カッコの中にインデックス(引き出し番号ですね)を書けばよいのです。インデックスは必ず0から始まることを覚えておいてください。つまりmarks[0]は☆であり、marks[3]は▲です。

JavaScript // 「アクション」の設定

for文を使った200回の繰り返し処理の中身の部分に注目しましょう。まずvar n = Math.floor(Math.random() * marks.length);の部分。プログラミング教材#4 乱数を利用するで学習したようにMath.floor()はカッコ内の数の小数点以下切り捨て、Math.random()は0〜1未満の乱数の生成、でしたね。marks.lengthのみ新出で、これは配列(この場合marks)の要素の個数を返してくれる書き方です。サンプルコード①では4となります。この行全体で「変数nに0〜4未満(0,1,2,3)のランダムな整数を入れる」という意味になるわけです。

今回のケースでは要素の個数ははじめから4つとわかっているので、marks.lengthのかわりに4と書いてしまってもよいのですが、marks.lengthを使っておくともし要素が増えたり減ったりしたときにも同じコードが使えるのでおすすめです。

次にstr += marks[n];の部分。先ほど用意した変数nを配列marksのインデックスとして使うことで、4つの要素のうちどれかをstrに追加しています。これを200回繰り返し、最終的にできあがったstrを表示しているのですね。

動的に要素を追加するサンプル

プログラミング教材#7のサンプルコード②

See the Pen 教材#7-2 by programmingbird (@programmingbird) on CodePen.

「数字を1つ追加」ボタンを押すと配列に要素が追加される

まず「ボタン」を押すとサンプルコード①と全く同じ結果になります。次に「数字を1つ追加」ボタンを押してみます。何も起きません。その後もう一度左の「ボタン」を押してみてください。先ほどまでの4種類のマーク以外に何か一つ数字が混じりましたね?配列に新しい要素(数字)が追加されたのです。

「動的」に要素を追加するとは?

サンプルコード①ではコード内で配列の要素をセットして、その後は変えようがありませんでした。それに対してサンプルコード②ではユーザーが「数字を1つ追加」ボタンを押すたびに要素が追加されていきます。このようにコードの実行後にユーザーの操作等によって内容を変化させることを「動的(Dynamic)」と呼ぶことがあります。※対義語は「静的(Static)」です。

どのように配列に要素を追加しているのかをサンプルコード②で確認します。

プログラミング教材#7 サンプルコード②の解説

JavaScript // 「アクション」の設定

ボタンが1つ増えているので、HTMLやJavaScriptの//JSとHTMLの紐付け、//「トリガー」の設定にもコードが増えていますが、いつものパターンですので解説を省略します。

また「アクション」には2つのボタン(トリガー)それぞれに対応する2つの関数がありますがtest()の方はサンプルコード①と全く同じです。注目は当然addNumber()の方です。その中身を見てみましょう。

marks.push(Math.floor(Math.random()*10));です。まずカッコの中のMath.floor(Math.random()*10)はもうおなじみの「0〜10未満(0,1,2…,9)のランダムな整数」を作るコードですね。pushが新出ポイントです。

○.push(△)
○という配列に△という要素を追加する ※末尾に追加

これにより「数字を1つ追加」ボタンが押されるたびに配列marksに新しい要素として0,1,2…,9のどれかの整数がセットされることになり、その後「ボタン」が押されると最初からあった4つの要素にこの新しい要素を加えた中から、ランダムにどれかが表示されるようになりました。