ひのすけ帳・其之一【Javascriptでビンゴシートを作ろう(ドットインストール)編#①】

こんにちは。プログラミング初学者のひのすけ(@fire_n_sk)です。

今回はドットインストールの教材「JavaScriptでビンゴシートを作ろう」について自分なりの理解の深まったやり方をまとめた文章を公開できればと思います。今回の内容は主に、『 #03 B列の配列を作ろう　と　 #04 配列を確認してみよう』のチャプターで出てくるsplice()というメソッドについての内容です。

※Javascriptの内容をメインとしていますので#01と#02については飛ばしています。

#03 　B列の配列を作ろう

spliceに関してはまずこちらをご覧ください。

Array.prototype.splice() - JavaScript | MDN

このMDNの記事の冒頭部分の説明に、「既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更する」とあります。読み進めていくと下の方にいくつか例文のコードが記載されています。今回のレッスンで使用されているものに近い例文がありました。

let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)

// removed は ["mandarin"]
// myFish は ["angel", "clown", "drum", "sturgeon"]

注目すべきがこのmyFish.splice(3, 1)の部分です。先頭の数字(3)が配列のインデックス番号(配列の何番目の要素であるかを識別する番号)になります。ここでいうとmyFishという配列の先頭から4番目の値(mandarin)ですね。そして次の数字の(1)は排除する要素数 1 の配列という意味です。

これはとてつもなく重要なので太字にしています。(後述します)

そしてこの例文を実際にエディターに貼り付けてmyFish.splice(3, 1)の部分の数字を様々な値に変更して動作をconsole.logで確認してみます。より理解が深まりました。その上で本題です。今回のレッスンの文章を見てみます。

const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const b = [];
 b[0] = source.splice(Math.floor(Math.random() * source.length), 1);
 b[1] = source.splice(Math.floor(Math.random() * source.length), 1);
 b[2] = source.splice(Math.floor(Math.random() * source.length), 1);
 b[3] = source.splice(Math.floor(Math.random() * source.length), 1);
 b[4] = source.splice(Math.floor(Math.random() * source.length), 1);

Math.floor(Math.random() * source.length)の部分はsourceという配列の中からランダムに要素のいずれか(1~15)を取得している。ということは1~15のいずれかの数字に置き換わります。そこで、

// b[0] = source.splice(1~15の数字, 1);

このようにコードをコメントアウトして記載するとよりイメージしやすくなりました。これで解決かというと残念ながらそうではありませんでした。なぜならば、

「なぜ実行結果が配列の配列になるのか？」

という疑問にぶつかり、すぐには理解できませんでした。学習を始めた頃の自分にとってはここが少し厄介でした。

#04 　配列を確認してみよう

以下はこのチャプターで出てくるコードです。

b[0] = source.splice(Math.floor(Math.random() * source.length), 1)[0];

なんとなく進めていると「えっ…最後尾の[0]ってなんなん…」ってなりました…。ここでもう一度MDNの説明をよく見返してみると、

【返値】

「取り除かれた要素を含む配列です。要素が 1 つのみ削除された場合は、要素数 1 の配列が返されます。要素が削除されなかった場合、空の配列が返されます。」

このように記載されていました。つまり一体どういうことか。

最終的に納得できたやり方(日本語文章にしてみました)

今一度、原点に返って、

b[0] = source.splice(Math.floor(Math.random() * source.length), 1)[0];

のコードを日本語の文章にしてみました。まずは左辺。『b[0]』の部分は、

【const b = [];で宣言した「b」という名前がついた空の配列のインデックス番号0番目(先頭の要素)の値】

です。このままだと何も値が無い状態です。この左辺に右辺を代入します。続いて右辺『source.splice(Math.floor(Math.random() * source.length), 1)[0];』の処理も日本語の文章にしてみます。(追記・少し長めの文章なので3つに分割しました+後から読んでやや分かりづらいと思った箇所に補足を加えました。)

①：配列sourceの15個の要素の中から1つランダムな要素(インデックス番号)を選択。

②：①で選択した要素(1つ)を排除しその排除した要素で要素数 1 の配列を作成。

③：②で作成された配列のインデックス番号0番目(先頭の要素)の値を結果として出力。

これを左辺に代入する形です。最後尾に[0]が無い場合は上記の②までしか処理が実行されません。つまり、配列の状態のままになってしまっているのです。

これで自分はようやく納得しました。

その後はこの処理を5回続け、「b」という名前がついた空の配列に数字を5つ格納するというのが今回のレッスンのコードになります。

最後に、敢えてランダムじゃない数字に置き換え、可視化してみます。

const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
 const b = [];
 b[0] = source.splice(0, 1)[0];
 b[1] = source.splice(0, 1)[0];
 b[2] = source.splice(0, 1)[0];
 b[3] = source.splice(0, 1)[0];
 b[4] = source.splice(0, 1)[0];
 console.log(b);

配列sourceの中の先頭の要素を全て指定していますが、一度使った要素が排除されていくので上記のコードの実行結果は[1,2,3,4,5]になります。

これが実際のコードは1~15のランダムな数字になるということでした。

今回は以上になります。

次回は「#06　関数で処理をまとめてみよう」から出てくる『関数』についてのnoteを作成しようと思っています。(※　最初は全てのチャプターを1つの記事にしようとしていましたが、とてつもなく膨大な量になってしまうことが途中で判明したため、3回〜4回に分けて投稿する予定です。)

それではまた次回。最後までご覧いただき、ありがとうございました。