ブロックプログラミングとは？ブロックが本物のコードになるしくみ

ブロックプログラミングとは、プログラムを1行ずつ入力する代わりに、パズルのようなカラフルなブロックを積み重ねて組み立てる方法です。1つのブロックが1つの命令で、たとえば「ピンを出力に設定する」「LEDを点灯する」「100 ms待つ」といったものがあります。ブロックははまる場所にしかつながらないため、セミコロンの付け忘れ、閉じていないかっこ、命令のスペルミスといった間違いがそもそも起こらず、プログラムのロジックに集中できます。そのためブロックベースのプログラミングは、子どもや初心者にとってプログラミングへのもっともやさしい入り口として広く知られています。

ただし、ブロックプログラミングはおもちゃの言語ではありません。ArduinoやRaspberry Pi Picoに送られるブロックのプログラムの裏には必ず本物のコードがあり、ボードが実行するのはいつもそのコードです。この記事では、ブロックとは何か、その色が何を表しているのか、ブロックのプログラムがどのように本物のC++やMicroPythonのコードになるのかを、BlueGraysの無料プロジェクトを使って順を追って見ていきます。最後に、ブロックプログラミングの長所と限界、そしてScratch、mBlock、Tinkercadなどのツールとの関係も紹介します。

ブロックプログラミングとは？なぜ「ブロック」と呼ばれるのか

ブロックプログラミングでは、すべての命令が、ふちに凹みと出っ張りのあるピースになっています。上のブロックの下側の出っ張りが下のブロックの凹みにはまるので、命令は上から下へ順番に実行されます。中に口が開いたブロックもあります。これは他のブロックを中に入れるコンテナブロックです。数値や別の値ブロックを差し込む白い楕円形のスロットを持つブロックもあります。ピースの形が何をどこに置けるかを決めるので、ルールに反するプログラムを組むことはほぼ不可能です。現在のブロックエディタの多くは、MITのScratchとGoogleのオープンソースライブラリBlocklyが切り開いた道をたどっています。BlueGraysのブロックもBlocklyベースです。ブロックセットは電子工作プロジェクト向けに独自に設計し、アプリの言語で表示しています（日本語のアプリでは、ブロックも日本語で表示されます）。なお、ブロックは新しいプログラミング言語ではありません。命令、順序、条件、ループ、変数は、テキストのコードとまったく同じ概念で、ブロックはそれを目に見える形にしているだけです。

ブロックのプログラムはどうやって本物のコードになるのか？

ブロックエディタは裏でコードジェネレーターを使っています。ブロックの種類ごとにテキストコードのテンプレートがあり、ブロックを積み重ねるとそのテンプレートが順番につながります。BlueGraysはもう少し厳密で、各プロジェクトのブロックは、ボードに書き込む本物のコードと1対1で対応するように作られています。ブロックのどの行にもコード側の対応があり、コードのどの行にもブロック側の対応があります。ArduinoとESP32のプロジェクトではそのコードはC++、Raspberry Pi PicoのプロジェクトではMicroPythonです。ブロックのプログラムを読むには、次の5つの要素を知っておけば十分です。

• セットアップ（1回だけ実行）：ボードの電源が入ったときやリセットされたときに1回だけ実行される部分です。Arduinoのsetup()関数にあたり、ふつうはここでピンをINPUTやOUTPUTに設定します。
• ずっと繰り返す：ボードの電源が入っている間、上から下へ何度も繰り返し実行される部分です。Arduinoではloop()関数、MicroPythonではwhile True:ループにあたります。
• 命令ブロック：「ピン 9 に HIGH を書き込む」や「100 ms待つ」のように、コンテナの中に積み重ねて、それぞれ1つの仕事をするブロックです。ほとんどはテキストコードの1行にあたります。
• 値ブロック：白い楕円の中の9や100のような数値や、「ピン 13 を読み取る」のように結果を返す丸いブロックです。命令ブロックのスロットに差し込むと、コードではかっこの中の値になります。
• ドロップダウン：出力 / 入力やHIGH / LOWのような選択肢です。コードのOUTPUT / INPUTやHIGH / LOWの定数に対応し、メニューには正しい選択肢しか出てこないので、スペルを間違えることがありません。

ブロックとコードを並べて見る：LEDの点滅プロジェクト

理論はこのくらいにして、実際の例を見てみましょう。LEDの点滅プロジェクトでは、ピン9にLEDと抵抗をつなぎ、LEDが1秒に5回点滅します。下の表では、上の画像のブロックを1つずつコードに置き換えています。1行が1つのブロックで、1つのブロックが1行のコードです。

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

コードには、ブロックには見えないものがいくつかあります。voidという単語、波かっこ、セミコロンです。これらはC++の文法ルールで、ブロックでは形そのものがその役割を担います。コンテナブロックの口が波かっこの代わりになり、ブロックが上下に並んでいることが行の順番の代わりになります。値のスロットの100を1000に変えれば、コードはdelay(1000)になり、LEDは1秒に1回点滅します。メニューでHIGHの代わりにLOWを選べば、HIGHがLOWに変わります。この1対1の対応のおかげで、いくつかのプロジェクトをこなすうちに、ブロックを見なくてもコードが読めるようになります。同じプロジェクトの回路と組み立て手順は、シリーズ第2回のブロックプログラミングでLEDを点滅させるで紹介しています。

ブロックの色は何を意味するのか？

ブロックエディタでは、色は飾りではなく、そのブロックがどのカテゴリーに属するかを示しています。プログラムを初めて見たときも、色を手がかりに「ここで変数を宣言している、ここで判断している、ここにループがある」と読み取れます。BlueGraysのプロジェクトのブロック画像には、次のカテゴリーが登場します。

形もヒントになります。条件や比較のブロックは両端がとがった六角形のような形で、「もし」ブロックの条件スロットにはまります。一方、数値や変数のブロックは両端が丸くなっています。表の中で注目したい点が1つあります。「i を 0 から 5 まで 1 ずつ変えて数える」ブロックでは上限が含まれるので、iは0、1、2、3、4、5の値をとります。コードではこれをi < 6という条件で書き、ループは6回実行されます。流れるLEDプロジェクトは、まさにこのブロックで6個のLEDを順番に点灯させます。ループと配列のブロックは、シリーズのループと変数の回で詳しく解説します。

この画像の入れ子になった「もし」ブロックは、コードでは入れ子のif文になります。「もし button ≠ lastButton」ブロックはif (button != lastButton)の行で、ボタンの状態が変わったときに実行されます。その中の「もし button = 1」は、押した瞬間だけをとらえます。「ledState に ledState ではない を代入」ブロックはledState = !ledState;の行で、0を1に、1を0にします。続く「ピン 7 に ledState を書き込む」ブロックはdigitalWrite(7, ledState);です。プロジェクト全体はボタンでLEDの点灯・消灯を切り替えのページで見られます。「もし」ブロックとif/elseの関係は、シリーズのボタンと条件の回で詳しく説明します。

ArduinoとESP32ではC++、PicoではMicroPython

同じブロックのロジックでも、ボードによって違う言語に変換されます。ArduinoとESP32のプロジェクトではブロックはC++のコードに対応し、「セットアップ」と「ずっと繰り返す」のブロックはsetup()とloop()になります。たとえばESP32でLEDを点滅プロジェクトのブロックはLEDの点滅と同じ構造で、違うのはピンが5、待ち時間が500 msという点だけです。Raspberry Pi PicoのプロジェクトではブロックはMicroPythonになります。ここにはsetup()関数がありません。「セットアップ」ブロックの中身はファイルの先頭で1回だけ実行される行になり、「ずっと繰り返す」ブロックはwhile True:ループになります。

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

対応は1行ずつたどれます。「グローバル変数（最初に宣言）」の中にある「宣言： 整数（int） LED_PIN = 14」ブロックはLED_PIN = 14の行です。Pythonは型を書かないので、（int）の部分はコードに出てきません。「ピン led ：GP LED_PIN 、 出力」ブロックはled = Pin(LED_PIN, Pin.OUT)になります。「ピン led を オンにする（on）」はled.on()、「0.5 秒待つ」はtime.sleep(0.5)、「シリアル出力」はprint()の行です。「テキストを結合」ブロックは、テキスト「LED pin: GP」とLED_PINの値を+でつなげて並べます。注意点として、Arduinoでは待ち時間はミリ秒（100 ms）、MicroPythonでは秒（0.5）で指定します。ブロックでもこの違いは、別々の「… ms待つ」と「… 秒待つ」のブロックで表されています。回路はRaspberry Pi Picoで外付けLEDを点灯のページを見てください。Picoが初めてなら、先にRaspberry Pi Picoとは？を読むとわかりやすくなります。

ブロックプログラミングの長所と限界

ブロックプログラミングはすべての答えではなく、橋渡しです。最初の数週間はプログラムのロジックをつかむためのとても強力な方法で、本当の目標は、いつかその橋を渡り、自信を持ってテキストのコードに向き合うことです。ブロックとコードを並べて見ると、その移行が速くなります。新しいプロジェクトのたびに、同じブロックが同じ行に変わるのを何度も目にするからです。10個のプロジェクトで「ずっと繰り返す」ブロックに出会えば、loop()という言葉にももう違和感はありません。テキストのコードに進む準備ができたら、Arduinoプログラミングの基本で、変数から関数まで例とともに学べます。

ブロックプログラミングはどんな人に向いている？

• 子どもと家族：文字をすらすら読める9〜10歳以上の子どもなら、大人と一緒に始められます。画面上のブロックとブレッドボード上で光るLEDのおかげで、プログラミングが抽象的なものではなくなります。
• 教師とロボットクラブ：まずブロックでプロジェクトを説明し、その後コードに進むと、レベルの違う生徒が同じ授業で一緒に学べます。そのために用意した授業案は、シリーズの最終回にあります：ブロックプログラミングで学ぶロボットプログラミングの授業案。
• Arduino初心者：ボードを手に入れたばかりで、最初のスケッチが難しく見えるなら、ブロックは各行が何をしているのかを知るいちばんの近道です。ボードそのものについて知るには、Arduinoとは？から始めましょう。
• コードを読むのが苦手な人：他の人が書いたプログラムを理解するのは、それ自体が1つのスキルです。完成済みのプロジェクトのブロックを見て構造をつかめば、長いコードのどこで何をしているのかがわかりやすくなります。

Scratch、mBlock、Tinkercad、MakeCodeとの比較

ブロックプログラミングと聞いて思い浮かぶツールの多くは、パソコンやブラウザで動くエディタで、それぞれに得意分野があります。共通しているのは、ブロックをドラッグして自分でプログラムを組み立てる点です。BlueGraysは別のニーズに応えます。完成済みでテスト済みのプロジェクトのブロックを、回路図、部品リスト、本物のコードと並べて見せます。アプリでは（今のところ）自分でブロックを並べてプログラムを作ることはできません。その代わり、動くことがわかっているプログラムがどう組み立てられているかを読み取れます。だからこれらのツールは競合するのではなく、互いに補い合います。たとえば、mBlockで作った信号機の点灯順序を信号機プロジェクトのブロックと比べたり、まだボードを持っていなければTinkercadで回路をシミュレーションしたりできます。詳しくはmBlockでArduinoを使うとTinkercadのArduinoシミュレーターのガイドを見てください。

BlueGraysアプリでブロックプログラミングを使う方法

1. 発見 › プロジェクトで、ブロックバッジの付いたプロジェクトを選びます。絞り込みを使って、ブロック対応のプロジェクトだけを表示することもできます。アプリでは100件以上のプロジェクトにブロックが付いています。その多くはArduinoのプロジェクトで、残りはESP32とRaspberry Pi Picoのプロジェクトです。
2. プロジェクトのコード欄で、ブロックで表示のスイッチをオンにします。コードの代わりに同じプログラムのブロックが表示されます。画像をタップすると全画面で開き、ゆったり拡大できます。
3. ブロック解説タブに切り替えます。プログラムがステップごとに説明され、各ステップではそのステップのブロックとその働きだけが表示されます。
4. ある命令が何をするのか気になったら、コードガイドを確認しましょう。そこにある例はすべて、ArduinoとMicroPythonの命令に加えて、ブロックでも示されています。
5. スイッチをオフにすると本物のコードに戻ります。コードをコピーしてArduino IDE（PicoならThonny）に貼り付け、ボードに書き込みます。
6. 今日のクイズで学んだことを定着させましょう。毎日A1からC2までのレベルの問題が5問出題され、週間ランキングとバッジもあります。

31件のプロジェクトは、ブロックもコードも完全に無料です。それ以外のプロジェクトでは、コードと同じくブロックもプレミアムでロック解除されます。最初の一歩にぴったりの無料プロジェクトをいくつか挙げます：LEDの点滅、2個のLEDを点灯、信号機、流れるLED、ESP32でLEDを点滅、Raspberry Pi Picoの内蔵LEDを点滅。ブロック付きのプロジェクトはすべて、ブロックプログラミングのページでプラットフォーム別に見られます。そこでは、サンプルプロジェクトのブロックとコードを並べて比べることもできます。

「ブロックからコードへ」シリーズ：ロードマップ

1. ブロックプログラミングとは何か、ブロックのプログラムがどう本物のコードになるのか（この記事）
2. 最初のプログラム：ブロックプログラミングでLEDを点滅させる（ブロックとC++を並べて解説）
3. ボタンと条件：「もし」ブロックとif/else
4. ループと変数：「ずっと繰り返す」、数えるループ、配列、カウンター
5. ブロックでのセンサー読み取り、シリアルポート、PicoのMicroPython
6. 教師向け：ブロックプログラミングで学ぶロボットプログラミングの授業案

シリーズの次回ブロックプログラミングでLEDを点滅させるでは、この記事のLEDの点滅プロジェクトを、回路、ブロック、C++のコードを並べながら一から作ります。それまでの間、ここで紹介したプロジェクトをBlueGraysアプリで回路図やコードと一緒に開いてみてください。ブロックで表示で同じプログラムのブロック版に、ブロック解説でステップごとの説明に、ワンタップで切り替えられます。