こんにちは！「ひらめきIoTラボ」へようこそ。
このブログを担当する、エンジニアの@CodeSparkLabです。
「プログラミングに興味はあるけど、難しそう……」「自分にできるかな？」そんな不安を感じている中学生の皆さん、そしてお子さんの学びに寄り添いたい保護者の皆様。安心してください。プログラミングは、実は「魔法の杖」を手に入れるような、とてもワクワクする体験なんです。
この連載「分解プログラミング講座」では、イギリス生まれの教育用コンピューター「micro:bit（マイクロビット）」と、Microsoftが提供する無料の学習ツール「MakeCode（メイクコード）」を使って、ゼロからプログラミングを学んでいきます。
第1回目のテーマは、ズバリ「まねしてみよう！」です。
▼ 動画で動きを確認しながら進めよう！
※動画内で使っているブロックの場所や、シミュレーターの音を実際に確認してみてね。
難しい理屈は後回し。まずは、私が作る通りに「まね」をして、自分の指示でコンピューターが動く楽しさを体感してみましょう！
なぜ「まね」から始めるのがいいの？
「プログラミングは自分で考えて作るものじゃないの？」と思うかもしれません。もちろん、最終的にはそうです。でも、どんなプロのエンジニアも、最初は誰かのコードを「まね」することから始めています。
「まね」は学びの近道
例えば、あなたが楽器を習い始めるとき、いきなり作曲はしませんよね？ まずはドレミの場所を覚えて、簡単な曲を練習するはずです。プログラミングも全く同じです。
「こう書いたら、こう動いた！」という成功体験を積み重ねることで、自分の中に「プログラミングの引き出し」が増えていきます。
「なぜ？」を見つけるきっかけ
そっくりそのまま「まね」をしてみると、不思議と「ここを変えたらどうなるんだろう？」という疑問が湧いてきます。
- 「音の種類を変えたら？」
- 「マークを違う形にしたら？」その小さな疑問こそが、皆さんの「創造力の種」になります。まずは気楽に、私と一緒に手を動かしてみましょう。
準備するもの：パソコンやスマホがあればOK！
この講座の最大の特徴は、「今すぐ、無料で始められる」ことです。
プログラミングと聞くと、「高いパソコンを買わなきゃいけないの？」と思うかもしれませんが、安心してください。この講座は、皆さんが今持っているデバイスで今すぐ始められます。
パソコン・タブレット・スマホ、どれでも動く！
Microsoft MakeCodeのすごいところは、ウェブブラウザ（インターネットを見るアプリ）さえあれば動くという点です。
- パソコン（Windows / Mac / Chromebook）
画面が広く、プログラミングのブロックを並べやすいので一番おすすめです。 - タブレット（iPad / Androidタブレット）
指でブロックを動かせるので、直感的に操作できます。ブラウザからでもバッチリ動きます。 - スマートフォン（iPhone / Androidスマホ）
「パソコンを持っていない」という人や、「移動中や寝る前にちょっと試したい」という人も大丈夫。スマホの小さな画面でも、シミュレーターを動かして音を鳴らしたり、コードを作ったりすることができます。
ハードウェア（micro:bit本体）はなくても大丈夫
micro:bitは手のひらサイズの小さな基板ですが、最初から買う必要はありません。MakeCodeには、画面上でmicro:bitが本物そっくりに動く「高性能なシミュレーター」がついているからです。
「まずは無料で試してみて、もっと本格的にやりたくなったら本物を買う」という、お財布にも優しいステップアップが可能です。
必要な環境チェックリスト
準備するのは、以下の3つだけです。
| 必要なもの | 詳細 |
| デバイス | パソコン、タブレット、スマホのいずれか1台 |
| インターネット | MakeCodeのページを開くために必要（通信量は少なめです） |
| ブラウザ | Google Chrome, Microsoft Edge, Safariなど |
エンジニアからのワンポイント・アドバイス：
スマホでプログラミングをする時は、画面を「横向き」にすると、プログラミングエリアが少し広く見えて作業しやすくなりますよ！
Step 1：MakeCodeを開いてプロジェクトを作ろう
まずは、プログラミングを行う「作業場」を作りましょう。
MakeCodeへのアクセス
- インターネットの検索窓に「makecode」と入力して検索してください。
- 一番上に出てくる「Microsoft MakeCode」のページをクリックします。
- 画面を下にスクロールして、「micro:bit」のアイコンの下にある「コーディングを開始する」をクリックしましょう。
新しいプロジェクトの作成
プログラミングの世界では、一つの作品のことを「プロジェクト」と呼びます。
- 「新しいプロジェクト」という大きなプラスボタンをクリックします。
- プロジェクト名を決める画面が出てきます。今回は「プログラム1」と入力しましょう。
- 「作成」ボタンを押すと、いよいよプログラミングの編集画面（エディター）が開きます！
Step 2：Aボタンで音を鳴らしてみよう！
いよいよ最初のプログラムを作ります。目標は「Aボタンを押したら、メロディーが流れる」ようにすることです。
ブロックを組み合わせてみよう
MakeCodeは、ブロックを積み木のように組み合わせてプログラミングします。文字を打ち込む必要がないので、中学生でも直感的に進められます。
- 「入力」カテゴリーをクリック画面の中央あたりにある「入力」という青いメニューをクリックしてください。その中から「Aボタンが押されたとき」という凹型のブロックを見つけて、右側の広い作業スペース（スクリプトエリア）にドラッグ＆ドロップします。
- 「音楽」カテゴリーをクリック次に、赤いメニューの「音楽」をクリックします。その中から「メロディーを再生する」というブロックを選び、先ほどの「Aボタンが押されたとき」の中にカチッとはめ込んでください。
シミュレーターで確認
画面の左側に、micro:bitのイラストが表示されていますよね？ これがシミュレーターです。
マウスで「Aボタン」をクリックしてみましょう。
……音が鳴りましたか？
これであなたは、「特定の動作（入力）に対して、特定の反応（出力）をさせる」という、プログラミングの最も基本で重要な仕組みを完成させたことになります！
Step 3：Bボタンでアイコンを表示しよう！
次は、もう一つのボタンを使って、画面に絵を出してみましょう。micro:bitの表面には、25個の赤いLED（ライト）が並んでいます。ここに好きな形を表示させます。
アイコンを表示するプログラム
- 再び「入力」からブロックを出す「入力」カテゴリーから、もう一度「Aボタンが押されたとき」を出します。「あれ？色が薄くなったぞ？」と思った人、鋭いですね！ 同じ命令が2つあるとコンピューターが混乱するので、最初は色が薄くなります。
- AをBに変更するブロック内の「A」という文字の横にある小さな下矢印をクリックして、「B」に変更しましょう。これで色がパッと明るくなるはずです。これは「Bボタンが押されたとき」という命令に変わったことを意味します。
- 「基本」から表示ブロックを出す青いメニューの「基本」をクリックし、「アイコンを表示する」というブロックを選びます。これを「Bボタンが押されたとき」の中につなげましょう。
【エンジニアの豆知識】そもそも「LED」って何だろう？
プログラムで自由自在に光らせているこの小さな点。名前を「LED（エル・イー・ディー）」と言います。日本語では「発光ダイオード」と呼びます。
今では当たり前のように身の回りにありますが、実はこれ、エンジニアの世界では「20世紀の偉大な発明」の一つなんです。
LEDのここがすごい！
昔の電球（白熱電球）と違って、LEDにはこんな特徴があります。
- 寿命がめちゃくちゃ長い： 一度つけたら、何年も交換しなくていいほどタフです。
- 電気が少なくて済む（省エネ）： micro:bitのような小さな電池で動くコンピューターにはぴったりなんです。
- 熱くなりにくい： ずっと光らせていても、指で触れるくらい熱を持ちません（※micro:bitの場合）。
私たちの周りにあるLED
micro:bitの25個の光もすごいですが、皆さんの周りを見渡してみてください。
- 夜の街を照らす信号機
- 家や学校の天井にある照明
- スマホやテレビの液晶画面（バックライト）
- 夜道を走る車のヘッドライト
これらはすべて、形や大きさは違えどLEDの仲間です。つまり、あなたが今作っている「Aボタンでハートを出す」というプログラムは、信号機やスマホの画面をコントロールしている技術と、根本的には同じ仕組みなんです。
そう考えると、たった25個の光を操ることも、未来の巨大なシステムを作る第一歩に感じられませんか？
ハートを映し出そう
デフォルトでは「ハート」の形になっているはずです。
シミュレーターの「Bボタン」を押してみてください。25個のLEDが赤く光って、かわいいハートマークが表示されましたね！
【ステップアップ】これってドット絵？「解像度」のヒミツ
自分で絵を描いてみて、「もっと細かく描きたいのに！」と思った人もいるかもしれません。ここで、ITの世界でとても大切な「解像度（かいぞうど）」という言葉を覚えましょう。
解像度は「マスの細かさ」のこと
解像度とは、簡単に言うと「画面を何個の点で表現しているか」という数値のことです。
- micro:bit： 5×5 ＝ 25画素（ピクセル）
- 昔のゲーム機（ファミコンなど）： 256×240 ＝ 約6万画素
- 今のスマホ（4Kなど）： 3840×2160 ＝ 約800万画素
micro:bitの「25画素」がいかに少ないか分かりますよね。でも、エンジニアにとっては、この「少なさ」こそが腕の見せどころなんです！
「あえて」少ない数で伝える技術
今のスマホは、点（画素）が細かすぎて、拡大しないと一つの点が見えません。これを「高解像度」と言います。実物そっくりの写真が見られるのは高解像度のおかげです。
一方で、micro:bitのように点がはっきり見えるものを「低解像度」と呼び、そこで描かれる絵を「ドット絵（ピクセルアート）」と言います。
点が少ないからこそ、「どうすればハートに見えるか？」「どうすれば笑顔に見えるか？」を工夫する必要があります。これは、情報をギリギリまで削ぎ落として、一番大事なエッセンスだけを伝える「デザインの基本」に通じているんですよ。
解像度が低いメリットもある？
「解像度が高いほうがいいじゃん！」と思うかもしれませんが、エンジニアの視点で見ると、解像度が低いことにもメリットがあります。
- データが軽い： 点が25個しかなければ、コンピューターが処理する計算も一瞬で終わります。
- 電池が長持ち： 光らせる場所が少ないので、小さな電池でも長く動かせます。
- 直感的に作れる： 難しい絵が描けなくても、誰でもパズル感覚でデザインに参加できます。
Step 4：自分流に「アレンジ」してみよう
「まね」ができたら、次は少しだけ「変えて」みましょう。ここからがプログラミングの本当の楽しさです。
メロディーを変える
「メロディーを再生する」ブロックの中にある、現在の曲名（「ダダダム」など）をクリックしてみてください。
すると、「ジャンプアップ」「ハッピーバースデー」「ミステリアス」など、たくさんの候補が出てきます。
好きな曲を選んで、もう一度Aボタンを押してみましょう。音が変わるだけで、プログラムの「性格」が変わったように感じませんか？
アイコンを好きな形に変える
「アイコンを表示する」ブロックのハートマークをクリックすると、いろんな絵のリストが表示されます。
- うれしい顔（スマイル）
- 音符
- 動物（キリンやヘビなど！）自分の今の気分に合わせて、アイコンを選び直してみましょう。
自分でオリジナルの絵を描く
「決まった形じゃつまらない！」という人は、「LEDを表示する」という別のブロックを使ってみてください。
25個の四角いマス目（5×5のグリッド）が表示されるので、光らせたい場所をマウスでポチポチクリックすれば、自分だけのドット絵が作れますよ。
Step 5：英語のメッセージを流してみよう
▼ 動画で動きを確認しながら進めよう！
※動画内で使っているブロックの場所や、シミュレーターの音を実際に確認してみてね。
micro:bitは、文字を表示することも得意です。ただし、ちょっとしたルールがあります。
「文字列を表示する」ブロック
「基本」の中にある「文字列を表示する」というブロックを使ってみましょう。
中に入っている「”Hello!”」という文字を書き換えると、好きな言葉を表示できます。
【重要】日本語は表示できる？
ここで注意点です。micro:bitの標準機能では、日本語（ひらがな、カタカナ、漢字）は表示できません。
なぜなら、micro:bitの画面はたった25個の点（5×5）でできているからです。複雑な漢字やひらがなを表現するには、点の数が足りないのですね。
（※特殊なプログラムを組めば表示できる場合もありますが、基本は英語や数字、記号だけだと覚えておきましょう！）
「HELLO」「OK」「HAPPY」「NO.1」など、アルファベットでメッセージを作って、Bボタンのプログラムにつなげてみてください。文字が左から右へ「電光掲示板」のように流れるはずです！
micro:bitの顔！「5×5」のLEDグリッドを攻略しよう
micro:bitの表面を見てください。小さな四角いランプが並んでいますよね？ これが「LED」です。
なぜ「5×5」なの？
このLEDは、横に5つ、縦に5つの合計25個並んでいます。プログラミングの世界では、これを「5×5（ご・かける・ご）のグリッド」や「マトリックス（行列）」と呼びます。
「たった25個？」と思うかもしれません。でも、この25個の組み合わせだけで、数字、アルファベット、そして喜怒哀楽の表情まで表現できるんです。これこそが、限られたリソース（資源）で工夫するエンジニアの知恵の見せどころです。
数学の「座標」がここで役に立つ！
中学生の皆さんは、数学の授業で「座標（ざひょう）」を習いますよね？ 実は、このLEDの一つひとつにも住所のような「番号」がついています。
- 一番左上は (x:0, y:0)
- 一番右下は (x:4, y:4)
「あれ？ 5番目なのに4なの？」と思った人は鋭い！ プログラミングの世界では、数は「1」からではなく「0」から数え始めるのがルールなんです。
この「x（横）」と「y（縦）」の考え方がわかると、後で「左から2番目、上から3番目のライトだけを光らせる」といった、より高度なプログラミングができるようになります。学校の数学が、目の前のチップを光らせるための「武器」に変わる瞬間です。
自分でアイコンを描く楽しさ
「LEDを表示する」ブロックを使うと、この5×5のマス目を自由にポチポチとクリックして、オリジナルの形を作れます。
- 自分のイニシャルを作ってみる
- オリジナルの「ドクロマーク」や「秘密のサイン」を作ってみる
- 2つのブロックを交互に並べて、アニメーション（パラパラ漫画）を作ってみる
文字だけでは伝わらない「感情」を、この25個の点で表現してみてください。
エンジニアの視点：コンピューターの「3つのステップ」
ここで少しだけ、プロのエンジニアが考えている「裏側」の話をします。
皆さんが今作ったプログラムは、コンピューターの基本である「3つのステップ」で成り立っています。
- 入力（インプット）ボタンを押す、音を検知する、傾ける、といった「きっかけ」のことです。
- 処理（プロセス）「ボタンが押されたなら、この命令を実行せよ」というコンピューター内部の判断です。
- 出力（アウトプット）音を鳴らす、LEDを光らせる、といった「結果」のことです。
身の回りにあるスマホ、炊飯器、自動運転車まで、すべてのハイテク機器はこの3ステップを組み合わせて動いています。今日、皆さんはその第一歩をマスターしたのです！
保護者の皆様へ：プログラミング教育の「現在地」
中学生のお子様を持つ保護者の皆様、この講座をご覧いただきありがとうございます。
今、日本の教育現場ではプログラミングが必修化されていますが、その目的は「全員をプログラマーにすること」ではありません。
論理的思考力と問題解決力
「これを押せば、こう動く」という論理（ロジック）を組み立てる力は、将来どんな職業に就いても役立ちます。また、思った通りに動かない時に「どこが間違っているんだろう？」と原因を探すプロセスは、究極の問題解決トレーニングになります。
失敗を恐れない姿勢
プログラミングの世界では、失敗（バグ）は当たり前です。
「間違えても、すぐに直してやり直せばいい」という感覚は、自己肯定感を育むことにもつながります。ぜひ、お子様が試行錯誤している時は「どうしてそうなったと思う？」と優しく声をかけてあげてください。
【エンジニアの告白】プロでもやる！よくある失敗と対策
ここで、私がエンジニアとして仕事をしてきた中で、そしてmicro:bitで遊んでいる中でやってしまった「恥ずかしい失敗談」を皆さんに共有します。
プログラミングをしていると、思った通りに動かないことが必ずあります。でも大丈夫。それはあなたが下手だからではなく、「プログラミングの一部」だからです。
失敗1：文字が「横向き」に流れていく！？
micro:bitを縦に置いたままメッセージを表示させて、「あれ？文字が下から上に流れていくぞ？」と首をかしげたことがあります。
- 原因： micro:bitの向きと、プログラム上の「上」がズレていた。
- 対策： USBケーブルが刺さっている方が「上」だと覚えておきましょう。シミュレーターでも、向きを意識することが大切です。
失敗2：日本語を表示しようとして「無」になる
「こんにちは」と表示させたくて、文字列ブロックに一生懸命漢字を入力したのに、画面には何も映りませんでした。
- 原因： 先ほども言った通り、標準のmicro:bitは英語と数字しか理解できません。
- 対策： 「HELLO」や「KONNICHIWA」とローマ字で書くようにしました。コンピューターの「言葉のルール」を守ることが、仲良くなるコツです。
失敗3：プログラムが消えた！
一生懸命作ったプログラム。ブラウザを閉じた拍子に「保存してなかった！」と真っ青になったことがあります。
- 原因： ネットが切れたり、ブラウザのキャッシュが消えたりすると、作業中のコードが消えることがあります。
- 対策： 画面右下にある「フロッピーディスク」のマーク（保存ボタン）をこまめに押して、パソコンの中に「.hex」というファイルをダウンロードする習慣をつけました。
失敗4：AボタンとBボタンを間違える
Aボタンを押したときに音を鳴らしたいのに、Bボタンのブロックの中に音の命令を入れてしまい、「Aを押しても鳴らない！」と15分くらい悩んだことがあります。
- 原因： 単純な見間違いです（笑）。
- 対策： 「ラバーダック・デバッグ」という手法を使います。
アヒルのおもちゃ（何でもいいです）に向かって、自分の作ったプログラムを一つずつ口に出して説明するんです。「Aボタンが押されたとき、メロディーを……あ、ここBになってる！」と自分で気づくことができます。
知っていると自慢できる！「バグ」という言葉の意外な由来
プログラミングでプログラムがうまく動かないことを「バグ（Bug）」と言いますよね。直訳すると「虫」という意味ですが、なぜそう呼ぶか知っていますか？
これには、初期のコンピューター開発における有名なエピソードがあります。 1940年代、世界初の大型コンピューターの一つを動かしていたとき、原因不明のトラブルが起きました。エンジニアたちが中を詳しく調べたところ、なんと回路の中に「一匹の蛾（ガ）」が挟まっていて、ショートしていたのです。
その蛾を取り除いたことでトラブルが解決したため、それ以来、プログラムの不具合を探して直すことを「デバッグ（虫を取り除く）」、不具合そのものを「バグ」と呼ぶようになりました。つまり、皆さんが今直面しているエラーは、「歴史ある本物の虫探し」と同じ、誇り高きエンジニアの仕事なんです！
エジソンに学ぶ「トライ＆エラー」の精神
「何度やってもエラーが出る……自分には才能がないのかな」なんて思わないでください。電球を発明した偉大なトーマス・エジソンは、こんな名言を残しています。
「私は失敗したことがない。ただ、1万通りの『うまくいかない方法』を見つけただけだ。」
プログラミングも、これと全く同じです。 「AボタンとBボタンを間違えた」なら、それは「間違えると動かない」という確かな知識を手に入れたということです。「日本語が表示できなかった」なら、「コンピューターのルールの境界線」を一つ発見したということです。
何百回、何千回と「うまくいかない方法」を見つけた先には、あなただけの最高のプログラムが待っています。だから、どんどん間違えて、どんどん「デバッグ」を楽しんでください。その試行錯誤（トライ＆エラー）の数こそが、あなたのエンジニアとしての実力になります！
今日のまとめ
第1回「まねしてみよう！」はいかがでしたか？
- MakeCodeを使えば、ブラウザだけで無料で始められる。
- AボタンやBボタンを「きっかけ（入力）」にして、音や絵を「出す（出力）」ことができる。
- 既存のブロックの中身をアレンジすることで、自分だけのプログラムに変えられる。
この3つを体験できたなら、今日のレッスンは100点満点です！
【宿題】チャレンジしてみよう！
動画の最後にお伝えした「宿題」を、ここでもう一度おさらいします。
今日学んだことを使って、以下の動きをするプログラムを作ってみてください。
宿題ミッション：
- Aボタンを押したら、LEDに「A」という文字を表示する。
- Bボタンを押したら、LEDに「B」という文字を表示する。
- AとBを同時に押したら、LEDに「A+B」という文字を表示する。
（ヒント：「入力」カテゴリーの中に、AとBを同時に押した時のブロックが隠れていますよ！）
答えは一つではありません。どうすれば文字が見やすくなるか、自分なりに工夫してみてくださいね。
「できた！」という報告や、やってみた感想をYouTubeのコメント欄に書いてくれると、とても嬉しいです！
次回の予告
次回の第2回テーマは「りんごはなんこ？」です。
micro:bitに「計算」をさせてみましょう。
「変数（へんすう）」という、ちょっと難しそうな、でもとっても便利な魔法の箱が登場します。
これを使えば、micro:bitがもっと賢いコンピューターに変身しますよ。
それでは、また次のレッスンでお会いしましょう！
プログラミングで、あなたの「ひらめき」を形にしていきましょう。
最後まで読んでいただき、ありがとうございました！
