micro:bitプログラミング(12)「変数」を使おう!(2)

「変数」を使おう(2)

今日も前回の続きで「変数」について勉強しましょう。
もちろん今回も全てシミュレーターで実行できますので、無料でお試しできます?
実機を買うのは、遊び方や使い方を覚えてからでも遅くないですよ?

まずはいつものURLにアクセスしましょう!
https://makecode.microbit.org/#lang=ja

「変数」メニュー

命令「変数」を開いてみましょう。

今日は前回の続きで「変数[x▼]を(1)だけ増やす」を使ってみたいと思います(↓クリックすると拡大表示されます)。

「変数」メニューにxが表示されるようになりました

「変数」メニュー

九九を表示しよう

前回のプログラムを少しだけ変更して、次のプログラムを作ってみましょう。

Aボタンが押されたら変数xに1を足して、九九を表示するプログラム

最初にAボタンを押したら1×1,1×2,1×3…1×9を表示して、もう一度Aボタンを押したら2×1,2×2,2×3…2×9を表示するプログラムです。

6の段を表示するプログラム

6の段を表示するプログラム

前回↑のままだとAボタンが押された時に変数xの値に6を指定していましたので、まずは最初にこれを0にするようにします。

最初にxを0にしよう

micro:bitが起動した時に変数xを0にするようにしましょう。

  1. 命令「基本」から「最初だけ」をクリックします。
  2. 命令「変数」から「変数[x▼]を(0)にする」をクリックし、↑の中に入れます。
最初だけ変数xを0にします

最初だけ変数xを0にします

Aボタンが押されたら九九を表示しよう

ほぼ前回と同じですが、2番目だけ違うのでご注意ください。

  1. 「Aボタンが押されたら」なので、命令ブロックの「入力」から「ボタン[A▼]が押されたとき」をクリックします。
  2. 命令「変数」から「変数[x▼]を(1)だけ増やす」をクリックし、「ボタン[A▼]が押されたとき」のブロック内に入れます。
  3. 命令「基本」から「数を表示(0)」をクリックし、「ボタン[A▼]が押されたとき」のブロックに入れます。
  4. 命令「計算」から「(0) [x▼] (0)」をクリックしします。
  5. 命令「変数」から「x▼」をクリックし、↑の(0)に入れます。
  6. 「(x) [x▼] (0)」の(0)をクリックして1にします。
  7. 4〜6の命令を「数を表示(0)」の(0)に入れます。
  8. 4〜7を繰り返してx2,x3,…x9まで作成します。
  9. 最後に、2で入れた「変数[x▼]を(0)にする」の(0)をクリックして6にします。
変数xを一つ増やして九九を表示するプログラム

変数xを一つ増やして九九を表示するプログラム

実行してみましょう。Aボタンを押したら1の段が表示されます。もう一度押したら2の段が表示されます。

正しく表示されましたか?

一応、プログラム全体を載せておきますので(↓)、もし上手く表示されない場合は上の図と、ご自分のプログラムを見比べてくださいね。

変数に1を足して九九を表示するプログラム全体

変数に1を足して九九を表示するプログラム全体

プログラムを改良しよう

さて、上のプログラムでもいいのですが、困ったことが一つあります。

例えば、8の段を表示したい時には、Aボタンを8回押す必要があります。

連打してもいいのですが、その間LEDに表示される値がちょっと変な表示になってしまいますね。

これを改良するために、Bボタンを使って次のように改良してみましょう。

Aボタンが押されたら変数xに1を足す

Bボタンが押されたら九九を表示する

つまり、Aボタンで何の段かを決めて、Bボタンで表示する、というプログラムに改良してみます。

最初だけ

これは上のプログラムと変わりません。最初だけ変数xを0にするようにしましょう。

最初だけ変数xを0にします

最初だけ変数xを0にします

Aボタンが押されたとき

次にAボタンが押されたら変数xに1を足すようにしてみましょう。

いまの変数xがいくつなのか分かりやすくするために、LEDに表示するとよりいいかもしれませんね。

では、やってみます。

  1. 「Aボタンが押されたら」なので、命令ブロックの「入力」から「ボタン[A▼]が押されたとき」をクリックします。
  2. 命令「変数」から「変数[x▼]を(1)だけ増やす」をクリックし、「ボタン[A▼]が押されたとき」のブロック内に入れます。
  3. 命令「基本」から「数を表示(0)」をクリックし、「ボタン[A▼]が押されたとき」のブロックに入れます。
  4. 命令「変数」から「(x▼)」をクリックし、↑の(0)に入れます。
Aボタンが押されたら変数xに1を足して表示するプログラム

Aボタンが押されたら変数xに1を足して表示するプログラム

Aボタンを押したら、押したぶんの数がLEDに表示されるか確認してください。

もし上手く表示されない場合は、上の図とご自身のプログラムを見比べてくださいね。

Bボタンが押されたとき

最後にBボタンが押された時の動作をプログラミングして行きましょう。

これも前のプログラミングとほとんど変わりません。

  1. 「Bボタンが押されたら」なので、命令ブロックの「入力」から「ボタン[A▼]が押されたとき」をクリックします。
  2. [A▼]をクリックし、[B▼]に変えます。
  3. 命令「基本」から「数を表示(0)」をクリックし、「ボタン[B▼]が押されたとき」のブロックに入れます。
  4. 命令「計算」から「(0) [x▼] (0)」をクリックしします。
  5. 命令「変数」から「x▼」をクリックし、↑の(0)に入れます。
  6. 「(x) [x▼] (0)」の(0)をクリックして1にします。
  7. 4〜6の命令を「数を表示(0)」の(0)に入れます。
  8. 4〜7を繰り返してx2,x3,…x9まで作成します。
Bボタンが押された時に九九を表示するプログラム

Bボタンが押された時に九九を表示するプログラム

これでプログラムが完成です。

実行してみよう

それでは、作成したプログラムを実行してみます。

Aボタンを押したら、押した分の数字がLEDに表示されることを確認してください。

Bボタンを押したら、Aボタンを押した分の数字x1,2,3,4,5,6,7,8,9の数字が表示されることを確認してください。

例えば、2の段の九九を表示するためには

  1. Aボタンを2回押す
  2. Bボタンを1回押す

で表示されます。

できましたか?

もし上手く動かない場合は下の図とご自分のプログラムを見比べてみてくださいね。

Aボタンで段数を決めてBボタンでその段の九九を表示するプログラム

Aボタンで段数を決めてBボタンでその段の九九を表示するプログラム

さらに改良してみよう!

さて、上のプログラミングで一応は完成しています。一応は。

これをもう少しだけ改良してみましょう。

どこに改良ポイントがあるかわかりますか?

ヒントは「同じ(ような)箇所」です。

同じようなプログラムというのは実は考え方によっては大きく改良できるポイントなんですね。

同じような処理があった場合はまとめられないかを考えてプログラミングすると、どんどん良くなって行きますよ!

さて、ここまで言えばお分かりでしょうw

今回の改良ポイントは「Bボタンが押されたとき」の処理になります。

Bボタンが押されたとき

Bボタンが押されたときの処理をよくみてみましょう。

  • 「変数xに1をかけて表示する」
  • 「変数xに2をかけて表示する」
  • 「変数xに3をかけて表示する」
  • 「変数xに4をかけて表示する」
  • 「変数xに5をかけて表示する」
  • 「変数xに6をかけて表示する」
  • 「変数xに7をかけて表示する」
  • 「変数xに8をかけて表示する」
  • 「変数xに9をかけて表示する」

なんだか、まとめられると思いませんか?

そう!

かける数字を1-9まで繰り返しているので、以前勉強した「ループ」を使ってまとめられるんです!

やってみましょう!

変数yを作ろう

かける数字1-9を表す変数yを作成します。変数の作り方は前回やりましたね。

変数yを追加する

変数yを追加する

変数yを0にしよう

Bボタンが押された時にyを0にするようにプログラミングします。

【注意】yを0にするのは「最初に」ではありません。Bボタンが押された時で大丈夫です。
Bボタンが押された時に変数yを0にする

Bボタンが押された時に変数yを0にする

この時、プログラムの動きは次のようになります。

  1. Bボタンを押す
  2. 変数yが0になる

くりかえしを追加しよう

「くりかえし(9)回」を追加します。

命令「ループ」から「くりかえし(0)回」をクリックして、(0)を(9)に書き換えましょう。

書き換えたら「変数yを(0)にする」の下に追加します。

Bボタンが押された時に変数yを0にして、9回繰り返す

Bボタンが押された時に変数yを0にして、9回繰り返す

この時、プログラムの動きは次のようになります。

  1. Bボタンを押す
  2. 変数yが0になる
  3. 9回繰り返す

ただし内容が無いので9回繰り返しても何もおきませんw

変数yに1を追加しよう

命令「変数」から「変数[y▼]を1だけ増やす」をクリックし、「くりかえし(9)回」の中に追加します。

Bボタンが押された時に変数yを0にして、yに1を足すことを9回繰り返す

Bボタンが押された時に変数yを0にして、yに1を足すことを9回繰り返す

この時、プログラムの動きは次のようになります。

  1. Bボタンを押す
  2. 変数yが0になる
  3. 9回繰り返す
    1. 変数yを1だけ増やすので、yが1になる
    2. 変数yが1だけ増やすので、yが2になる
    3. 変数yが1だけ増やすので、yが3になる
    4. 変数yが1だけ増やすので、yが4になる
    5. 変数yが1だけ増やすので、yが5になる
    6. 変数yが1だけ増やすので、yが6になる
    7. 変数yが1だけ増やすので、yが7になる
    8. 変数yが1だけ増やすので、yが8になる
    9. 変数yが1だけ増やすので、yが9になる

変数xかける変数yを表示しよう
  • 命令「基本」から「数を表示する(0)」をクリックします。
  • 命令「計算」から「(0)[x▼](0)」をクリックします。
  • 命令「変数」から「x▼」をクリックし、計算ブロックの左側に入れます。
  • 命令「変数」から「y▼」をクリックし、計算ブロックの右側に入れます。
Bボタンが押された時に変数yを0にして、yに1を足すことを9回繰り返してxかけるyをLEDに表示する

Bボタンが押された時に変数yを0にして、yに1を足すことを9回繰り返してxかけるyをLEDに表示する

この時、プログラムの動きは次のようになります。

  1. Bボタンを押す
  2. 変数yが0になる
  3. 9回繰り返す
    1. 変数yを1だけ増やすので、yが1になる
    2. 変数xかける変数y(1)をLEDに表示する
    3. 変数yが1だけ増やすので、yが2になる
    4. 変数xかける変数y(2)をLEDに表示する
    5. 変数yが1だけ増やすので、yが3になる
    6. 変数xかける変数y(3)をLEDに表示する
    7. 変数yが1だけ増やすので、yが4になる
    8. 変数xかける変数y(4)をLEDに表示する
    9. 変数yが1だけ増やすので、yが5になる
    10. 変数xかける変数y(5)をLEDに表示する
    11. 変数yが1だけ増やすので、yが6になる
    12. 変数xかける変数y(6)をLEDに表示する
    13. 変数yが1だけ増やすので、yが7になる
    14. 変数xかける変数y(7)をLEDに表示する
    15. 変数yが1だけ増やすので、yが8になる
    16. 変数xかける変数y(8)をLEDに表示する
    17. 変数yが1だけ増やすので、yが9になる
    18. 変数xかける変数y(9)をLEDに表示する

プログラムがやっていることは多いのに、図で見るとスッキリしましたね。

これが「くりかえし(ループ)」の力です。

単純な反復作業はループを使うことで、とても短くなります。

念のためプログラム全部を載せておきますので、もし上手く動作しない場合は図とご自分のプログラムを見比べてくださいね。

変数x、yとループを使ったプログラム

変数x、yとループを使ったプログラム

最後に

今日は変数とループの組み合わせを説明しました。

変数とループはプログラムを書いていく上で重要な考え方になります。

是非マスターして使いこなせるようになってください!

それと、第1回に比べて使える命令がどんどん増えてきました。次回からは実際に作品を作って行きながら、新しい命令を覚えていけるようにしますので、よろしければ引き続きご覧ください。

ここまで読んでいただいてありがとうございました。

ではまた!

コメント