【第12回】 【micro:bit講座 第12回】配列とループの最強コンボ(「リストの要素数だけ繰り返す」)

MakeCode × micro:bit編

これまでのレッスンで、「配列」と「ループ」の組み合わせを学びましたが、実はもっとスマートで強力な方法があります。

それが、リストに入っているデータの数(要素数)に合わせて自動で回数を決めてくれる最強の組み合わせテクニックです!

データが増えてもプログラムを直す必要がない、プログラミングならではの便利な仕組みを最終回で一緒にマスターしていきましょう!

前回の宿題:答え合わせ

宿題ミッション:

次のような2つの配列(リスト)と、探したいアイテムを入れる変数を用意して、自動チェックプログラムを完成させてください。

  • おもちゃの名前(文字列の配列)["けん玉", "こま", "カード", "ヨーヨー", "ビー玉"]
  • ぽいんと(数値の配列)[10, 30, 50, 80, 100] (※ポイントは好きな数字でOK!)
  • ほしいおもちゃ(変数)"ビー玉" (※あとから手動で変更できるようにします)

Aボタンを押したときに、宝箱の配列を0番目から順番に自動でチェックします。

変数「ほしいおもちゃ」に入っている名前(今回は「ビー玉」)と一致したときだけ、対応する「ぽいんと」を画面に表示させてください!

宿題ミッション、上手にプログラミングできたかな?

今回の答えとなるプログラムのブロック構成は、次のようになります!

micro:bitのMakeCode画面:最初だけブロックでおもちゃの名前とポイントの配列、ほしいおもちゃの変数を定義し、ボタンAが押されたときにループと条件分岐を使って一致するおもちゃのポイントを自動で表示するプログラムの構成
図1:前回の宿題の答え合わせ(配列、ループ、条件分岐を組み合わせておもちゃのポイントを自動で探すプログラム)

【ブロックの組み立て方】

  1. 「最初だけ」ブロックで配列と変数を準備する
    • 「変数」カテゴリから「変数 [おもちゃの名前] を [配列] にする」を置き、配列の中に "けん玉", "こま", "カード", "ヨーヨー", "ビー玉" を設定します。
    • 同じように「変数 [ぽいんと] を [配列] にする」を置き、中に 10, 30, 50, 80, 100 を設定します。
    • 変数「ほしいおもちゃ」を作り、文字を "ビー玉" に設定します(※ここを手動で書き換えることで、探すおもちゃを自由に変更できます!)。
  2. ボタンが押されたときのトリガーを用意する
    • 「入力」カテゴリから「ボタン A が押されたとき」を配置します。
  3. カウンターを使った繰り返しで宝箱を順番にチェックする
    • 「ループ」カテゴリから「変数 [カウンター] を [0] から [4] に変えてくりかえす」のブロックをボタンAの中に入れます。
  4. 「もし〜なら」でほしいおもちゃを探す条件分岐を入れる
    • 「論理」カテゴリから「もし [true] なら」のブロックをループの中に入れます。
    • 条件の「true」の部分に、比較ブロック([ ] = [ ])をはめ込みます。
    • 左側に「配列」カテゴリの「[おもちゃの名前] の [カウンター] 番目の値」をセットし、右側に変数「[ほしいおもちゃ]」を置きます。
  5. 見つかったときの処理を入れる
    • 「もし」の中身(条件に一致したとき)に、「基本」カテゴリから「数を表示」を置き、「[ぽいんと] の [カウンター] 番目の値」をセットします。

【プログラムの動きを確認してみよう】

  • micro:bitのAボタンを押すと、プログラムが自動で「おもちゃの名前」の配列を0番目から順にチェックしていきます。
  • 「ほしいおもちゃ」変数に入っている名前(現在は "ビー玉")と一致した瞬間、対応する「ポイント」の配列から正しい数値(「100」)を取り出して画面にピュッと表示してくれます!
  • 変数の文字を "こま""けん玉" に書き換えてAボタンを押すと、それぞれのポイントがちゃんと表示されるか試してみましょう!

ゲーム風にアレンジ

宿題では、毎回プログラムの「ほしいおもちゃ」変数を手動で書き換える必要がありました。

しかし今回は、変数を使わずに、流れるおもちゃの中からボタンを押してタイミングよく選び取る「ゲーム風アレンジ」に挑戦してみましょう!

micro:bitのMakeCode画面:「最初だけ」ブロックで英単語のおもちゃリストとポイントリストを定義。「ずっと」ループ内でカウンターと文字列処理を使い、リストのおもちゃ名を1文字ずつ流しながらリアルタイム表示。Aボタンを押した瞬間のインデックスを確定させ、対応するポイントと「You selected [おもちゃ名] = [ポイント] point」というメッセージをLED画面にスクロール表示するゲーム風プログラム。
図2:固定の変数を使わず、ループ表示されるおもちゃの中からAボタンで選択(決定)するゲーム風アレンジプログラム。ボタンを押したタイミングのデータを使ってポイントとメッセージを動的に生成する。

ご提示いただいた図2のゲーム風アレンジプログラムに対する【ブロックの組み立て方】と【プログラムの動きを確認してみよう】の解説を作成しました!

【ブロックの組み立て方】

  1. 「最初だけ」ブロックで配列を準備する
    • 変数「おもちゃの名前」に英字の文字列配列 ["kendama", "koma", "ka-do", "yo-yo-", "bi-dama"] を入れます。
    • 変数「ぽいんと」に数値の配列 [10, 30, 50, 80, 100] を入れます。
  2. 「ずっと」ブロックで自動ループと選択の仕組みを作る
    • 変数「どこでAボタンを押した」を 0 に初期化します。
    • カウンターを使った繰り返し(0から4まで)で、おもちゃの名前を順に指定します。
    • さらにその中で、文字の長さを使ったネスト(二重)ループを組み、文字列を1文字ずつ画面に流して表示させます。
  3. 「もし〜なら」でボタンが押された瞬間をキャッチする
    • ループの中で「もし [ボタン A] が押されている なら」という条件分岐を入れます。
    • 押された瞬間に、そのときのカウンター位置を「どこでAボタンを押した」の変数に記憶させます。
  4. 選ばれたおもちゃの結果を組み立てて表示する
    • 「数を作成」や「文字列をつなげる」ブロックを組み合わせて、"You selected [おもちゃの名前] - [ポイント] point" というメッセージを一つの変数「結果」にまとめます。
    • その「結果」の文字列を画面にスクロール表示させ、ループを強制的に抜けるための処理(カウンターなどに大きな数を入れる設定)を行ってから最初に戻します。

<図2のプログラム>

MakeCodeの画面上部にある「JavaScript」タブに切り替えて、以下のコードを貼り付けてみてください。

let 結果 = ""
let ボタンが押された時のおもちゃの名前 = 0
let なまえのながさ = 0
let どこでAボタンを押した = 0
let おもちゃの名前 = [
"kendama",
"koma   ",
"ka-do  ",
"yo-yo- ",
"bi-dama"
]
let ぽいんと = [
10,
30,
50,
80,
100
]
/**
 * Aボタンを押した時の「おもちゃの名前」の番号
 */
/**
 * おもちゃを順番に表示
 */
/**
 * おもちゃの名前を1文字ずつ表示
 */
/**
 * Aボタンが押されている
 */
/**
 * ポイントを表示
 */
/**
 * 2つのループを抜けて、ずっとの最初からくりかえす
 */
basic.forever(function () {
    どこでAボタンを押した = 0
    for (let カウンター = 0; カウンター <= 4; カウンター++) {
        なまえのながさ = おもちゃの名前[カウンター].length
        for (let なまえ = 0; なまえ <= なまえのながさ; なまえ++) {
            basic.showString(おもちゃの名前[カウンター].charAt(なまえ))
            if (input.buttonIsPressed(Button.A)) {
                ボタンが押された時のおもちゃの名前 = どこでAボタンを押した
                basic.showNumber(ぽいんと[ボタンが押された時のおもちゃの名前])
                結果 = "You selected " + おもちゃの名前[ボタンが押された時のおもちゃの名前]
                結果 = "" + 結果 + " = "
                結果 = "" + 結果 + convertToText(ぽいんと[ボタンが押された時のおもちゃの名前])
                結果 = "" + 結果 + "point"
                basic.showString(結果)
                なまえ = 100
                カウンター = 100
            }
            basic.pause(1000)
        }
        どこでAボタンを押した = どこでAボタンを押した + 1
    }
})

【プログラムの動きを確認してみよう】

  • プログラムを起動すると、micro:bitの画面にさまざまな「おもちゃの名前」が次々と流れて表示されます。
  • 自分の欲しいタイミング(お気に入りのおもちゃが表示された瞬間)で Aボタンを押す と、その場でゲームがピタッと止まります!
  • ボタンを押した瞬間に選ばれていたおもちゃの名前と、対応するポイントが "You selected kendama = 10 point" のような形式で画面に流れて教えてくれます。
  • 手動で変数を書き換えなくても、ボタンを押すタイミングで結果が変わる、まさにミニゲームのようなワクワクするプログラムの完成です!

今日のミッション:リストの要素数に合わせて自動で繰り返す

これまでのプログラムでは、ループの回数を「0から4まで」のように自分で数えて数字を指定していました。しかし、宝箱(配列)に新しいアイテムを追加したり減らしたりするたびに、ループの回数の数字を毎回直すのは大変だしミスのもとになりますよね。

そこで使うのが、「リストの長さ(要素数)」を自動で測ってくれるブロックです!

どんなときに使うの?

  • 配列のデータが何個あるか分からないとき、または後からデータが増えるかもしれないとき
  • 手動で数字を書き換える手間をなくし、どんなデータにも対応できるスマートなプログラムを作りたいとき

ここがポイント! リストの要素数を使うと、「リストの数だけ、最後まで自動でぜんぶ調べる」というロボットのような正確なプログラムが作れるようになります。

問題1:お宝リストが何個あっても自動でぜんぶチェックするプログラムを作ろう!

宝箱(配列)に入っているおもちゃの数が変わっても、自動で最後の最後までミスなくポイントを探し出してくれるプログラムにパワーアップさせてみましょう!

micro:bitのMakeCode画面:「最初だけ」ブロックにおもちゃの名前とポイントの配列を追加し、「配列の長さ」を変数「おもちゃのかず」に格納。「ボタンAが押されたとき」のループ内で、0から「おもちゃのかず - 1」回繰り返すことで、データが追加されても自動で最後までおもちゃを検索してポイントを表示するプログラム。
図3:配列の長さ(要素数)を利用し、データが増えても自動で繰り返しの回数を調整してくれる最強のループコンボプログラム

【ブロックの組み立て方】

1.「最初だけ」ブロックで配列と変数を準備する

  • 変数「おもちゃの名前」に文字列の配列 ["けん玉", "こま", "カード", "ヨーヨー", "ビー玉", "お手玉"] を入れます(新しいおもちゃが1つ追加されています)。
  • 変数「ぽいんと」に数値の配列 [10, 30, 50, 80, 100, 10000] を入れます。
  • 変数「ほしいおもちゃ」を作り、文字を "ビー玉" に設定します。
  • 「変数」カテゴリから「変数 [おもちゃのかず] を [配列の長さ [おもちゃの名前]] にする」を置き、リストの長さを自動で測って変数に記憶させます。

2.ボタンが押されたときのトリガーを用意する

  • 「入力」カテゴリから「ボタン A が押されたとき」を配置します。

3.「配列の長さ」を使った自動の繰り返しを作る

  • 「ループ」カテゴリから「変数 [カウンター] を [0] から [4] に変えてくりかえす」のブロックをボタンAの中に入れます。
  • ここで、数字の部分を先ほど作った変数「[おもちゃのかず]」に変更し、さらに「計算」カテゴリの引き算ブロックを使って「[おもちゃのかず] – [1]」の回数に変えてくりかえすようにセットします(※プログラミングの数え方が0から始まるため、リストの長さから1を引くのがポイントです!)。

4.「もし〜なら」でほしいおもちゃを探して表示する

  • ループの中に「もし [ ] なら」を入れ、左側に [おもちゃの名前] の [カウンター] 番目の値、右側に変数 [ほしいおもちゃ] をセットして比較します。
  • 一致したときに「基本」カテゴリから「数を表示」を置き、[ぽいんと] の [カウンター] 番目の値 をセットします。

【プログラムの動きを確認してみよう】

配列の中に新しくおもちゃを追加したり減らしたりしても、プログラム側の数字を直す必要がなくなります。

micro:bitのAボタンを押すと、リストの長さを自動で読み取って、最後の最後まで一瞬で全自動チェックを行ってくれます!

データが増えてもびくともしない、プログラミングならではのスマートな最強コンボをぜひ自分の手で動かして体感してみましょう! 

本日のレッスン内容まとめ

リストの要素数に合わせて自動で繰り返す「最強コンボ」

  • 従来の課題:「0から4まで」のようにループ回数を手動で指定していると、配列にデータを追加・削除するたびにプログラムの数字を直さなければならず、ミスのもとになります。
  • 解決策(配列の長さ):「配列の長さ」ブロックを使うことで、リストにいくらデータが入っていても、その数を自動で測ってくれるようになります。
  • プログラムのポイント
    • 「変数 [おもちゃのかず] を [配列の長さ [おもちゃの名前]] にする」でリストの要素数を記憶させます。
    • プログラミングの数え方は「0からスタート」するため、ループの回数は「[おもちゃのかず] – [1]」にするのが正確に最後までチェックするコツです。
  • メリット:データが増えてもプログラムの数字を書き直す必要がなくなり、ロボットのように自動で最後まで正確に処理してくれるスマートなプログラムにパワーアップします!

基礎編の総括:micro:bitの世界を広げる第一歩をクリア!

全12回にわたるmicro:bit基礎編講座、大変お疲れ様でした!

最初は「ブロックをどう組み合わせたらいいんだろう?」と戸惑うこともあったかもしれませんが、回を進めるごとに、音を鳴らしたり、ボタンで動きをコントロールしたり、変数や配列を使ってたくさんのデータをスマートに扱えるようになったりと、できることがどんどん増えていきました。

最終回である今回は、配列とループを組み合わせた「リストの要素数だけ繰り返す最強コンボ」をマスターし、データが増えてもびともしないプログラミングならではの効率的な仕組みまでたどり着くことができましたね!

自分で考えたアイデアをプログラムという形にして、手元の小さなmicro:bitを思い通りに光らせたり動かしたりする――。

その「動いたときのワクワク感」こそが、プログラミングの最大の楽しさです。

この基礎編で身につけた「順序立てて考える力(論理的思考)」や「エラーを乗り越える力」は、これからのどんな学習やモノづくりにも必ず役立つ大きな財産になります。

ぜひ、今回作ったプログラムを自分流にカスタマイズしたり、新しいアイデアのゲームに挑戦したりして、さらにプログラミングの世界を楽しんでみてください。

基礎編の受講、本当によくがんばりました!次回のステップでも、また一緒に楽しくプログラミングの冒険に出発しましょう!

次回予告:さらにステップアップ!「実践編」&「スクラッチ編」へ進もう!

全12回の基礎編をクリアしたあなたなら、もうmicro:bitの基本的な操作はバッチリです!

次回の講座では、これまで学んだ知識をフルに使って本格的なゲームや便利ツールを作る「実践編」や、ブロックプログラミングの幅がさらに広がる「スクラッチ編」をスタートさせる予定です。

さらにパワーアップしたプログラミングの世界へ、次の冒険も一緒に楽しみましょう!

お楽しみに!

カリキュラム一覧(進捗マップ)

コメント