アクティビティ: 楽しい顔と悲しい顔

micro:bit 本体はハードウェアと呼ばれます。それは物理的なテクノロジーのひとつです。ハードウェアを利用するためにはソフトウェア（コード、もしくはコンピュータ・プログラムとしても知られています) を書く必要があります。ソフトウェアは、何をどのような順序で実行するかを、アルゴリズムを使用してハードウェアに指示します。アルゴリズムとは、コンピュータに対する一連の命令のことを指します。

このアクティビティでは、micro:bitのボタンを入力デバイスとして使う方法を学び、さらに出力としてスクリーンに何かを表示させるコードを書きます。さらに、擬似コード、MakeCode ツール、イベント・ハンドラー、およびコードのコメントの書き方ついても学びます。

擬似コード

あなたのプログラムに何をしてもらいたいですか？コンピュータ・プログラムを書くにあったって最初に行うステップは、あなたのプログラムに何をさせたいか計画を立てることです。ステップごとに分けた詳細な計画を書き出しましょう。計画には、プログラムがどのような入力情報を受け取り、それがどのように処理され、どのような出力をプログラムが作成し、それをどのように記録または表示するかの記述を含むようにします。書き出す内容は、完全な文章である必要はありませんし、実際のコードを含む必要もありません。このような詳細な記述のことを擬似コードと呼びます。擬似コードは、プログラムの詳細なアウトラインまたは素案のようなものです。擬似コードは、自然言語とコードを合わせたものです。

これから書くプログラムの擬似コードは以下の例のようになるでしょう。

画面に何も表示していない状態から開始する。
Aボタンを押すと、幸せそうな顔を表示する。
Bボタンを押すと、悲しい顔を表示する。

マイクロソフト MakeCode

擬似コードとして、プログラムの計画が出来たら、実際のプログラムを作成してみましょう。ブラウザーウィンドウで、マイクロソフト MakeCode というmicro:bitツールを開きます。(https://makecode.microbit.org) MakeCode ツールはIDE (統合開発環境) と呼ばれ、プログラムの作成、コンパイル、実行、テスト、およびデバッグといった、プログラマが必要なすべての機能を提供するソフトウェア・アプリケーションです。

マイクロソフト MakeCode のツアー

シミュレータ - 画面左側。プログラムがmicro:bit本体で実行される時、どのような動作をするかを確認することが出来る仮想micro:bitです。これはプログラムのデバッグや、プログラムが実行時にどのように振舞うかをすばやく理解するためのフィードバックとして便利です。
ツールボックス - 画面中央。いくつかのカテゴリに分かれており、カテゴリ内のブロックは右側のプログラミング・ワークスペースにドラッグすることができます。
ワークスペース - 画面右側。プログラムを作成するプログラミングワークスペースです。プログラムは、この領域でブロックをスナップして組み合わせることによって構築されます。

IDE tour

The features highlighted here are:

Go to the Home Screen to start a new project or open an existing project
Simulator shows what your program will look like when running on a micro:bit
Hide or Show the simulator pane
Program in either Blocks or JavaScript
Programming Workspace where you will build you program
Blocks Toolbox
Download your program to the micro:bit
Name your project and Save it on your computer

イベントハンドラー

When you start a new project, there will be two blue blocks, ‘on start’ and ‘forever’ already in the coding workspace. These two blocks are event handlers.

プログラミングにおけるイベントとは、キーを押す、マウスボタンをクリックする、などを含む、ユーザーによって実行されるアクションのことを指します。イベントハンドラーは、イベントに応答する、あらかじめ決められた仕事のことです。プログラマは、イベントが発生した時にコンピューターが何をするかを指示するコードを書くことができます。

ある動作はイベントが発生したら実行される、という概念を子供たちにしっかり理解してもらうために、クレイジーな条件文という楽しいアンプラグドアクティビティを用意しています。

追加情報：

Tooltips - Hover over any block until a hand icon appears and a small text box will pop up telling you what that block does. You can try this now with the ‘on start’ and ‘forever’ blocks.

JavaScript コードの上にマウスポインターを置くと、同じ効果が得られます。

ヘルプ - 任意のブロックを右クリックして、ヘルプを選択することで参考ドキュメントを開くことができます。

ブロックを削除する - 「ずっと（forever）」ブロックをクリックし、左側のツールボックスエリアにドラッグします。ゴミ箱アイコンが表示されるのが確認できるでしょう。そこでブロックを手放すと、ブロックが画面から消えます。任意のブロックをコーディング・ワークスペースからツールボックスの領域にドラッグすることで、そのブロックを削除することもできます。また、コードウィンドウからブロックを選択し、キーボードの「Delete」キー (mac の場合はコマンド X) を押すことで、ブロックを削除することも出来ます。

擬似コードを見ると、プログラムは画面に何も表示されていない状態からスタートさせたいということが分かります。

We can do this by going to the Basic toolbox category and under …more, choose a ||basic:clear screen|| block.

「表示を消す（clear screen）」ブロックをコーディングのワークスペースにドラッグします。

ブロックの色が灰色表示になっていることに着目してください。この灰色表示になっているブロックの上にマウスポインターを置くと、このブロックがどのイベントハンドラにも接続されていないので、そのために実行することができない、そのように教えてくれるポップアップテキストボックスが表示されます。

では「表示を消す（clear screen）」ブロックを「最初だけ（on start）」のブロックにドラッグしましょう。するとブロックは灰色表示ではなくなりました。これはプログラムの実行スタートというイベントが発生したときにブロックが実行されるようになったということを示します。

basic.clearScreen()

保存は早めに、頻繁に!

これで、micro:bitシミュレータで現在実行しているプログラムを作成することが出来ました。あなたがプログラムを書いている間、MakeCode は自動的にコードをプログラムにコンパイルして、シミュレータで実行してくれます。この時点ではプログラムはあまり多くのことをしませんが、より面白くする前にプログラムに名前を付けて保存しましょう。

アプリケーションウィンドウの左下、ダウンロードボタンのすぐ右側に、プログラムに名前をつけるためのテキストボックスがあります。プログラムに名前を付けたら、保存ボタンを押して保存します。重要: コードは、何か重要な部分を記述したとき、または数分おきに保存するようにしましょう。コードにわかりやすい名前を付けると、後でプログラムのリストからすばやく選んだり、他の人がそのプログラムの目的を理解するのが楽になります。

イベントハンドラーを追加

それでは私たちのプログラムをもう少し面白くするために、さらに2 つのイベントハンドラーを追加してみましょう。

入力メニューから「Aボタンが押されたとき（on button A pressed）」ブロックを 2 つ、コードウィンドウにドラッグします。

２つめのブロックは灰色表示になっていることに注意してください。これは、今のところ２つとも全く同じブロックであり、Aボタンが押される、という同じイベントに「耳を澄ましている」状態だからです。

最初のブロックはそのままで、２つ目のブロックのドロップダウンメニューを使用して、ボタンを「A」から「B」に変更しましょう。すると「Bボタンが押されたとき」という別のイベントの発生を待っている状態になったので、そのブロックも灰色表示ではなくなりました。

input.onButtonPressed(Button.A, () => {
})
input.onButtonPressed(Button.B, () => {
})

LEDに表示

準備が整ったので、押されたボタンに応じて異なるイメージがLED画面に表示されるようにしましょう。

「基本（Basic）」メニューから「LEDに表示I（show leds）」ブロックを 2 つ、コーディングワークスペースにドラッグします。
1つ目の「LEDに表示（show leds）」ブロックを「Bボタンが押されたとき（on button A pressed）」イベントハンドラーに組み入れて、2 つ目の「LEDに表示（show leds）」ブロックは「Bボタンが押されたとき（on button B pressed）」イベントにハンドラーに組み入れましょう。

input.onButtonPressed(Button.A, () => {
    basic.showLeds(`. . . . .
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    `)
})
input.onButtonPressed(Button.B, () => {
    basic.showLeds(`
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    `)
})

「Aボタンが押されたとき（on button A pressed）」イベントハンドラーに組み入れてある「LEDを表示（show leds）」ブロック内の、小さなチェックボックスをひとつずつクリックすることでハッピーな顔のイメージを作ってみましょう。
今度は「Bボタンが押されたとき（on button B pressed）」イベントハンドラーに組み入れてある「LEDを表示（show leds）」ブロックのチェックボックスをひとつずつクリックすることで悲しい顔のイメージを作ります。

input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       `)
})
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})

Did you ever wonder how those LEDs turn on and make light? Well, watch this video and find out!

プログラムをテストしよう！

あなたが書いたプログラムは、MakeCode によって自動的にコンパイルおよび実行されるので、自分のコードがどのようなアウトプットを生成するかを確認するには、Aボタンを押して次にBボタンを押すという動作だけで十分です。

気に入ったイメージが表示されるまで、「LEDを表示（show leds）」ブロックのLEDをオンにしたりオフにしたりしていろいろ実験してみましょう。
コードを保存することを忘れないようにしましょう。

basic.forever(() => {
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        # . . . #
        . # # # .
        `)
    basic.pause(800)
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        . # # # .
        # . . . #
        `)
    basic.pause(800)
})

コードにコメントを書く

コードにコメントを追加することは良い習慣です。コメントは、以下のような点で役に立ちます。コメントは、特定のコードブロックが何をするか、またはなぜあなたがそのようにプログラムを書くことにしたのかを思い出すのに便利です。またコメントがあると、他の人があなたのコードを読む時にも、同じようにコードが理解しやすくなります。

コードブロックにコメントを加える：

ブロックの文字の前に表示されるアイコンを右クリックします。
メニューがポップアップします。「コメントを追加（Add Comment）」を選択します。

Add comment menu

すでにあったアイコンのすぐ左側にクエスチョンアイコンが表示されるようになります。
クエスチョンマークをクリックすると、小さな黄色のボックスが表示され、そこにコメントを書くことができるようになります。

Write comment

終わったら、クエスチョンアイコンをもう一度クリックしてコメントボックスを閉じます。
コメントを見たり編集したい時はクエスチョンアイコンをクリックします。

追加情報

ブロックの文字の前に表示されているアイコンを右クリックすると、コメント以外の他のオプションが表示されます。ブロックの複製を作成したり、ブロックを削除したり、ヘルプ（ドキュメンテーション）を開いたりできます。コードを書くときに、それらのオプションを試してみましょう。
JavaScript では、2 つのスラッシュ（//）の後にコメントを書き込むことができます。2 つのスラッシュは、その後に続く文字はコメントですよと、 JavaScript 伝えているのです。

// Aボタンが押されたらハッピーな顔を表示します

クリーンアップ！

Clean up your coding workspace before you do a final save! What does this mean?

これはプログラムが実際に使用しているコードとブロックだけがワークスペースにある状態を意味します。
プログラムの作成中に、実験としてワークスペースにドラッグしたブロックを全て削除します。

保存とダウンロード

あなたのコードはシミュレータでうまく動作し、コメントされ、ワークペースもきれいになったので、プログラムを保存してmicro:bitにダウンロードして実際に動かしてみましょう！

完全なプログラムはこのようになっているはずです。

// Aボタンが押されたらハッピーな顔を表示します
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       ')})
//B ボタンが押されたときに悲しい顔を表示します。
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})
basic.clearScreen()

Edit this page on GitHub
Edit template of this page on GitHub