キミも未来のトビラをひらこう!!

公式LINEで相談♪

programmingSchool

できたを育むプログラミングスクール

レッスン17再帰処理を知ろう!

チャプター01はじめに

このチャプターのポイント

再帰処理を知ろう

・再帰処理とは?

これまでは、ゲームを中心につくってきたね。 今回はゲームづくりではなく、プログラムの処理について紹介するよ。 本格的なプログラミングの世界に一歩近こう!

tキーを押すと、木の模様が描かれるよ。 スライダーという機能をつかって模様の値を変更することができるよ。 定義ブロックの中に、定義ブロック自体を入れて処理をつくっているよ。 このような処理を再帰処理というんだ。 自分でつくることはないけど、短いスクリプトで複雑なことを実行できると知ることができればOKだよ。 今回使うスプライトは、treeというスプライトだよ。 では、実際に作っていこう!

チャプター02背景・スプライトを設定しよう

このチャプターのポイント

背景とスプライトの初期状態を設定しよう

・背景・スプライトの設定を確認しよう

このチャプターでは、背景とスプライトの設定を確認していくよ。 まずは、背景が黒の方が見やすいので、黒の背景を描いていこう。 新しい背景を描くボタンをクリックして、四角形のツールをつかって黒でぬりつぶされた背景を描こう。

画面右下がベクターモードになっているかを確認して、なっていなければ、ベクターモードに変換をクリックしてね。 次に、スプライトtreeがアップロードされているかな? スプライトtreeに既につくってあるスクリプトについて確認するね。 まず、定義ブロック「木を描く」を確認しよう。 定義ブロックの中に同じ木を描く定義ブロックがつなげられていることを確認してね。 このように、定義ブロックの中に、自分自身の定義ブロックが入っている処理のことを、「再帰処理」と言うよ。

つぎにtキーが押されたときの処理について確認しよう。 最初の座標の位置が0,-150で、0度つまり上向きに木を描くとい処理だね。 さらに、dキーが押されたときの処理は、ペンで描かれた線を全て消す処理だね。 全てが確認できたら、動作を確認してみよう。 グリーンフラッグを押して、tキーを押して、赤い線で木の模様が書けていればOKだよ。 描けたら、定義ブロックの引数5から3に変えて、再度[tキー]を押して実行してみよう。 さっきよりも枝の本数が減った木の模様が描けていればOKだよ。 ここまで、みんなの画面でもやってみよう!

チャプター03再帰処理の仕組みを理解しよう

このチャプターのポイント

定義ブロック内定義ブロックが読み込まれる一連の流れを理解しよう

・再帰処理は終了条件を設けるようにしよう

このチャプターでは、定義ブロック「木を描く」について詳しく説明していくね。

処理の流れを説明するよ。 とても複雑なので、ゆっくり説明するよ。 まずは、深さが3の状態で長さ、つまり100歩が動くので、縦線が1本描かれるよ。 その後30度回り、1つ目の定義ブロック「木を描く」処理を実行するね。 1つめの定義ブロックでは引数の深さがマイナス1されて2、長さが100×0.7の70歩として処理されるよ。 その後また30度回り、1つ目の定義ブロックの処理を実行することになるね。

今度は深さがマイナス1されて1長さが70×0.7の49歩として処理されるよ。 深さ1で49歩進んだあとは、 また1つ目の定義ブロックが実行されるけど、深さが0となっているため、ペンを上げて下ろすだけの処理となるよ。

その後、深さ1定義ブロック60度回すにもどって、2つめの定義ブロックが実行されるよ。 やっぱり深さが0なので何も実行されず、ペンを上げて下ろす処理が実行されるよ。 さらに、深さが1の処理に戻り、30度回す長さ×マイナス1歩くが実行され、木の枝の分岐している場所に戻るんだ。

ようやく、深さ1が最後まで処理されたので、次に深さ2の処理の続きが始まるよ。

深さ2として2つ目の定義ブロックの処理が実行されるので、深さ1、長さ49で実行されたあとは、これまで同様深さ0としての処理は実行されずに、向きだけ変更して、分岐点に戻ることになるね。

このような処理を繰り返して、木が描かれて行くんだ。 少し難しいけど、自分自身を呼び出す定義ブロックを組み合わせて木が描かれていることがイメージできればOKだよ。 このチャプターでは、動作確認はしないので、次のチャプターにすすもう。

チャプター04変数を指定する新しい方法を知ろう

このチャプターのポイント

スライダーを使った変数変更の方法を知ろう

・スライダーの最小値と最大値を知ろう

このチャプターでは、完成している定義ブロックに変更を加えて、深さや角度を変更できるようにしていくよ。 変数を3つ作ろう。 それぞれの変数名は「深さ」「長さ」「角度」としてね。

木を描くの定義ブロックの引数に、それぞれ変数を適用しよう。 このままだと、変数の値が指定されないね。 今回はいつもと違う方法で変数を設定してみるよ。

まず、プレビュー画面に変数が表示されている状態で、変数を右クリックして、スライダーを選択してみてね。 3つとも変数をスライダー表示させたら、それぞれの最小値と最大値を指定するよ。 プレビュー画面上の変数を右クリックして、スライダーで最小値と最大値を指定するをクリックしてね。 深さは最小値を2、最大値を10と変更しよう。 これで、2から10の値をスライダーで変更できるようになったよ。 同様にして、長さは50~100、角度は-30から30に変更しよう。 変更が終わったら、実際にスライダーで変数の値を変えてみよう。

深さを10、長さを100、角度を0としてみてね。

最後に、木を描く定義ブロックの[1秒待つ]を削除してね。

これは、動きを確認するためだけに入れていたから、木を描くためにはひつようないな処理だよ。 ここまで完成したら、動作を確認しよう。 グリーンフラッグをクリックして、tキーを押してみよう。 少し時間がかかるかもしれないけど、木の模様が描かれて入ればOKだよ。 さあ!ここまで、みんなの画面でもやってみよう!

チャプター5最後に

・まとめ

このレッスンでは、定義ブロックの中に、同じ定義ブロック自体が入っている処理を知ることができたね。 プログラミングの世界では、このような処理を「再帰処理」というよ。 深さ3で始まった処理の中に、深さをマイナス1する処理が入ることによって、順々に定義ブロック自体を処理する仕組みだったね。