javascript日記−２

こんにちは、TaKaです。
先日公開したjavascriptの基礎に続いて、文法をサラッと紹介します。

ただ、単に文法を紹介じゃなくて、作りたいものに合わせて文法を覚えていくのが性に合っていたので、それに合わせて綴っていきます。

動物をランダムで選びたい

今回は、動物をランダムで選びたいという機能を作ってみます。
ここで、鍵を握るのは、「ランダム」で選ぶということです。
ランダムで選ぶには１から作らなくてもランダムで数字を出してくれる機能がjavascriptにあります。これは１行だけ決められた文を書くだけで実行する準備をしてくれます。（何らかのボタンを押さないと実行できないのでボタンを押すイベントとこの文をつなぎ合わせないといけないので、準備としています。）

数字をランダムで選ぶ

その準備となるコードがこちらだけです。

Math.random()

これは、実行されると、０以上１未満の小数を出してくれます。ここで注意ですが、出るのは小数という点です。サイコロのように整数が出るわけではありませんのでご注意ください。なぜかというと「何番から何番までの数字」を出していいか指定していないからです。これは、あくまで出したい数字の程度を表す係数というイメージを持たれると良いかと思います。

次に、ランダムで出す数字の範囲ですが、ここでは、５種類の動物から１種類の動物の名前が出るようにしましょう。
そのためには、この係数に実際の整数の範囲をつなぎ合わせる必要があります。このつなぎ合わせたコードがこちらです。

Math.floor(Math.random()*(5-1)+1)

ちょっとコードが増えましたね。順に説明します。
まず、ランダムで「整数」を出したいという目的があります。そのためには、絶対に整数出なければなりません。そこで整数にする関数があります。それがMath.floor()です。このカッコの中に整数にしたい値や計算式を入れることで整数に切り下げてくれます（切り上げる時はMath.ceil()）。切り下げとは、すでに満たしている整数のことです。例えばカッコの中身が4.3だったらすでに「４」以上なので、確実に満たしているという意味で「４」となります。floorは床という意味なので直感的だと思います。切り上げの時は、満たしていないけど次の整数ということでceil(天井)を用います。
これで結果となる整数という「型」ができました。

次に、カッコの中身ですが、先ほど述べたようにMath.random()は係数です。なので、ここでは、出したい数の範囲を指定する必要があります。これは係数とともに程度とも述べました。つまりパーセンテージです。なので何点満点中という範囲を整数で表して、そこに程度をかけて何点満点のうち「何点」という形にします。例えば、０点スタートで１００点満点のテストがあったとき、マイナス何点はないですよね。なので、まず絶対に下回ってはいけない数字を程度とつなぎ合わせてはいけません。そこで、コードの後ろにあるように、程度が0になっても最低は1を満たすというように最低点を別に足してください。そしたら、Math.random()のかっこの中身に範囲として、１００点のうち７０％のできなら（１００－０）＊７０％というように、Math.random（最大値ー最小値）としてください。そして、Math.random（最大値ー最小値）＋最小値を切り下げて整数にするfloor関数でくくって下さい。
これで１～５までのランダムの整数値を出せる準備ができました。

動物の種類が入った箱を作る

さて、まだここでは動物の話が出てきていません。実行する式ができてもどこにその整数値をもっていくかが問題になりますよね。ここでは、その持っていく先となるデータを入れる箱を用意します。
この箱には、いろんな形式がありますが、今回は、連想配列というものを使っていきます。これは、ある数字や文字をその箱の中に指定すればその数字や文字に紐づけられた値を引っ張ることのできる辞書のようなものです。実際にpythonでは辞書型配列といいます。
これを用いて動物の配列を示したコードを示します。

var animal = {1: "dog", 2: "cat", 3: "elefant", 4: "ant", 5: "zeebra"};

まず、ここで、animalという連想配列を作ったのですが、その前に「var」というのがありますね。これは、変数宣言と言って何かしら使いたい言葉やそれを入れる箱のようなものを指定するときに使う目印になるものです。この宣言には、大きく２つあり、ここで宣言された値は「これ以上変わらないよ」というものと「まだ変わる可能性があるよ」というものに分けられます。つまり、前者はこれ以上、値をいじられたくないための箱のカギみたいなものです。これをブラウザに伝えるためには、「const」とします。これは、「constant(一定の)」という意味からきていると思われます。後者ですが、例えば急に値を変えたくなった時にこの変数（使いたい言葉やそれを入れる箱）をたくさん使った式があったらいちいち変えないといけないですよね。そんなときのために、一度は初期値としてこのanimalをこういう値にするけど、同じ変数を使って違う値に入れ替えたいときに同じ変数を使えるよということで「var」、「let」を使います。varは「variable(変えられる)」でletは「let(置く)」というように、この後は自由に変えられたりするのでとりあえずその値を入れておく。という意味に使われると思われます。

ランダムで選んだ数字と動物の種類を紐づける

次に、animalの中身ですが、{「指定したい数字や文字」:「それに紐づけたい値」,「指定したい数字や文字」:「それに紐づけたい値」,「指定したい数字や文字」:「それに紐づけたい値」・・・}というように、{}で囲んで、ペアとしてコンマ区切りで記述します。そして、；で締めくくります。ここでは、「指定したい数字や文字」＝「ランダムで出した１～５までの整数」、「それに紐づけたい値」＝「整数に紐づけて出したい動物の種類」となります。そして、これを紐づける処理が次のコードになります。

animal[Math.floor(Math.random()*(5-1)+1)]

このように、変数[紐づける数字や文字]とすることで、対応した動物の種類が出てきます。この[]をインデックスといいます。

ポップアップとして結果を出す。（全コード表示）

これをまとめたコードがこちらになります。

var animal = {1: "dog", 2: "cat", 3: "elefant", 4: "ant", 5: "zeebra"};
alert(animal[Math.floor(Math.random()*(5-1)+1)]);

このように、まず、入れたい箱を定義して、２行目にその箱に紐づけたいものをインデックスとして最初の式を一気に入れて、alertでかこみ、htmlのボタンなどに紐づけるイベント処理を行うことでそのイベント（ボタンが押されるなど）が起きた時にポップアップとして、最初の式の答えが１ならanimalの１に対応した「dog」と示されます。
ぜひ、試してみてください。
これ以上書くと冗長になるので、イベント処理は別記事でご紹介します。
以下に、出典を書きます。
JavaScript basics - Learn web development | MDN (mozilla.org)

以上、ご一読ありがとうございました。