CHaser解説(Blockly編)

第2部 チュートリアル

Blockly基本操作

⚠️ ネタバレ注意

各ステージの「解答例」は折りたたんであります。自分の力で挑戦してから開いてください。

この先の読み方

第2部で扱うチュートリアルの各ステージは、それ自体が「どう組めばクリアできるか」を考えるパズルです。答えを先に読んでしまうと、パズルとしての面白さが半減してしまいます。そこで本書では、各ステージを次の順番で説明します。

  1. 課題:クリアするために何をすればよいか
  2. 💡 考えるヒント:どの章で学んだ道具(移動・繰り返し・条件分岐など)を、どう組み合わせられそうかの手がかり(ただし具体的なブロックの並びまでは明かしません)
  3. (ここで一度、実際にBlockly画面を開いて自分で組んでみましょう)
  4. 解答例:実際のブロックの組み方と、なぜそう組むのかという解説

必ず3の時点で一度手を止め、自分の力でステージに挑戦してから、解答例に進んでください。うまくいかなくても構いません。「どこまでは自分の考えで合っていたか」を解答例と見比べることが、いちばんの勉強になります。

なお本文では、各章の考え方を伝えるのに適した代表的なステージだけを取り上げます。チュートリアルには全部で39のステージ(1-1〜9-3)があり、本文で触れなかったステージも含めた全ステージのBlockly解答例を、巻末の付録2「チュートリアル解答例集」にまとめてあります。本文の章を読み終えたら、その章に対応するステージを付録2で通して眺めてみると、同じ道具が少しずつ形を変えて使われていることが見えてきます。各章の終わりに、対応する付録2のステージを案内しています。

0章 Blockly基本操作

第2部では、Blocklyでブロックを組み立てながらCHaserのキャラクターを動かす方法を、チュートリアルのステージ順に沿って説明していきます。本格的なステージに入る前に、Blockly共通の操作方法を確認しておきましょう。

Blocklyから始める狙い

CHaserにはPythonのような文字のコードでプログラムを書く方法も用意されていますが(続編の応用編で扱います)、この本ではBlocklyを使います。理由は、Blocklyがプログラムの「構造」を目に見える形にしてくれるからです。文字だけのコードでは、インデント(字下げ)のズレや、かっこの閉じ忘れといった、見た目では気づきにくいミスが起こりがちです。Blocklyでは、ブロックの形そのものが「ここは繰り返しの中」「ここは条件分岐の中」という構造を表すので、パズルを組み立てる感覚でプログラムの骨組みを理解できます。ここでブロックを通して身につけた「考え方」は、文字のコードに進むときにもそのまま使えます。

画面の基本用語

Blocklyの画面には、共通して使われる名前が付いた場所があります。ブロックを組み立てるメインの作業スペースを「ワークスペース」、ブロックの部品が並んでいる左側の一覧を「ツールボックス」と呼びます。これらはCHaserだけでなく、Blocklyを使った他の学習教材(後述)でも共通して使われる呼び方なので、覚えておくと他の教材を触るときにも役立ちます。

ツールボックスの見た目は、ステージによって2種類あります。

図:ステージ1-1のツールボックス。使うブロックだけが並んでいる
図:ステージ1-1のツールボックス。使うブロックだけが並んでいる

チュートリアルの前半(ステージ1〜7)では、上の図のようにそのステージで使うブロックだけが一覧にそのまま並びます。ステージ1-1なら、上下左右4方向の「〇〇方向に移動する」ブロックだけです。使わないブロックは最初から出てこないので、迷わずに済むようになっています。

図:ステージ9-3のツールボックス。ブロックがカテゴリに分かれている
図:ステージ9-3のツールボックス。ブロックがカテゴリに分かれている

一方、ステージ8以降と、本番のプログラミング画面(第3部1章)では、使えるブロックの数が多いため、上の図のように「CHaser」「演算」「繰り返し」…といったカテゴリに分かれていて、カテゴリ名をクリックすると中身が開きます。

本書で「ツールボックスから〇〇ブロックを探しましょう」と書いてあるときは、前半のステージなら一覧をそのまま眺め、後半ならカテゴリを開いて探す、と読み替えてください。

ブロックをつなげる

Blocklyのブロックは、パズルのピースのような形をしています。ブロックの上下(処理を順番に実行するブロック)や内側(条件や繰り返しの中に入れるブロック)には、他のブロックをはめ込む「くぼみ」や「でっぱり」があります。

図:つなげる前。上のブロックの下にでっぱり、下のブロックの上にくぼみがある
図:つなげる前。上のブロックの下にでっぱり、下のブロックの上にくぼみがある

上の図では、2つの移動ブロックが離れて置かれています。よく見ると、上のブロックの下側に小さなでっぱりが、下のブロックの上側にくぼみがあるのが分かります。この2つを、ドラッグ&ドロップで近づけてみましょう。

図:つなげた後。2つのブロックがすき間なくはまっている
図:つなげた後。2つのブロックがすき間なくはまっている

近づけると、カチッとはまる感覚でつながります。つなげたブロックは上から順番に実行されるので、この形は「上に1マス動いてから、右に1マス動く」という意味になります。

つなげたブロックを外したいときは、外したいブロックを(それより下につながっているブロックごと)つまんで、離れた場所にドラッグします。不要になったブロックは、ワークスペース右下にあるゴミ箱アイコンにドラッグすると削除できます。

図:ワークスペース右下。上から順に、中央に戻すボタン・拡大・縮小・ゴミ箱
図:ワークスペース右下。上から順に、中央に戻すボタン・拡大・縮小・ゴミ箱

ゴミ箱の上には、ワークスペースを操作するボタンが3つ並んでいます。いちばん上は表示を中央に戻すボタン、その下の+と−は拡大・縮小です。ブロックが画面の外に行ってしまって見失ったときは、いちばん上のボタンを押すと戻ってきます。なお、拡大・縮小を触ると本書の図と大きさが変わって見えるので、慣れるまでは初期状態のままにしておくとよいでしょう。

組んだブロックを全部消してやり直したいときは、画面上部の「削除」ボタンが使えます。

ブロックの向きを選ぶ

「〇〇方向に移動する」のような命令ブロックには、多くの場合ドロップダウン(▼)が付いています。

図:ドロップダウンをクリックすると、上・下・左・右の選択肢が開く
図:ドロップダウンをクリックすると、上・下・左・右の選択肢が開く

ここをクリックすると「上・下・左・右」などの選択肢が表示され、同じ形のブロックで複数の方向の命令を作れます。今選ばれている項目にはチェックマークが付くので、意図した向きになっているかをここで確認できます。

変数ブロック・関数ブロック

繰り返しの中で使う値を覚えておきたいときは「変数」ブロックを使います。変数に名前を付けて、そこに値をセット(代入)し、以降はその変数名のブロックを命令の中で使い回せます(9章で詳しく扱います)。

同じ処理のまとまりに名前を付けて呼び出したいときは「関数」ブロックを使います。関数を定義するブロックの中に処理を組み立てておくと、後からその名前のブロック1つで、まとめて呼び出せるようになります(9章で詳しく扱います)。関数を定義するブロックは、メインの処理を組み立てているブロックの列とは直接つながっていない、独立した1つの塊としてワークスペースに置かれます。「あれ、つながっていないのに動くの?」と不思議に思うかもしれませんが、これはBlocklyの標準的な仕組みで、関数はどこからでも名前で呼び出せるように、あえて独立させて配置するのが一般的なルールです。

なお、チュートリアルのステージでは、変数や関数を自分で作る必要はありません。そのステージで使う変数(たとえば7-1の「移動方向」)や関数の定義ブロック(7-2の「アイテムゲット」「ランダム移動」)は、あらかじめツールボックスに用意されています。自分で名前を付けて新しく作るのは、ステージ8以降や本番のプログラミング画面で「変数」カテゴリを開いたときになります。

コラム:Blocklyは他の教材でも使われている

Blocklyは、Google社が公開しているブロックプログラミングのしくみ(ライブラリ)です。実は、学校の授業で使われる「Code.org」や、マイコン教材の「Microsoft MakeCode」など、CHaser以外の多くの学習教材も、このBlocklyのしくみをベースに作られています。つまり、ここで身につけた「ブロックをつなげる」「ドロップダウンで設定を選ぶ」「変数・関数ブロックを使う」という操作の感覚は、CHaser専用のものではなく、他のプログラミング教材に触れたときにもそのまま活かせる、汎用的なスキルなのです。

注意したいこと

  • ブロックが思ったところにくっつかない:くぼみとでっぱりの位置を近づけると、対応する場所が光って接続候補を教えてくれます。焦らずゆっくりドラッグしましょう。
  • 繰り返しや条件の「中」に入れたつもりが「下」につながっていた:ブロックの内側(インデントされた部分)と外側(同じ高さの部分)は見た目が似ていて間違えやすいポイントです。実行してみて動きが想定と違うときは、まずここを疑いましょう。
  • ドロップダウンの選択を変え忘れる:他のステージからコピーしたブロックをそのまま使うと、向きが「上」のままになっていることがあります。動かしたい方向になっているか、実行前に必ず確認しましょう。

準備ができたら、実際のステージに沿ってブロックの組み方を見ていきましょう。

YouTubeチャンネル

U-15プロコン舞鶴のYouTubeチャンネルを開設しました。大会の情報などを発信しています。 チャンネルを見る