micro:bitプログラミング(16) FizzBuzz問題を解こう

スポンサーリンク

スポンサーリンク

FizzBuzz問題を解こう

今日はmicro:bitを使ってFizzBuzz問題(フィズ・バズもんだい)を解いてみましょう!

もちろん今回も全てシミュレーターで実行できますので、無料でお試しできます🌟
実機を買うのは、遊び方や使い方を覚えてからでも遅くありません🎊

まずはいつものURLにアクセスしてください😆

Microsoft MakeCode for micro:bit
A Blocks / JavaScript code editor for the micro:bit powered by Microsoft MakeCode.

FizzBuzz問題とは

FizzBuzz問題(フィズ・バズもんだい)とは、プログラマーがプログラムがちゃんと書けるかどうかを試す簡単な試験です。

micro:bitに限らず、色々なプログラム言語で応用できるので、初心者が初めに学ぶには最適だと思います。😊

簡単にどういった問題かを説明すると、次のようになります。

  • 1から100までの数字を画面上に表示する。
  • 3で割り切れる数字の場合は Fizz と表示する。
  • 5で割り切れる数字の場合は Buzz と表示する。
  • 3でも5でも割り切れる数字の場合は FizzBuzz と表示する。

詳しくはこちらのwikiをご覧ください。

これをmicro:bitで作ってみます👍

ただ、micro:bitの場合は1から100まで自動的に表示すると数字がどんどん流れて「今いくつだっけ?😭」ということになりますので、Aボタンを押したら次の数を表示するようにしてみましょう。

以上のことから、プログラムの仕様は次の通りとなります。

  • Aボタンが押されるたびに1,2,3,…100を表示する。
  • 3で割り切れる数字の場合は Fizz と表示する。
  • 5で割り切れる数字の場合は Buzz と表示する。
  • 3でも5でも割り切れる数字の場合は FizzBuzz と表示する。

やってみよう

ではmicro:bitでやってみます。

一気に全部を考えると難しいので、一つずつ分解しながらやっていきましょう!

Aボタンが押されるたびに1,2,3,…100を表示する。

まず1から100まで変化する数字を扱うので、変数が必要です。

変数を作ろう

変数の作り方はもう知っていますね??

「分からない」とか「覚えていない」人は、以前の記事もあわせて確認してくださいね😄

  • メニューから「変数」を選択して「変数を追加」をクリックしてください。
    変数を追加

    変数を追加

  • 次に、変数の名前を決めます。名前はなんでもいいんですが、パッとみて「数の変数だ」と分かるように kazu としましょう。
    変数kazuを作る

    変数kazuを作る

  • OKボタンを押すと、ダイアログが閉じて変数kazuができたことが分かりますね👍
    変数kazuが出来た!

    変数kazuが出来た!

変数を初期化しよう

次に、作った変数を初期化します。

初期化とは、変数を最初の状態に戻すことです。リセットとも言いますね。

最初の状態というのは自分で勝手に決めちゃってもいいんですが、ここでは0にしましょう。

  • メニューの「基本」から「最初だけ」をダブルクリックします。
    「最初だけ」を選ぶ

    「最初だけ」を選ぶ

  • 次にメニューの「変数」から「変数[kazu▼]を(0)にする」をダブルクリックします。
    「変数[kazu▼]を(0)にする」を選ぶ

    「変数[kazu▼]を(0)にする」を選ぶ

  • 最後にこの二つをくっつけます。
    二つを組み合わせる

    二つを組み合わせる

これでmicro:bitが動いた時に変数kazuが0になります🌟

Aボタンを押して数を表示しよう

変数を作って初期化したら、それをmicro:bitに表示しましょう!

Aボタンが押されたら変数を表示するプログラムを作りますね👍

  • メニューの「入力」から「ボタン[A▼]が押されたら」をクリックします。
    「ボタン[A▼]が押されたら」を選ぶ

    「ボタン[A▼]が押されたら」を選ぶ

  • メニューの「基本」から「数を表示(0)」をクリックします。
    「数を表示(0)」を選ぶ

    「数を表示(0)」を選ぶ

  • メニューの「変数」から「kazu」をクリックします。
    「kazu」を選ぶ

    「kazu」を選ぶ

  • それぞれで出てきた三つのパーツを組み合わせます。まず、「kazu」を「数を表示する(0)」に入れましょう。
  • その次に、「数を表示する(kazu)」を「ボタン[A▼]が押されたら」の中に入れます。
  • こういうブロックになれば🆗ですよ💖
    全部組み合わせる

    全部組み合わせる

では、ここまでに出来たプログラムを一度試してみましょう。

Aボタンを押したら0が表示されましたか?

表示されたら🆗です✨

表示されない場合は、もう一度自分のプログラムを見直してみてくださいね!

変数を増やしてみよう

さて、まだ変数の表示プログラムは完成していません。

というのも、Aボタンを何回押しても、表示される数は0のままだからです。

micro:bitが動いた時に変数kazuは0になるので、これは正しい動きなんですが、目的はAボタンが押されたら1から100までを表示するプログラムを作ることでしたね。

というわけで、次はAボタンを押したら変数kazuを増やして表示するようにします。

  • メニュー「変数」から「変数[kazu▼]を(1)だけ増やす」をクリックします。
    「変数[kazu▼]を(1)だけ増やす」を選ぶ

    「変数[kazu▼]を(1)だけ増やす」を選ぶ

  • で、これを先ほど作った「ボタン[A▼]が押されたら」の中に入れます。こんな↓プログラムになると思います。
    変数kazuを増やして表示するプログラム

    変数kazuを増やして表示するプログラム

これで数が増えて表示されるようになります。

Aボタンを押して数が増えていくことを確認してくださいね🤗

変数を戻そう

さあこれで完成!と思うにはまだ早いですよ〜🤣

今のプログラムだと、たしかに1から100まで表示できるんですが、100の時にもう一度Aボタンを押したらどうなるでしょう???

そうですね、101になっちゃうんです。。。😱

ずっと数え続けてもいいんですが、ちゃんと仕様通りに作るために「数が100になったら変数kazuを0にする」ようにプログラムしてみましょう。

ここでは「論理」を使います。

  • メニュー「論理」から「もし<真▼>なら」をクリックします。
    「もし<真▼>なら」を選ぶ

    「もし<真▼>なら」を選ぶ

  • その下にある「<0 [=▼] 0>」もクリックしましょう。
    「<0 [=▼] 0>」を選ぶ

    「<0 [=▼] 0>」を選ぶ

  • メニュー「変数」から kazu をクリックします。
  • 「<0 [<▼] 0>」の左にkazuを、右に100を入れてください。次のようになるはずです。
    「kazu [=▼] 100」とします

    「kazu [=▼] 100」とします

  • 上で作ったブロックを「もし<真▼>なら」の<>の中に入れます。
    「もし<真▼>なら」の<真▼>中に入れる

    「もし<真▼>なら」の<真▼>中に入れる

  • メニュー「変数」から「変数[kazu▼]を(0)にする」をクリックして、「もし<(100) [=▼] (kazu)>なら」の中にブロックを入れます。次のようになります。
    「変数[kazu▼]を(0)にする」を間に入れる

    「変数[kazu▼]を(0)にする」を間に入れる

  • 最後に、今作ったブロックを「ボタン[A▼]が押されたら」の最後に追加します。
    「ボタン[A▼]が押されたら」ブロックの最後に追加

    「ボタン[A▼]が押されたら」ブロックの最後に追加

これでkazuが1-100の間なら画面に数が表示され、変数kazuが100になったら0にクリアされるようになりました!

これで1から100まで表示するプログラムは完成です🎉

3で割り切れる数字の場合は Fizz と表示する。

さて、その次は3で割り切れる数字の場合はFizzと表示されるようにプログラムしていきましょう。

では3で割り切れる、ということをプログラムしたいのですがどうしたらいいでしょうか?

例えば、6は3で割り切れますが、10を3では割り切れません。あまりが1出てしまうからですね。

順番に書いていくとこう↓なります。

  • 1 ÷ 3 = 0 あまり 1 ← 割り切れない
  • 2 ÷ 3 = 0 あまり 2 ← 割り切れない
  • 3 ÷ 3 = 1 あまり 0 ← 割り切れる!
  • 4 ÷ 3 = 1 あまり 1 ← 割り切れない
  • 5 ÷ 3 = 1 あまり 2 ← 割り切れない
  • 6 ÷ 3 = 2 あまり 0 ← 割り切れる!
  • 7 ÷ 3 = 2 あまり 1 ← 割り切れない
  • ……

割り切れるということはあまりが0と言いかえることができますね💕

ではこれをプログラムにしていきましょう。

  • メニュー「論理」から「もし<真▼>なら」をクリックします。
  • メニュー「論理」から「(0) [=▼] (0)」をクリックします。
  • メニュー「計算」から「(0)を(1)で割ったあまり」をクリックします。
  • メニュー「変数」から「kazu」をクリックします。
  • kazuを「(0)を(1)で割ったあまり」の(0)の場所に入れます。
  • 「(kazu)を(1)で割ったあまり」の(1)を(3)に変えます。
  • 「(kazu)を(3)で割ったあまり」を「(0) [=▼] (0)」の左の0の場所に入れます。
  • 「((kazu)を(3)で割ったあまり) [=▼] (0)」を「もし<真▼>なら」の<真▼>の場所に入れます。

駆け足で説明しちゃいましたが、⬇️こんな風になっていればOKですよ👍

3で割り切れる数

3で割り切れる数

次にこのブロックの間にFizzと表示する命令ブロックを入れます。

  • メニュー「基本」から「文字列を表示(Hello!)」をクリックします。
  • 「文字列を表示(Hello!)」を「文字列を表示(Fizz)」に変えます。
  • 上のブロックの間に「文字列を表示(Fizz)」を入れます。

⬇️こうなりましたか???

3で割り切れる場合はFizzを表示する

3で割り切れる場合はFizzを表示する

最後にこの⬆️ブロックを「ボタン[A▼]が押されたら」のブロックの間に追加します。入れる場所は「数を表示(kazu)」の下にしましょう。

できたブロックを追加

できたブロックを追加

これまでに組み合わせた命令で、3の時はFizzと表示されるようになりました‼️

いちおう、プログラムを実行すると変数kazuがどのようになるか説明しますね🌼

  1. 最初に、変数kazuは0になります。
  2. Aボタンを1回押す(1回目)
    1. kazuは1になります。
    2. micro:bitのLEDに1と表示されます。
    3. kazu÷3のあまりは1なので、Fizzは表示されません。
    4. kazuは100ではありませんので、0になりません。
  3. Aボタンを押す(2回目)
    1. kazuは2になります。
    2. micro:bitのLEDに2と表示されます。
    3. kazu÷3のあまりは2なので、Fizzは表示されません。
    4. kazuは100ではありませんので、0になりません。
  4. Aボタンを押す(3回目)
    1. kazuは3になります。
    2. micro:bitのLEDに3と表示されます。
    3. kazu÷3のあまりは0なので、Fizzが表示されます。
    4. kazuは100ではありませんので、0になりません。
  5. 「Aボタンを押す」を繰り返して100回目まで押したとします(100回目)
    1. kazuは100になります。
    2. micro:bitのLEDに100と表示されます。
    3. kazu÷3のあまりは2なので、Fizzは表示されません。
    4. kazuが100になったので、0に戻ります。

ちゃんと表示されたら🆗です!次へ進みましょう!

ちゃんと表示されなかった場合はもう一度自分のプログラムを見直しましょうね😅

5で割り切れる数字の場合は Buzz と表示する。

さて、次は5で割り切れる数字の場合はBuzzと表示されるようにプログラムしていきましょう。

3の時とほとんど手順は変わりません。3を5にしてFizzをBuzzにするくらいですね💦

やってみます

  • メニュー「計算」から「(0)を(1)で割ったあまり」をクリックします。
    「計算」から「(0)を(1)で割ったあまり」を選ぶ

    「計算」から「(0)を(1)で割ったあまり」を選ぶ

  • メニュー「変数」からkazuを選択し、「(0)を(1)で割ったあまり」の(0)と入れ替えます。
  • 「(kazu)を(1)で割ったあまり」の(1)を(5)に変えます。
    「kazuを5で割ったあまり」に変えます

    「kazuを5で割ったあまり」に変えます

  • メニュー「論理」から「(0) [=▼] (0)」をクリックします。
    「論理」から「(0)[=▼](0)」を選ぶ

    「論理」から「(0)[=▼](0)」を選ぶ

  • 「(0) [=▼] (0)」の左側の(0)に「(kazu)を(5)で割ったあまり」を入れます。
    論理ブロックを作る

    論理ブロックを作る

これで5で割り切れる数を判定するブロックができました。

次はこれを元のプログラムに入れますが、どこに入れれば良いか分かりますか?

元のプログラムの「もしkazuを3で割ったあまりが0なら」のブロックを見てください。このブロックの左下にマルがついた+があると思います。

左下のマルがついた+をクリックします

左下のマルがついた+をクリックします

これをクリックしてみましょう。どうなりましたか?

そうですね。ブロックが下に伸びて「でなければ」という文が出てきたと思います。

「でなければ」が出てきた!

「でなければ」が出てきた!

もう一回左下の+を押してみると、またブロックが下に伸びて「でなければ もし<>なら」という文が出てきたと思います。

「でなければ もし<>なら」が出てきた!

「でなければ もし<>なら」が出てきた!

この⬆️中にある<>の中に先ほど作った論理ブロックを入れましょう。

論理ブロックを<>の中に入れる

論理ブロックを<>の中に入れる

あとは「文字を表示(Buzz)」ブロックを作って、その中に入れたらOKです😁

文字を表示(Buzz)を作って中に入れる

文字を表示(Buzz)を作って中に入れる

これで数字が3で割り切れればFizzを、5で割り切れればBuzzを表示するプログラムができました!

残りは3でも5でも割り切れればFizzBuzzを表示するプログラムを追加すれば完成ですね!💖

3でも5でも割り切れる数字の場合は FizzBuzz と表示する。

さて、最後のブロックを完成させましょう!

3でも5でも割り切れる数…もう分かりますよね??

そう。15で割り切れる数であれば、3でも5でも割り切れます♩

なので、⬆️でやったブロックをもうひとつ作り、3や5を入れていたところを15にするだけでOKですね💖

作り方はもう分かると思うので、省略しちゃいますね😅

⬇️こういうブロックができればOKですよ〜🌹

「kazuを15で割りったあまりが0」の論理ブロック

「kazuを15で割りったあまりが0」の論理ブロック

次にこのブロックを「ボタン[A▼]が押されたら」の中に入れます。どこに入れるか分かりますか?

そうですね、「もし〜なら」の左下の+をもう一回押して「でなければ もし<>なら」をもう一個出しましょう。その中に今作った論理ブロックを入れればOKです!

論理ブロックを中に入れる

論理ブロックを中に入れる

あとはその中に「文字を表示(FizzBuzz)」を入れるとOKですよ!

FizzBuzzを表示するブロックを入れる

FizzBuzzを表示するブロックを入れる

実行してみよう!

では、めでたくプログラムも完成したことですし、試しにAボタンを押して数字を表示しましょう!

ポチっ(1回目)! → 1が表示された!

ポチっ(2回目)! → 2が表示された!

ポチっ(3回目)! → 3が表示されてからFizzが表示された! ← あれ?

ポチっ(4回目)! → 4が表示された!

ポチっ(5回目)! → 5が表示されてからBuzzが表示された! ← あれれ?

。。。(14まで繰り返す)

ポチっ(15回目)! → 15が表示されてからFizzが表示された! ← あれれれれ?🤔

プログラムは順番に実行される

どうやらプログラムがちょっとだけおかしいようです。

本当なら、1,2,Fizz,4,Buzz,Fizz,7…14,FizzBuzz,16,17…と表示されるはずですが、そうなっていません。

おかしなところは2つあります。

  1. 3,6の代わりにFizzが、5,10の代わりにBuzzが表示されるはずなのに、2,3,Fizz,4,5,Buzz,6,Buzz,7と表示されてしまう。
  2. 15の代わりにFizzBuzzが表示されるはずなのに、Fizzが表示されてしまう。

上の図をよく見てみると「変数(kazu)を(1)だけ増やす」の下に「数を表示する(kazu)」のブロックがあることに気がつきます。

その下に「kazuを3で割ったあまりが0なら」の論理ブロックがありますね。

プログラムは上から順番に実行されるので、これだとkazuが3の時は3と表示されてからFizzが表示されてしまいます。

なので、順番としては

  1. kazuを3で割り切れるか?割り切れる場合はFizzを表示する、割り切れない場合は次の論理ブロックの判定をする。
  2. kazuを5で割り切れるか?割り切れる場合はBuzzを表示する、割り切れない場合は次の論理ブロックの判定をする。
  3. kazuを15で割り切れるか?割り切れる場合はFizzBuzzを表示する、割り切れない場合は次の命令を実行する。
  4. kazuを表示する

となるのが良さそうです。

ではブロックを並べ替えてみましょう。

論理ブロック「もし<>なら」と「でなければ もし<>なら」の最後に「でなければ」というブロックがあり、その中には何もありません。

この中に「数を表示(kazu)」を入れましょう!次のようになるはずです。⬇️⬇️⬇️

「数を表示(kazu)」を移動する

「数を表示(kazu)」を移動する

もう一度試してみます‼️

ポチっ(1回目)! → 1が表示された!

ポチっ(2回目)! → 2が表示された!

ポチっ(3回目)! → Fizzが表示された! ← 😁

ポチっ(4回目)! → 4が表示された!

ポチっ(5回目)! → Buzzが表示された! ← 😁

。。。(14まで繰り返す)

ポチっ(15回目)! → Fizzが表示された! ← あれ?🤔🤔🤔

3,6,5,10の時は正しくFizz, Buzzが表示されるようになりましたが、15の時はまだFizzが表示されるようです。

なぜFizzBuzzではなくFizzになるんだろう???

もうお分かりですね🤗

15は3でも5でも割り切れる数字です。このため、最初にある「kazuを3で割ったあまりが0なら」の中に入ってしまい、Fizzが表示されてしまうんですねー😱

では、順番を入れ替えたらうまくいきそうですね!

  1. kazuを15で割り切れるか?割り切れる場合はFizzBuzzを表示する、割り切れない場合は次の命令を実行する。
  2. kazuを5で割り切れるか?割り切れる場合はBuzzを表示する、割り切れない場合は次の論理ブロックの判定をする。
  3. kazuを3で割り切れるか?割り切れる場合はFizzを表示する、割り切れない場合は次の論理ブロックの判定をする。
  4. kazuを表示する

としましょう!

順番を入れ替える

順番を入れ替えるのは簡単ですね。

もうブロックは全て完成しているので、マウスで必要な部分をドラッグして入れ替えましょう!

この時、「文字を表示する(Fizz)」や「文字を表示する(FizzBuzz)」なども忘れずに🌟

順番を入れ替える

順番を入れ替える

さあ!これで完成したはずです!

もう一度試してみましょう!!

1,2,Fizz,4,Buzz,Fizz,7,8,Fizz,Buzz,11,Fizz,13,14,FizzBuzz,16,17…

出来た‼️

完成です‼️‼️‼️‼️‼️

最後に

最後に全体のプログラムを載せておきます💖

もし思ったように動かない場合はこちらを参考にしてくださいね🤗

完成したプログラム

完成したプログラム

今回は「論理」「変数」「計算」とmicro:bitをプログラムするときに必要になる基本のブロックをたくさん使いました🌼

本当は「ループ」も使いたかったんですが、micro:bitで文字を連続で表示すると「今何が表示されているのか」が分からなくなってしまうので、わざと抜いてみました(分かりやすくする方法もあるんですが、そうなると記事がめっちゃ長くなる💦)。

ループについては次回で勉強しましょう‼️

頑張って良いmicro:bitライフを!

ではまた!

コメント