Arduinoのコードをステップごとに解説：理解してから書き換える

コードを理解は、BlueGraysの各プロジェクトページのソースコードセクションにあるタブで、用意されたArduinoのコードをステップごとに解説します。コピーして書き込んだコードが実際に何をしているのかを読み解くには、次の順番で進めましょう。まずこのコードの働きの要約を読み、次にステップごとの解説にある各コードの抜粋を、説明と一緒にコード全体の中で探します。回路が思いどおりに動かなければ困ったときはを確認し、最後に自分で試すの課題でコードを1か所だけ変えて、結果をボードで確かめます。この4つのセクションは、「動くけれど、なぜ動くのかわからない」から「この行を変えたら何が起きるかわかる」へ進むための最短ルートです。

この記事では、実際のプロジェクトの実際の内容を使って、「コードを理解」タブを最初から最後まで解説します。使うのは10番のプロジェクト、ボタンでLEDの点灯・消灯を切り替えです。このプロジェクトは無料で、難易度は初級、ブロック表示もあるので、コードとブロックの両方の解説を誰でも開けます。タブの各セクション、コードを説明と対応づける方法、15分の学習ルーティン、「自分で試す」課題を解くための戦略、どの変更がどの考え方を教えてくれるか、「ブロック解説」の表示、「困ったときは」とトラブルシューティングの違い、そして先生が授業で使うためのアイデアを紹介します。

「コードを理解」タブはどこにあり、誰が使える？

プロジェクトを開いてソースコードセクションまでスクロールすると、上部に2つのタブの切り替えがあります。コードとコードを理解です。「コード」タブにはプログラム全体が表示され、「コピー」と「リンクをコピー」のボタンもここにあります。「コードを理解」に切り替えると、同じプログラムの解説付きの版が開きます。200以上のプロジェクトのすべてにこのタブがあり、Arduino、ESP32、Raspberry Pi Picoのどのプロジェクトでも同じように使えます。利用条件はシンプルです。60件の無料プロジェクト（各プラットフォーム20件）では「コードを理解」が誰にでも公開されているので、無料アカウントでも要約、すべてのステップ、「困ったときは」、そして解答付きの「自分で試す」課題を見られます。プレミアムのプロジェクトでは、タブの代わりに「プレミアムでコードのステップごとの解説を利用できます。」と書かれたロックカードが表示されます。つまり、LEDの点滅、信号機、LEDの警察車両風点滅、ボタンのプロジェクトなら、お金を払わずにこの記事の方法を試せます。

各セクション：それぞれの役割

セクションの順番には意図があります。まず全体像、次に細かい部分、次にミス、最後に自分の実験です。コードの抜粋はプログラム全体ではなく、そのステップで説明する行だけです。あるステップで開いた波かっこの閉じかっこが、次のステップに出てくることもあります。そのため、1つのステップだけをちらっと見るより、すべてのステップを順番に読むほうが効果的です。ヒントは課題文のすぐ下に表示されていますが、解答は解答を表示をタップするまで隠れています。この配置のおかげで、答えを見る前に自分で考える余地が生まれます。

例：「ボタンでLEDの点灯・消灯を切り替え」プロジェクトの「コードを理解」

このプロジェクトでは押しボタン1つとLED1つを使います。ボタンの片側を5Vに、反対側をボードの13番ピンにつなぎます。同じピンは10 kΩの抵抗を通してGNDに引き下げられています。LEDの長い足は7番ピンに、短い足は330 Ωの抵抗を通してGNDにつなぎます。「コードを理解」の要約では、プログラムを次のように説明しています。ボタンを押すたびにLEDの状態が1回だけ反転し、消えていれば点灯し、点灯していれば消えます。ボタンを押し続けてもLEDが変わるのは1回だけで、50 msの待ち時間でボタンのチャタリングを無視します。以下がプログラム全体で、コメントは2か国語です。

1int ledState = 0;     // LED durumu: 0 sönük, 1 yanık / LED state: 0 = off, 1 = on
2int lastButton = 0;   // Butonun önceki okuması / Previous button reading
3
4void setup() {
5  pinMode(13, INPUT);   // Buton girişi, harici pull-down / Button input, external pull-down
6  pinMode(7, OUTPUT);   // LED çıkışı / LED output
7}
8
9void loop() {
10  int button = digitalRead(13);   // Butonu oku / Read the button
11  if (button != lastButton) {     // Buton durumu değişti / Button state changed
12    if (button == 1) {            // Yalnız basış anında (LOW -> HIGH) / Only at the press (LOW -> HIGH)
13      ledState = !ledState;       // Durumu tersine çevir / Flip the state
14      digitalWrite(7, ledState);  // Yeni durumu LED'e yaz / Write the new state to the LED
15    }
16    delay(50);                    // Sıçramayı atlamak için kısa bekleme / Short wait to skip the bounce
17    lastButton = button;          // Bu okumayı sakla / Store this reading
18  }
19}

ステップを読むときに注目したいのは、説明が「何が起きるか」だけでなく、「その行がなかったら何が起きるか」も教えてくれることです。ステップ1では、ledStateが0から始まるので、ボードの電源を入れたときにLEDは消えていると説明しています。ここから良い問いが生まれます。これを1にしたら、LEDは点灯した状態で始まるでしょうか？答えはいいえです。この行は変数を変えるだけで、setup()はLEDに何も書き込まないので、LEDは消えた状態で始まります。そして最初に押したときにledStateが0に戻るので、LEDは消えたままです。変数の値とピンの実際の状態は別のものなのです。ステップ2では、ボタンにINPUTを使う理由を回路の10 kΩの抵抗と結びつけています。ボタンが押されていないとき、抵抗がピンをGNDに引き下げるので0が読み取られます。抵抗を外すとピンはフローティング状態になり、でたらめな値が読み取られます。「困ったときは」にある「LEDが勝手に点いたり消えたりする」という症状は、まさにこれに当たります。

ステップ3とステップ5は一緒に読みましょう。ステップ3の比較は、変化のたびにlastButtonが更新されて初めて機能します。その更新が、ステップ5のlastButton = buttonの行です。この2つのステップを対応づけると、プログラムの核となる考え方がはっきりします。コードはボタンが押されているかどうかではなく、ボタンの状態が変わったかどうかを調べているのです。押し続けている間は毎回1が読み取られますが、lastButtonも1なので比較は偽になり、LEDは変わりません。ステップ4の!演算子は、2行でできたオン/オフのスイッチです。ステップ5は注意で終わっています。待ち時間が短すぎると、1回押しただけでLEDが2回以上変わることがある、というものです。ここから、課題の前に試せる最初の実験が見えてきます。50を5に下げ、何回か押して、LEDがときどき2回切り替わるかどうか観察してみましょう。結果はボタンの品質によって変わります。チャタリング対策について詳しくはArduinoに押しボタンをつなぐ方法を参照してください。

このプロジェクトの「困ったときは」には5つの症状が載っています。LEDがまったく点灯しない、ボタンに触れていないのにLEDが勝手に変わる、ボタンを押しても何も起きない、ボタンが常に押されているように動作する、コードが書き込めない、の5つです。それぞれの症状に具体的な確認方法が書かれています。たとえば「常に押されている」症状では、ボタンの足の向きを間違えて挿すとD13が常に5Vにつながったままになり、ボタンを90度回す必要があると説明しています。「自分で試す」の課題は、ボタンを押したときではなく、離したときにLEDが変わるようにすることです。ヒントでは、変数buttonが押した瞬間に1、離した瞬間に0になることを思い出させてくれます。解答は1文字の変更です。if (button == 1)の行がif (button == 0)になります。この小さな課題で、ステップ3のエッジ検出の考え方を本当に理解できたかどうかが試されます。

読み方：要約、対応づけ、テスト

1. 要約を読み、1文で書く：「このコードの働き」を読んだら、スマホを見ずにプログラムを1文でノートに書きます。ボタンのプロジェクトなら「押すたびにLEDが1回点灯または消灯する」です。
2. コードを上から順にステップと対応づける：Arduino IDEでコードを開き（ソースコードの「リンクをコピー」を使うと簡単です）、各ステップの抜粋をコード全体の中で探し、その行の横にステップ番号をコメントとして書き足します。ステップはコードの順番どおりです。グローバル変数、setup()、loop()の順になっています。
3. 対応しない行に印を付ける：どのステップにも出てこない行があれば（たいてい残るのは閉じかっこだけです）、なぜ説明されていないのかを考えます。かっこでなければ、説明の中をもう一度探します。
4. 回路でテストする：コードを書き込み、要約に書かれた動作を1つずつテストします。ボタンのプロジェクトなら、1回押す、押し続ける、すばやく連続で押す、の3つのテストで十分です。テストの前に毎回、何が起きるかを声に出して言いましょう。

対応づけのステップは一番飛ばされがちですが、一番得るものが大きいステップです。行の横にステップ番号を書くと、コードの骨組みが見えてきます。どの行が1回だけ実行され、どの行がずっと実行されるのか、各変数がどこで読まれ、どこで書き込まれるのかがわかります。ボタンのプロジェクトでは、lastButtonは2か所に出てきます。ステップ1で宣言され、ステップ5で更新されます。これを自分の目で確かめるほうが、「変数は箱です」という説明を読むよりもずっと記憶に残ります。変数、ループ、関数を別に学びたい場合はArduinoプログラミングの基本を参照してください。

「コードを理解」を使う15分のルーティン

このルーティンは、回路がすでに組んであるプロジェクト向けです。回路を初めて組む場合は、さらに10〜15分を見込むか、「コードを理解」のルーティンを翌日に回しましょう。最後の2分が一番価値のある部分です。解答を見たあとで自分なりの小さな変更をすると、暗記した答えではなく、理解した考え方が試されます。ボタンのプロジェクトなら、たとえばLEDを別のピンに移したり、50 msの待ち時間を300 msに増やしてすばやく押したときにどうなるかを観察したりできます。このペースで1日1プロジェクト進めれば、1週間で5つの無料プロジェクトを本当に理解しながら終えられます。もっと長い計画が欲しい場合は30日間のArduinoロードマップを参照してください。

「自分で試す」課題を解くための戦略

「自分で試す」の課題は短いですが、よく考えて選ばれています。どれも1か所の変更だけを求め、結果は目で見るか耳で聞いて確かめられます。解くときに次の順番を守ると、学べることが倍になります。

1. 予想する：課題を読み、コードのどの行を変えるか、変えたあとに何が見えるかを先に自分で言います。予想を書いておくと、あとで「最初からわかっていた」という思い込みを防げます。
2. 変更する：変えるのは1か所だけです。2行を同時に変えると、どの変更が何を引き起こしたのか見分けられません。
3. 書き込む：コードをボードに書き込み、書き込み完了のメッセージが出るまで待ちます。コンパイルエラーが出たら、変更した行のセミコロンとかっこを確認します。
4. 観察する：結果を予想と比べます。時間の課題なら秒数を数え、音の課題なら前の音と新しい音を続けて聞き比べます。
5. ヒントを見る：予想が外れたときや、どの行を変えればいいかわからなかったときは、ヒントを読みます。ヒントは課題のすぐ下に表示されているので、最初に読むときは手で隠しておくと効果的です。
6. 解答は最後に開く：「解答を表示」をタップするのは、自分で試してからにしましょう。解答が自分のものと同じなら、なぜ正しいのかを考えます。違っていれば、2つのやり方でなぜ結果が変わるのかを考えます。

この順番にはもう1つの利点があります。ミスを学びに変えてくれることです。たとえば信号機の課題で、青の後の黄色を1.5秒に延ばしたいのに、間違えて最初のdelay(300)の行を変えてしまったとします。すると予想とは違い、赤の後の黄色が長くなります。このミスは、コードに2つの別々の黄色のフェーズがあること、そしてloop()が1行ずつ順番に実行されることを、解答よりもはるかによく教えてくれます。課題の解答もまさにそのことを示しています。loop()の一番最後にあるdelay(300)の行がdelay(1500)になり、赤の後の黄色は0.3秒のままです。

変更の種類：どれがどの考え方を教えてくれる？

無料プロジェクトの課題を見ると、どれもいくつかの種類のどれかに当てはまることがわかります。種類がわかると、新しいプロジェクトで自分の課題を作るのも簡単になります。表の例は無料プロジェクトの実際の「自分で試す」課題から取ったものです。ピンの変更の行だけは、同じプロジェクトで自分で試せる実験です。

ブロック解説：同じ解説をブロックで

ブロック表示のあるプロジェクトでは、ソースコードセクションにブロックで表示のスイッチがあります。オンにすると、同じプログラムがコードの代わりにアプリの言語のブロックで表示され、隣のタブの名前がコードを理解からブロック解説に変わります。この表示では、要約、「困ったときは」、課題はそのままで、変わるのは「ステップごとの解説」です。各ステップにはコードの抜粋の代わりにそのステップのブロックが表示され、画像をタップすると全画面で開きます。100以上のプロジェクトにブロック表示があり、無料プロジェクトでも30以上が対応しています。ブロックは読むためだけのもので、アプリで編集したりボードに書き込んだりはできません。ボードに書き込まれるのは常に実際のコードです。

「ブロック解説」の一番良い使い方は、2つの表示を行ったり来たりすることです。ボタンのプロジェクトでは、ステップ3のブロックは「button に ピン 13 を読み取る を代入」ブロックと、入れ子になった2つの「もし」ブロックです。コードではint button = digitalRead(13);の行と、入れ子になった2つのifに当たります。ステップ4の「ledState に ledState ではない を代入」ブロックは、ledState = !ledState;の行そのものです。まずブロックを読んで何をしているかを言い、それからスイッチをオフにして同じステップのコードの抜粋を見ましょう。このようにブロックとコードを対応づけるのが、ブロックプログラミングからテキストのコードへ移る一番確実な方法です。このテーマを最初から学びたい場合はブロックプログラミングとは？とifブロックとボタンを参照してください。

「困ったときは」とトラブルシューティングの違い

実際の順番は次のとおりです。回路が動かないときは、まず症状を1文で言い表し、「困ったときは」で探します。症状が載っていれば、対処法はたいていワイヤー1本、抵抗1本、またはコード1行です。載っていない場合や、提案された対処法で直らなかった場合は、トラブルシューティングのステップを順番に確認します。見落としていた基本的な確認（ボードの電源、正しいポート、共通のGND）が見つかる可能性が高いでしょう。書き込みの段階でつまずいている場合はArduinoに書き込めないときが、コンパイルエラーならArduinoのコンパイルエラーが役に立ちます。

先生向け：「コードを理解」を授業で使う

• プロジェクターでみんなで読む：授業の始めにスマホの画面を映し、「このコードの働き」の要約を一緒に読んで、クラスにプログラムを1文でまとめさせます。次に「ブロックで表示」をオンにして、同じステップをブロックで見せます。ブロックから始めた生徒にとって、これが橋渡しになります。
• 1ステップに1グループ：5ステップのプロジェクトなら、クラスを5グループに分けます。各グループが1つのステップを読み、抜粋をコード全体の中で探し、2分でクラスに説明します。あるグループが説明している間、ほかのグループは「この行がなかったらどうなる？」と質問します。
• 予想カード：「自分で試す」の課題をホワイトボードに書きます。各グループは変更する前に予想を紙に書き、それからコードを変えて書き込みます。予想と結果の違いについて話し合うことで、課題をこなす以上のことが学べます。
• まとめの質問：授業の最後の2分で、全員が1つの質問に答えます。ボタンのプロジェクトの例：lastButtonがなかったら、ボタンを押し続けたときにどうなる？delay(50)を消したら何が変わる？10 kΩの抵抗を外すと、なぜLEDが勝手に変わることがある？

利用条件を計画するときは、次の点を覚えておきましょう。無料プロジェクトでは「コードを理解」が誰にでも公開されているので、生徒はLEDの点滅、信号機、LEDの警察車両風点滅、2つのボタンのプロジェクトで、お金を払わずにこの方法を使えます。プレミアムのプロジェクトでは「コードを理解」はプレミアムでロック解除されます。クラス全体でプレミアムのプロジェクトに進みたい場合は、生徒一人ひとりにサブスクリプションを契約してもらう代わりに、教育者向けパッケージのコードを配ることができます。詳しくは授業で使うArduinoアプリで説明しています。自分で設計した回路をシェアしたい場合は、フォーラムで「チュートリアル」のトピックを作成できます。その場合「コードを理解」のステップやブロック表示は付かないので、説明はトピックの本文に自分で書き、コードは「コードを追加」で加えます（自分のプロジェクトで授業をする）。また、アプリには各生徒がどの課題を解いたかを確認できるパネルもありません。課題の確認は授業中に、動いている回路を見るか写真で行います。

よくあるミスと簡単な直し方

• すぐに解答を開く：課題を読んですぐに「解答を表示」をタップすると、答えは覚えても考え方は身につきません。ルールは、まず予想、次に試す、次にヒント、解答は最後です。
• ステップを読まずにコピーする：「コピー」でコードを取って書き込めば動きますが、「ステップごとの解説」を読まずに次のプロジェクトに進むと、毎回ゼロからのスタートになります。書き込んだあとは、少なくとも要約とステップは読みましょう。
• コードの抜粋をプログラム全体だと思い込む：抜粋はそのステップの行だけです。単独でIDEに貼り付けてもコンパイルできません。変更は必ずコード全体の中で行いましょう。
• 一度に複数の場所を変える：2行を一緒に変えて予想外の結果になると、どちらが原因なのかわかりません。1回の書き込みで変更は1か所です。
• ピン番号を1か所だけ変える：pinModeを変えて、digitalWriteやワイヤーを忘れるのは最もよくあるミスの1つです。変える前に、コードの中でその番号が出てくるすべての場所に印を付けましょう。
• 「困ったときは」を飛ばしてすぐフォーラムで質問する：答えは、たいていそのプロジェクトの「困ったときは」のリストにすでに書かれています。まずそこを、次にトラブルシューティングを確認し、それでも解決しなければ、回路の写真とコードを添えてフォーラムで質問しましょう。
• 課題を終えてそこでやめる：解答と比べたあとに自分なりの小さな変更をしないと、学んだことはその課題だけに結びついたままになります。数値、ピン、条件のどれかを自分で選んで変えてみましょう。

いくつかのプロジェクトでこの順番どおりに「コードを理解」を使えば、用意されたコードはもう中身の見えない箱ではなくなります。どの行が何を決めているのか、何を変えたらどうなるのかを、前もって言えるようになります。「ボタンでLEDの点灯・消灯を切り替え」は、この習慣を身につけるのに最適なスタート地点です。短いコードの中に、グローバル変数、エッジ検出、トグル、チャタリング対策がすべてそろっているからです。試してみたい場合は、BlueGraysアプリでこのプロジェクトを開き、「コードを理解」タブの課題から始めてください。60件ある無料プロジェクトのすべてに、同じセクションがあります。