マナティ

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

第6回 プログラミングで図形を描こう

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

プログラミング初心者のMさんが、ビジュアルプログラミング教材「プログラミングゼミ」を学びながら、
プログラミングの思想と技術を習得していくストーリーです。
今回、Mさんは、プログラミングで図形を描くことにチャレンジしています。

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

ai_san03-75x85.png 今回は、プログラミングで図形を描いてみましょう。
最初は、ブロックが出来上がった状態ですので、一旦バラバラにしてからチャレンジしてください。

prog06pic1.PNG

prog06pic2.PNG

OL_01-75x117.png これは簡単ね。
すぐできた!
ai_san01-75x85.png どんどん慣れてきていますね。
その調子ですよ!
OL_03-75x117.png ありがとうございます。
でも、ひとつ質問があるんです。
ai_san05-75x85.png どんなことですか?
OL_03-75x117.png 「はんたいをむく」というブロックなんですが、なくても正方形を描くことができると思うんですけど。

prog06pic3.pngprog06pic4.png

 
 
ai_san03-75x85.png その通りですよ。
描く向きは反対になりますが、確かに描けますね。
OL_03-75x117.png じゃあ、何のために「はんたいをむく」を入れてるんですか?
ai_san03-75x85.png いい質問ですね。
では、同じようにして正三角形を描いてみて下さい。
「はんたいをむく」を入れる場合と入れない場合でどう違うかを確認してみましょう。
OL_05-75x117.png はい。
では、まず、「はんたいをむく」を入れてやってみよう。
正三角形なので、90°ではなく、60°にして、3回繰り返すといいのかな。

prog06pic5.png

 
OL_01-75x117.png うまくいった!
じゃあ、今度は、「はんたいをむく」を取ってみるとどうなるかな?

prog06pic6.png

 
OL_08-75x117.png あれ?
正三角形にならない。
先生、これ、どういうことですか?
ai_san03-75x85.png 正三角形では、「はんたいをむく」を取ったらうまくいきませんでしたね。
それは、「はんたいをむく」を入れるか入れないかで、角度の意味が変わってくるからなんです。
OL_10-75x117.png 角度の意味?
角度に意味なんかあるんですか?
ai_san03-75x85.png ありますよ。
では、それぞれのプログラムで、どの角度を指定しているのか、図を描いて考えてみましょうか。
OL_10-75x117.png はい。
ai_san05-75x85.png まず、「はんたいをむく」がある場合です。
スタートしたら、「↑をむく」となっていますので、最初、矢印は上を向いてますね。
そのあとの矢印の動きはどうなりますか?
プロゼミでは、角度を変えるとき「反時計回り」に動かす決まりがありますので、 それに注意してください。
OL_01-75x117.png 分かりました。やってみます。
OL_03-75x117.png 「はんたいをむく」なので、まず下を向いて、
そして、「むきに60どたす」なので、反時計回りに、…こうかな?
 
 
ai_san03-75x85.png その通りです。
続けて3回繰り返してください。
OL_03-75x117.png まっすぐ進んで、反対を向いて、反時計回りに60°。
もう一回繰り返す…、こうなるなー。
 
 
ai_san05-75x85.png 3つの60°は正三角形のどこにありますか?
OL_05-75x117.png 正三角形の内側です。
なるほど!
これは「内角」を指定しているんですね!
ai_san03-75x85.png その通りです!
では、今度は、「はんたいをむく」を使わない場合も、同様に考えてみてください。
OL_05-75x117.png はい。やってみます。
 
 
OL_05-75x117.png 今度は、角度が外側に来てる!
なるほど、今度は「外角」を指定しているんですね。
正三角形の場合、内角が60°なので、外角は120°か。
これなら、正三角形にならはいはずだわ。
ai_san04-75x85.png はい、その通りです!
「はんたいをむく」を使った場合は「内角」指定、
使わなかった場合は「外角」指定となります。
OL_03-75x117.png なるほど。
よく分かりました。
正方形のときは、内角も90°で外角も90°なので、見分けがつかなかったんですね。
ai_san03-75x85.png そうなんです。
最初は戸惑いますが、そのうち慣れますので心配しないでください。
では、慣れるために、正五角形、正六角形にもチャレンジしてみてください。
OL_01-75x117.png はい。
OL_05-75x117.png できました。
五角形の、内角バージョンと外角バージョンです。

prog06pic6_2.pngprog06pic7_3.png

OL_05-75x117.png 六角形の、内角バージョンと外角バージョンです。

prog06pic8_2.pngprog06pic9_2.png

ai_san04-75x85.png おおっ、早いですね!
慣れてきましたね。
ここから、正多角形の頂点の数と内角・外角の関係が分かりますか?
OL_03-75x117.png 内角は良く分からないですが、外角は360を頂点の数で割ると出てきそうですね。
360÷3=120
360÷4=90
360÷5=72
360÷6=60
ai_san04-75x85.png 冴えてますね!
その通りです。
じゃあ、ここで、新しいことにチャレンジしましょうか。

プログラミングをよりインタラクティブに! ― 入力と変数

OL_07-75x117.png もっと難しくなるんですか?
怖いな。
ai_san03-75x85.png 大丈夫ですよ。
きっと、プログラミングの幅が広がり、面白くなると思いますよ。
お題は、「数字nを入力すると、n角形を描く」というものです。
OL_05-75x117.png 入力ですね。
なんか、本格的になってきましたね。
ところで、入力ってどうするんですか?
ai_san03-75x85.png プロゼミでは、prog06pic11-107x50.pngというブロックがあるので、それを使います。
「あたらしくつくる」→「じゆうにつくる」で作りましょう。
ほら、黄色い「うごき」ブロックの中にあるでしょう?
OL_03-75x117.png ありました。
これをどう使うんですか?
ai_san03-75x85.png それは、自分で動作確認してみてください。
ちなみに、入力した内容は、水色の「しらべる」ブロックの中の prog06pic12-133x50.pngに入っていますよ。
あっ、矢印のキャラは、これを使ってくださいね。
prog06pic13.png
OL_03-75x117.png 分かりました。
とりあえずやってみますね。
一旦、尋ねてみて、尋ねた返事を表示してみようっと。

prog06pic14.png

 
OL_03-75x117.png できた!
意外と簡単にできたわ!
ai_san01-75x85.png いいですね!
あとは、「たずねたへんじ」を変数のように使えばいいですよ。
OL_06-75x117.png 変数ってまだやったことないんですけと。
ai_san05-75x85.png そうでしたね。
Mさん、よくできるので、もう知ってると思ってました。
プロゼミでは、「へんすう」を使うブロックは、「けいさん」、「しらべる」、「つくる」に入ってますよ。

prog06pic15.png

ai_san05-75x85.png 今回は、特に、「けいさん」の中にあるブロックを使います。

prog06pic16.png

OL_05-75x117.png なるほど、色々な計算ができるんですね。
ai_san03-75x85.png 正式に変数を扱うには、色々な手順があるので、詳しい使い方は次回学ぶことにしましょう。
今回は、「へんすう」とは、数値を入れる箱というイメージだけ分かっていればいいですよ。
「たずねたへんじ」という箱に、辺の数nが入っていると思ってください。
n角形の場合、何回繰り返して、何度向きを変えればいいですか?
OL_05-75x117.png n回繰り返して、外角で360÷n度、向きを変えればいいんでしたね。
じゃあ、やってみます。

prog06pic17.png

 
OL_02-75x117.png できた!
入力できるようになると、本格的なプログラムって感じがしますね!
ai_san05-75x85.png そうですよね!
もう、簡単なアプリなら作れそうな勢いですね。
折角ですから、もっとアプリみたいにしてみませんか?
Mさんだったら、どんな機能を追加すればいいと思いますか?
OL_03-75x117.png そうですねー。
毎回再生ボタンを押さなくてもいいように、何回も繰り返して入力できるようにしたいですね。
ai_san03-75x85.png いい案ですね。
では、やってみてください。
OL_03-75x117.png 分かりました。

pic5-17_3.png

OL_06-75x117.png 入力部分も含めて、全体を繰り返せばいいのかな?

prog06pic18.png

OL_06-75x117.png あれっ?
おかしいなー。
ai_san05-75x85.png ちゃんと繰り返してかけてますね。
そこは成功ですよ!
でも、手直ししたい部分がありますよね。
どこを手直しすればいいですか?
OL_03-75x117.png はい。
次の3点ですね。
① 「何角形?」と尋ねるセリフの向きがおかしいです。
② 2回目から矢印が消えてます。
③ 多角形が重ねて表示されてるので、一つずつ表示されるようにしたいです。
ai_san03-75x85.png いいですね。
このように、改善点をリストアップしていくといいですよ。
実際のプログラミングでも、そうします。
OL_03-75x117.png なるほど、これは、プログラミングだけでなく、仕事の基本ですね。
では、一つずつ考えます。
OL_01-75x117.png ①のセリフの向きは…、1回目はうまく表示されてたんだよね。
そのときの矢印の向きは…、あっ、右向きだわ!
繰り返して戻ってきたときに、「→をむく」を入れてみようかな。

②の矢印が表示されない件は、簡単!
「0びょうでかくれる」を取り除けばいいはず。
とりあえず、この2点を変更してみよう。

prog06pic19.png

 
OL_01-75x117.png うまくいった!
ai_san01-75x85.png さすがですね!
これでも、十分いいプログラムですよ!
では、③番目の点も考えてみてくださいね。
OL_02-75x117.png 分かりました。
むずかしそうだな。
とりあえず、「ペン」のブロックを調べてみよう。
あった!
prog06pic20.png

こんな便利なものがあるなんて、プロゼミ最高!
では、早速このブロックを使ってやってみよう。
 
 
OL_02-75x117.png できたー!
ai_san01-75x85.png おっ、素晴らしいですね!
自分で考えて解決できると気分がいいですよね。
OL_02-75x117.png はいっ!
今日は、とっても気分がいいです。
帰りに、お祝いのケーキでも買って帰りたいです!
ai_san03-75x85.png この調子で頑張ってください。
最後に覚えておいてほしい点をまとめます。
今回のように、プログラムを改善したい場合、次の3点を心がけることです。
① 改善点のリストアップ
② リストに一つずつ取り組む
③ ライブラリの活用
OL_03-75x117.png ライブラリって?
ai_san03-75x85.png プロゼミでは、ブロックリストのことです。
自分が使ったことのない様々なブロックがありますよね。
それらを、読んだことのない本に例えて、「ライブラリ」といいます。
図書館で新しい本に出合うみたいに、プログラミングの際も、是非新しいブロックを見つけて、どんどん使ってみてください。
そうすれば、プログラミングの世界が広がりますよ!
OL_02-75x117.png ホントですね。
「新しい本に出合うみたいに」って聞くと、抵抗感が薄れてきますね。
プログラミングが楽しくなってきました。
先生、ありがとうございました!

いかがでしたか?
アプリと対話できるインタラクティブなプログラムの基礎を学べましたね。
入力と変数があると、よりアプリらしくなってきますよね。

次回は、「変数をマスターしよう」というテーマです。
今回出てきた「へんすう」を、さらに詳しく学びます。
お楽しみに!

著者プロフィール

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