マナティ

大人のためのやさしいプログラミング教室体験記

第4回 ループを使いこなそう

この連載では、プログラミングの経験が全くない方でもわかるように、プログラミングの学び方を説明していきます。
仕事でプログラミングをどうしても覚える必要がある方、最近流行りのプログラムに興味はあるけど何をするものか全くわからない方、近い将来必須科目になるプログラムを子供に習わせたいけど親である自分がプログラムが何なのかわからなくて不安な方など、そんな方でも気軽に読んでいただける連載です。
みなさんもプログラム初心者のMさんと一緒にプログラミングに触れてみてください。

プログラミング初心者のMさんが、ビジュアルプログラミング教材「プログラミングゼミ」を学びながら、プログラミング的思考と技術を習得していくストーリーです。
Mさん、今日は「繰り返し」について学んでいるようですよ。

繰り返しとアニメーション

ai_san03-75x85.png 今日は、「ループ」に挑戦していきましょう。
「ループ」は、同じ処理を繰り返して実行できる便利な機能のことです。
この機能で、プログラムをより効率よく書くことができますよ。
画面左下の「あつめよう」をクリックして、「くりかえし」をクリックしてください。
まずは、「はじめてのくりかえし」からやってみましょう。

pic4-1.png

pic4-2.png

pic4-3.png

OL_05-75x117.png これは、最初からプログラムが書いてあるんですね。

pic4-4-177x300.png

OL_05-75x117.png 実際に動かしてみると、どうなるのかな?
 
 
OL_08-75x117.png あれ?いきなり、星が出てくるだけ??
I先生、どういうことですか?
ai_san03-75x85.png 確かに、「100すすむ」がうまく動いていないように見えますよね。
OL_09_2.png はいっ!実際動いてないんです。
ai_san03-75x85.png 本当に動いてないのかな? では、「→をむく」の前に、「1秒待つ」を入れて、やってみてください。
OL_01-75x117.png 動作確認ですね!

pic4-a.png

OL_05-75x117.png あっ。確かに、最初はおれもんの位置にいたんですね。
でも、一瞬で動いてますね。
ai_san05-75x85.png そうなんです。「100すすむ」というブロックは、
実は「一瞬で100進む」ということなんです。

では、少しずつ動いているように見せるには、どうすればいいですか?
ヒントは、今回の単元ですよ。
OL_01-75x117.png そうか!繰り返しですね。
少しずつ動かせばいいんですね。
ai_san03-75x85.png その通りです。
よくパラパラ漫画で説明されるアニメーションの原理と同じです。
参考までに、おれもんから木までの距離は300ですよ。
OL_01-75x117.png ありがとうございます。
では、こうすればいいのかな。

pic4-5.png

OL_08-75x117.png あれっ?
今回も瞬間移動!?
ai_san03-75x85.png 困ってますね。
実は、さっき、ヒントを一つ出さないでいたんです。
OL_10-75x117.png 先生、意地悪ですね。
ai_san01-75x85.png 恨まないでくださいね。トライ&エラーで学ぶ方がMさんのためになりますから。
ヒントは、「PCの処理が非常に速い」ということです。
Mさんが作ったこのプログラムでは、ちゃんと30回繰り返しているんですが、PCの処理速度があまりにも早いので、一瞬で移動しているように見えるんです。
OL_03-75x117.png なるほど!
じゃあ、繰り返しごとに、ちょっと待ってあげればいいんですね!
OL_01-75x117.png できたー!
ai_san04-75x85.png 素晴らしいです!
あとは、最初と最後の「1秒待つ」を取っておくと、スムーズですね。
「繰り返し」の使い方が分かりましたね。

星を3回投げよう! ループのネスト

ai_san03-75x85.png では、次の応用課題に取り組んでみてください。

おれもんが星を3回投げるプログラムを作ってみてください
OL_03-75x117.png はい。
さっきのプログラムを3回繰り返せばいいから…、こうかな?
OL_08-75x117.png あれっ?
先に進んでいくだけで、繰り返してない(T T)。
ai_san03-75x85.png やっぱり最初はそうしてしまいますよね。
OL_07-75x117.png 何がいけないんでしょうか?
ai_san05-75x85.png さっきと同じように「1秒待つ」を使って動作確認をしてみたら?
OL_05-75x117.png あっ、そうか。
じゃあ、「1秒待つ」を「ループ」の最後に入れて。
OL_05-75x117.png 木のところで止まった!
ということは、繰り返しているんだけど、元の位置に戻ってなかったんだ!
ai_san01-75x85.png いいところに気づきましたね!
では、元の位置に戻るにはどうすればよいか、考えてみてください。
OL_03-75x117.png 300戻ればいいんだから、まず「←をむく」、そして、「300すすむ」かな?
OL_06-75x117.png あれ?戻ったけど、今度は逆方向に進んじゃった。
ai_san04-75x85.png もう少しですね!
OL_05-75x117.png はい。
もうできそうです!
繰り返しの最後に、「→をむく」を入れて…、これで大丈夫なはず!
うまくいきますように!
 
 
OL_05-75x117.png やったー!
先生、できましたよー!
ai_san01-75x85.png おおっ!よくできましたね。
これでいいんですよ。
では、ここからどんな点が学べるか考えてみましょうか。
OL_01-75x117.png はい。
ai_san01-75x85.png 繰り返すときは、「どの部分を繰り返すか」が大切です。
そして、同じ動作を繰り返すためには、最初と全く同じ条件になっている必要があるということです。
OL_03-75x117.png なるほど、そこまで考える必要があるんですね。
ai_san03-75x85.png 最後に、最適化を一つ。
次のように、「→をむく」の位置を調整すると、もう少し簡略化できますよ。

pic4-6.png

「呼び出し」を使ってさらに最適化しよう

OL_03-75x117.png わぁ。これで完璧ですね!
ai_san03-75x85.png そうですね。
では、ちょっとレベルを上げて、別の角度から考えてみましょうか。
まず、「メニュー」の一番右下の「おうちの方・先生」というボタンを押しましょう。

pic4-8.png

OL_01-75x117.png はい。 設定画面が出てきました。

pic4-9.png

ai_san03-75x85.png このようなポップアップ画面を「ダイアログボックス」といいます。
そこで、レベルを30に上げましょう。
OL_03-75x117.png いきなり30まで上げてもいいんですか?
私にできるかな?
ai_san03-75x85.png レベルを上げると、使えるブロックが増えるんです。
別にプログラムが難しくなるわけではありません。
こども向けには、宝石を取るごとに自動でレベルが上がっていくんですが、
大人の場合は、使いたいブロックに応じてレベルを上げていくと良いですよ。
OL_01-75x117.png そうなんですね。安心しました。
ai_san03-75x85.png ここで、「あたらしくつくる」→「サンプルのキャラ」とたどって、
新しい画面を開いてください。
OL_01-75x117.png はい。
ai_san03-75x85.png 左にたくさんのキャラが出ていますね。
その中から、「ほし」のキャラを見つけて、それに、先ほどと同じ、「星を1回投げるプログラム」を書いてみてください。
OL_01-75x117.png 分かりました。
OL_02-75x117.png できました!

pic4-10-133x200.png

ai_san03-75x85.png さらに、「はじめてのくりかえし」と似たような画面になるように
キャラを配置してみてください。

pic4-11.png

OL_10-75x117.png はい。
あれっ、「ほし」のキャラはあるんですが、「木」のキャラがありません。
ai_san03-75x85.png そうでしたね。
木のキャラをフォルダから探してもいいんですが、今回は、木の代わりに「ドラゴン」のキャラを使ってみましょうか。
OL_01-75x117.png 分かりました。
「ドラゴン」に向かって「ほし」を投げるんですね。

pic4-12-500x309.png

OL_01-75x117.png できました!
ai_san03-75x85.png では、動かしてみてください。
OL_06-75x117.png あれっ、何も動きませんよ。
さっきと同じプログラムをしたのに。
ai_san03-75x85.png ですよね。
実は、「はじめてのくりかえし」では、ユーザーに見えないところで、「おれもん」のキャラにプログラムが組んであったんです。
こんなプログラムです。

pic4-13-199x123.png

ai_san03-75x85.png そんなに難しくはないでしょう?
OL_01-75x117.png 意外と簡単なプログラムなんですね。 じゃあ、「おれもん」にこのプログラムを作ってみますね。
OL_01-75x117.png できた!
では、動かしてみよう。
 
 
OL_02-75x117.png できたー!
ai_san01-75x85.png いいですね。
このプログラムは、「おれもん」をタッチすると「ほし」が呼び出され、呼び出された「ほし」がプログラムに従って動いていますね。
OL_01-75x117.png そうですね。
ai_san03-75x85.png では、ここで問題です。
「ほし」のプログラムを変更せずに、
「おれもん」のプログラムだけを変更して、
「ほし」を3回投げるプログラムを作ってみてください。
OL_01-75x117.png 分かりました。
OL_01-75x117.png とりあえず、3回呼び出してみようかな。

pic4-14-199x182.png

 
 
OL_08-75x117.png あれっ?
3回繰り返してない!?
ai_san05-75x85.png うまくいきませんでしたか?
では、さっきと同様に「動作確認」をしてみませんか?
OL_03-75x117.png あっ、そうだ。動作確認。
じゃあ、「1秒待つ」を入れてみよう。
 
 
OL_05-75x117.png おおっ、できてる!
ai_san03-75x85.png いきなりできてしまいましたね。
素晴らしい!
では、ここから何が分かりましたか?
OL_05-75x117.png えーっと、何でしょう?
確認するつもりが、できてしまったので、はっきりいって、あまり理解できてません。
ai_san03-75x85.png 試行錯誤を繰り返しているうちに正解にたどり着くこともあるということですね。
でも、せっかくですから、ポイントを伝えますね。
OL_05-75x117.png お願いします。
ai_san03-75x85.png 「はじめてのくりかえし」で作った3回投げるプログラムと、
「サンプルのキャラ」で作った3回投げるプログラムは、
同じ動きに見えますが、実は異なる仕組みだということです。
OL_11-75x117.png どういうことですか?
ai_san03-75x85.png はい。
「はじめてのくりかえし」の方は、1つの星が行ったり来たりしています。 こんなイメージですね。

pic4-15-200x142.png

ai_san03-75x85.png それに対して、「サンプルのキャラ」の方は、3つの星を時間差で動かしています。

pic4-16-200x87.png

OL_05-75x117.png なるほど、これで分かりました!
「1秒待つ」を入れないときに、星が一つしか飛ばないように見えたのは、実は同じタイミングで3つの星が飛んでいたってことですね!
ai_san03-75x85.png その通りです。
ですから、ある動作をするプログラムを作ることが難しいとき、
発想を変えて、全く別の考え方を試してみるのもいいということなんです。
OL_02-75x117.png 頭を柔軟に、ということですね!
ai_san03-75x85.png はい。
使えるブロックが増えていくと、考え方のバリエーションも増えていきます。 Mさんも、さらに学ぶにつれて、どんどんバリエーションが増えていくと思いますよ。
いずれは、レベル999にもチャレンジしてみましょう!
OL_01-75x117.png 先生、お上手ですね。
もっとプログラミングを続けてみたくなってきました!
 

皆さん、実際に作ってみていかがでしたか?
繰り返しを使うと、色々な動きを表現できることが分かりましたね。
また、今回は、2つのキャラに別のプログラムを割り当てることにもチャレンジしました。

これからもMさんと一緒に、プログラミングを楽しんでください。

次回は、「アニメーションをよりリアルに-ポーズを使いこなす」というテーマです。
お楽しみに!

著者プロフィール

特定非営利活動法人 ロジカ・アカデミー 理事長 関 愛(著者)
中学生の頃からプログラミングを独学し,18歳の時に北海道の田舎町でシステムエンジニアとして起業。19歳で情報処理推進機構(IPA)から「天才プログラマー/スーパークリエータ」の認定を受ける。23歳の時に新入社員研修講師として活動を開始し,Yahoo! JAPAN,UFJ銀行,日本生命をはじめとする大手企業で1,000名以上の現役プログラマーを育成してきた。33歳で特定非営利活動法人ロジカ・アカデミーを設立し,理事長に就任。
現在は「すべての人に生きる力を授けるプログラミング教育」をコンセプトとした「ロジカ式」教材の開発を指揮する傍ら,プログラミング教育の普及と講師育成を中心とした活動に携わっている。
著者ホームページ:https://logica.academy