【第1回】 【micro:bit講座 第1回】基本の操作：MakeCodeでmicro:bitを動かそう！

前回で「プログラミングの作業場（MakeCode）」の準備が整いましたね。

いよいよ今回から、実際にコードを書いていきます！

でも、難しい言葉や理論は一旦忘れてください。

今日の目標はたった一つ。

「自分の指示でコンピューターを動かす」ことです。

さあ、魔法使いになった気分で、最初のプログラムを「まね」して作ってみましょう！

【宿題の答え合わせ】プロジェクトの確認
なぜ「まね」から始めるのがいいの？
1. 「まね」は学びの近道
2. 「なぜ？」を見つけるきっかけ
1.「まねっこ」でプログラムを作ってみよう！
2.Aボタンで音を鳴らしてみよう！
1. シミュレーターで確認
3.Bボタンでアイコンを表示しよう！
1. アイコンを表示するプログラム
2. シミュレーターで確認
4.自分流に「アレンジ」してみよう
5.英語のメッセージを流してみよう
1. 自分でアイコンを描く楽しさ
エンジニアの視点：コンピューターの「3つのステップ」
今日のまとめ
【宿題】チャレンジしてみよう！
次回の予告
カリキュラム一覧（進捗マップ）

【宿題の答え合わせ】プロジェクトの確認

まずは前回の宿題、「プログラム1」というプロジェクトを無事に開けましたか？

前回で「プログラミングの作業場（MakeCode）」の準備が整いましたね。

[まだ準備ができていない方は、まずは『【第0回】【micro:bit講座第0回】準備編：MakeCodeでプログラミングの第一歩を踏み出そう！』をチェックしてみてくださいね。]

もし「プログラム1」を開く場所で迷ったら、MakeCodeのトップ画面「マイプロジェクト」を確認してください。

準備ができたら、いよいよプログラミング開始です！

いよいよ今回から、実際にコードを書いていきます！

難しい言葉や理論は一旦忘れて、まずは「自分の指示でコンピューターを動かす」楽しさを体験しましょう。

なぜ「まね」から始めるのがいいの？

「プログラミングは自分で考えて作るものじゃないの？」と思うかもしれません。

もちろん、最終的にはそうです。

でも、どんなプロのエンジニアも、最初は誰かのコードを「まね」することから始めています。

「まね」は学びの近道

例えば、あなたが楽器を習い始めるとき、いきなり作曲はしませんよね？

まずはドレミの場所を覚えて、簡単な曲を練習するはずです。

プログラミングも全く同じです。

「こう書いたら、こう動いた！」という成功体験を積み重ねることで、自分の中に「プログラミングの引き出し」が増えていきます。

「なぜ？」を見つけるきっかけ

そっくりそのまま「まね」をしてみると、不思議と「ここを変えたらどうなるんだろう？」という疑問が湧いてきます。

「音の種類を変えたら？」
「マークを違う形にしたら？」

その小さな疑問こそが、皆さんの「創造力の種」になります。

まずは気楽に、私と一緒に手を動かしてみましょう。

1.「まねっこ」でプログラムを作ってみよう！

まずは、先ほど開いた「プログラム1」の画面を使って、micro:bitの画面（LED）に文字を出してみます。

ブロックをパズルのように組み合わせるだけで、コンピューターに命令が出せますよ！

「基本」ブロックをクリック： 画面中央の「基本」というパレットをクリックします。
「文字列を表示」ブロックを選ぶ： たくさんあるブロックの中から「文字列を表示」を見つけて、マウスでドラッグ（つかんで移動）して、画面右側の「最初だけ」というブロックの中に合体させます。
文字を入力： ブロックの中にある「Hello!」という文字をクリックして、好きな言葉（例：自分の名前）に変えてみましょう。

MakeCodeで作成した、最初だけブロック内に文字列を表示するプログラムの完成例とシミュレーターの様子 — 図1：このように青色の「最初だけ」ブロックの中に青色の「文字列を表示」ブロックが重なれば成功です！左側のmicro:bit画面も確認してみましょう。

エンジニアからのアドバイス
もしブロックがうまくはまらないときは、作業スペースの空いている場所に一度置いてから、もう一度「最初だけ」に近づけてみてください。パズルのようにピタッとくっつく感触があれば成功です！

さて、文字は表示できましたか？

シミュレーターのmicro:bitを見ると、すでに文字が流れているはずです。

確認できたら、次のステップへ進みましょう！

2.Aボタンで音を鳴らしてみよう！

いよいよ本格的なプログラムです。

目標は「Aボタンを押したら、メロディーが流れる」ようにすることです。

「入力」カテゴリーをクリック： 画面中央にある「入力」という青いメニューをクリックしてください。その中から「Aボタンが押されたとき」という凹型のブロックを見つけて、右側の広い作業スペースにドラッグ＆ドロップします。
「音楽」カテゴリーをクリック： 次に、赤いメニューの「音楽」をクリックします。その中から「メロディー　ダダダムを鳴らす」というブロックを選び、先ほどの「Aボタンが押されたとき」の中にはめ込んでください。

MakeCodeの編集画面：Aボタンが押されたときにメロディを再生するブロックのプログラム構成例 — 図2：このように、紫色の「Aボタン」ブロックの中に、赤色の「鳴らす　メロディ　ダダダム」ブロックをはめ込みましょう。これができたら、シミュレーターの「Aボタン」を押してみてください！

シミュレーターで確認

画面の左側に、micro:bitのイラストが表示されていますよね？

これがシミュレーターです。

マウスで画面上の「Aボタン」をクリックしてみましょう。

……音が鳴りましたか？

これであなたは、「特定の動作（入力）に対して、特定の反応（出力）をさせる」という、プログラミングの最も基本で重要な仕組みを完成させたことになります！

3.Bボタンでアイコンを表示しよう！

次は、もう一つのボタンを使って画面に絵を出してみましょう。

micro:bitの表面には、25個の赤いLED（ライト）が並んでいます。

ここに好きな形を表示させます。

アイコンを表示するプログラム

再び「入力」からブロックを出す： 「入力」カテゴリーから、もう一度「Aボタンが押されたとき」を出します。「あれ？色が薄くなったぞ？」と思った人、鋭いですね！同じ命令が2つあるとコンピューターが混乱するため、最初は色が薄く表示されます。
AをBに変更する： ブロック内の「A」という文字の横にある小さな下矢印をクリックして、「B」に変更しましょう。これで色がパッと明るくなります。
「基本」から表示ブロックを出す： 青いメニューの「基本」をクリックし、「アイコンを表示する」というブロックを選び、これを「Bボタンが押されたとき」の中につなげましょう。

MakeCodeの編集画面：Bボタンが押されたときにアイコンを表示するブロックのプログラム構成例 — 図3：このように、紫色の「Bボタン」ブロックの中に、青色の「アイコンを表示する」ブロックをはめ込みましょう。これができたら、シミュレーターの「Bボタン」を押してみてください！

シミュレーターで確認

デフォルトでは「ハート」の形になっているはずです。

シミュレーターの「Bボタン」を押してみてください。

25個のLEDが赤く光って、かわいいハートが浮かび上がりましたか？

4.自分流に「アレンジ」してみよう

「まね」ができたら、次は少しだけ「変えて」みましょう。

ここからがプログラミングの本当の楽しさです。

メロディーを変える

「鳴らす　メロディ　ダダダム」ブロックの中にある、現在の曲名（「ダダダム」など）をクリックしてみてください。

すると、「ジャンプアップ」「ハッピーバースデー」「ミステリアス」など、たくさんの候補が出てきます。

好きな曲を選んで、もう一度Aボタンを押してみましょう。

音が変わるだけで、プログラムの「性格」が変わったように感じませんか？

好きな曲を選んで、もう一度Aボタンを押してみましょう。

音が変わるだけで、プログラムの「性格」が変わったように感じませんか？

アイコンを好きな形に変える

「アイコンを表示する」ブロックのハートマークをクリックすると、いろんな絵のリストが表示されます。

うれしい顔（スマイル）
音符
動物（キリンやヘビなど！）自分の今の気分に合わせて、アイコンを選び直してみましょう。

自分でオリジナルの絵を描く

「決まった形じゃつまらない！」という人は、「LEDを表示する」という別のブロックを使ってみてください。

25個の四角いマス目（5×5のグリッド）が表示されるので、光らせたい場所をマウスでポチポチクリックすれば、自分だけのドット絵が作れますよ。

MakeCodeの編集画面：Aボタンでメロディ再生、BボタンでオリジナルのLEDアイコンを表示するプログラム構成例 — 図4：アレンジ完成！AボタンとBボタンで、それぞれ違う反応をするようにブロックを組み立てましょう。

5.英語のメッセージを流してみよう

「基本」の中にある「文字列を表示する」ブロックを使ってみましょう。

中に入っている「”Hello!”」という文字を書き換えると、好きな言葉を表示できます。

【重要】日本語は表示できる？
残念ながら、標準のmicro:bitは英語と数字しか表示できません。画面が25個の点（5×5）しかないためです。「HELLO」「OK」「HAPPY」など、アルファベットでメッセージを作って、電光掲示板のように流してみましょう！

＜コラム＞ micro:bitの顔！「5×5」のLEDグリッドを攻略しよう

数学の「座標」がここで役に立つ！

中学生の皆さんは、数学で「座標（ざひょう）」を習いますよね。実はこのLEDの一つひとつにも住所のような番号がついています。

一番左上は (x:0, y:0)
一番右下は (x:4, y:4)

micro:bitの5×5 LEDグリッドにおける座標系の図解。左上が(0,0)、右下が(4,4)であり、プログラミングでは数が0から始まることを解説している。 — 図5：micro:bitのLED座標。一番左上が(0,0)、右下が(4,4)となります。プログラミングでは『数は0から数え始める』のが基本ルールです！

「5番目なのに4なの？」と思った人は鋭い！プログラミングでは、数は「0」から数え始めるのがルールなんです。

この「x（横）」と「y（縦）」の考え方がわかると、より高度なプログラミングが自在に操れるようになりますよ！

micro:bitの5×5 LED座標攻略図。X軸とY軸の各マス目に(0,0)から(4,4)までの座標が記されており、0から4までをマスターするための解説図。 — 図6：micro:bitの5×5 LED座標。数学の座標の考え方をプログラミングに応用して、LEDを自在に動かせるようになりましょう。

自分でアイコンを描く楽しさ

「LED画面に表示」ブロックを使うと、この5×5のマス目を自由にポチポチとクリックして、オリジナルの形を作れます。

自分のイニシャルを作ってみる
オリジナルの「ドクロマーク」や「秘密のサイン」を作ってみる
2つのブロックを交互に並べて、アニメーション（パラパラ漫画）を作ってみる

文字だけでは伝わらない「感情」を、この25個の点で表現してみてください。

エンジニアの視点：コンピューターの「3つのステップ」

ここで少しだけ、プロのエンジニアが考えている「裏側」の話をします。

皆さんが今作ったプログラムは、コンピューターの基本である「3つのステップ」で成り立っています。

入力（インプット）ボタンを押す、音を検知する、傾ける、といった「きっかけ」のことです。
処理（プロセス）「ボタンが押されたなら、この命令を実行せよ」というコンピューター内部の判断です。
出力（アウトプット）音を鳴らす、LEDを光らせる、といった「結果」のことです。

身の回りにあるスマホ、炊飯器、自動運転車まで、すべてのハイテク機器はこの3ステップを組み合わせて動いています。

今日、皆さんはその第一歩をマスターしたのです！

今日のまとめ

「【第1回】【micro:bit講座第1回】基本の操作：MakeCodeでmicro:bitを動かそう！」はいかがでしたか？

MakeCodeを使えば、ブラウザだけで無料で始められる。
AボタンやBボタンを「きっかけ（入力）」にして、音や絵を「出す（出力）」ことができる。
既存のブロックの中身をアレンジすることで、自分だけのプログラムに変えられる。

この3つを体験できたなら、今日のレッスンは100点満点です！

【宿題】チャレンジしてみよう！

今日学んだことを使って、以下の動きをするプログラムを作ってみてください。

宿題ミッション：

Aボタンを押したら、LEDに「A」という文字を表示する。
Bボタンを押したら、LEDに「B」という文字を表示する。
AとBを同時に押したら、LEDに「A+B」という文字を表示する。
（ヒント：「入力」カテゴリーの中に、AとBを同時に押した時のブロックが隠れていますよ！）

答えは一つではありません。

どうすれば文字が見やすくなるか、自分なりに工夫してみてくださいね。

「できた！」という報告や、やってみた感想をコメント欄に書いてくれると、とても嬉しいです！