マナティ

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

第7回 変数をマスターしよう

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

変数は「ハコ」と思え!

ai_san03-75x85.png 今日は、いよいよ変数にチャレンジしてみましょうか。
OL_01-75x117.png いよいよですね。
私にも分かるかなー?
ai_san05-75x85.png Mさんなら、きっと大丈夫ですよ。

プログラミングで、変数って何だと思いますか?
OL_05-75x117.png なんか数学でxとかyとか出てきたんですけど、あれと一緒ですか?
ai_san03-75x85.png そう思って頂いていいと思います。
数値を入れる「ハコ」とイメージしてもらえばいいかな。
「ハコ」を使えば、中身が変わっても「ハコ」は同じなので、
同じ手順でプログラミングできるんです。
OL_03-75x117.png なんとなく分かりますが、具体的にどうするんですか?
ai_san03-75x85.png 変数を使うときは、一定の手順があるんです。 その通りにすると、うまくいきますよ。
OL_03-75x117.png 一定の手順ですか。
ai_san03-75x85.png はい。
まず、最初に変数をつくります。ハコを用意することと同じです。
OL_03-75x117.png ハコだけ用意するんですか?
中身は?
ai_san03-75x85.png 最初に、ハコだけを用意します。
その次、2番目に、ハコに中身を入れます。
これを「初期化」といいます。
変数を作ったら、プログラムの最初に必ず「初期化」しておいてくださいね。
ハコだけ作って中身がないと悲しいですよね。
OL_05-75x117.png そりゃあそうですよね。
では、手順って、①「箱を作って」、②「中身を入れる」という2段階ですね。
ai_san03-75x85.png いえいえ違います。
「変数」ですから、中身が変わるんです。
OL_03-75x117.png ということは、3番目の手順は、「ハコの中身を変える」ですか?
ai_san03-75x85.png その通りです。
回数をカウントしたり、数字を足したり引いたり、色々な処理をします。
この「中身を変える」ことができるのが、変数の良さなんです!
OL_06-75x117.png 変数の良さ?
何が良いのかピンときませんけど?
ai_san03-75x85.png うーん。
お店でギフト用に商品を買ったら、きれいにハコに詰めて包装してくれますよね。
OL_01-75x117.png はい。
そのハコが気に入って、取っておくこともありますよ。
ai_san05-75x85.png ですよねー。
では、そのお店のハコに入る商品は1種類だけですか?
それとも、お店にある色々な商品を入れることができますか?
OL_03-75x117.png いろんな商品を入れることができますね。
あっ、そうか。それが「変数」なんですね!
ai_san03-75x85.png その通りです!
そして、最後に数値が変わったことを確認するといいですね。

まとめると、次のようになります。
①変数を作る
②変数の初期化
③変数の処理
④変数の確認

「習うより慣れろ」で、早速やってみましょう。
   
OL_05-75x117.png 先生、もうプログラムが書いてあるんですけど、何もしなくていいんですか?
ai_san03-75x85.png いえいえ。
007pic01-36x50.png007pic02-82x50.pngのプログラムはできていますが、
007pic03-46x50.pngのプログラムが未完成です。
そこで変数を使う練習をします。
OL_03-75x117.png 007pic03-46x50.pngのプログラムを開いてみよう。

007pic03a.png

OL_03-75x117.png 空欄がある部分を埋めればいいんですね?
ai_san03-75x85.png その通りです。でも、まず、 007pic04-117x50.pngをクリックしてみてください。
OL_01-75x117.png はい。
007pic05-162x50.pngというブロックがあります。
ai_san03-75x85.png これが、今回使う変数です。
「ぶつかったかいすう」では、あらかじめハコが用意されているんです。
ですから今回は、②初期化、③処理、④確認を意識しながら作ってみてください。
OL_03-75x117.png 了解です。

えーっと、②初期化は、スタートしたらすぐにすべきよね。
最初は、一回もぶつかってないので、「ぶつかった回数」は0かな?

007pic06.png

ai_san03-75x85.png 順調ですね。
Mさんが考えた通り、初期化は「スタートした」時点で行うといいですよ。
OL_03-75x117.png はい、分かりました。
では、次は、「③処理」ね。
ぶつかったら「ぶつかった回数」に1を足せばいいから、こうかしら。

007pic07.png

ai_san03-75x85.png いいですね!
その通りです。
では④確認はどこで行うといいですか?
OL_05-75x117.png そうですね、確認したいときにリクエストしたいから、「キャラがタッチされたら」今の数字をしゃべると良さそうね。

007pic08.png

ai_san04-75x85.png 冴えてますね!その通りです。
これで手順通りにできましたね。
今回学んだ4つの手順

①変数を作る
②変数の初期化
③変数の処理
④変数の確認

これらは、テキストプログラミングでも大切になってきますので、
必ず覚えておいてくださいね。
OL_05-75x117.png はい。

変数を使ってプログラムを改造しよう

ai_san03-75x85.png 次は、前回作った正n角形を描画するプログラムを、変数を使って改造してみましょう。
きっと、プログラミングの幅が広がり、面白くなると思いますよ。

お題は、「順番にnを増やしていって、正n角形を描く」というものです。
OL_01-75x117.png この前は入力してましたけど、今度は変数で自動的に変えていくんですね。
チャレンジしてみます!
OL_03-75x117.png まず、 007pic04-117x50.pngをクリックして、あっ、そうか、今回は、変数を作るところから始めないといけないんだ。
じゃあ、 pica.PNGをクリックしてみようっと。

007pic09.png

OL_03-75x117.png 変数の名前はどうすればいいんだろう?
ai_san03-75x85.png 紫の「へんすう」という部分をクリックすると、変更できますよ。
OL_01-75x117.png ありがとうございます。
「角の数」という名前にしよう。

 

 

OL_05-75x117.png できた。
ai_san01-75x85.png 結構簡単でしょう?
これで、「①変数を作る」はできましたね!
OL_05-75x117.png そうですね。
思ったよりとっつきやすいです。
ai_san03-75x85.png では、次の②に進んでみてください。
OL_05-75x117.png はい。
さっきと同じで、「スタートした」ときに最初の数字を入れるのね。
何を入れようかな?
最初は三角形だから、3だよね。

007pic07.png

ai_san01-75x85.png その調子です!
OL_05-75x117.png 次は、「③変数の処理」だから、
三角形のプログラムで、「3」となっていた部分を「角の数」にしてみよう。
そして、描き終わったら、「角の数」に1を足せばいいのかな?

007pic11.png

OL_02-75x117.png これで動かしてみよう。

 

 

OL_02-75x117.png やったー、できた!
私って天才!?
ai_san01-75x85.png 素晴らしいですね。
すごく応用力がありますよ!
これで、ほぼ完成ですが、最後に、「④変数の確認」を追加してみましょう。
最も手っ取り早い確認として、描画をしている間、矢印がしゃべるようにしてみましょうか。
OL_05-75x117.png はい、分かりました。
描画している間に、「正n角形」と表示すればいいから、ペンをおろす直前に、007pic12-283x50.pngを入れてみよう。

 

 

OL_06-75x117.png あれっ?
表示されるけど、向きがおかしいなー。
先生、これはどうすればいいんですか?
ai_san05-75x85.png これは私も想定外でしたね。
文字の向きがキャラの向きに連動して変化するんですねー。
OL_03-75x117.png 先生にも分からないんですか?
ai_san03-75x85.png こういうこともありますよ。
プログラミングに、トライ&エラーは付き物です。
別の方法を考えてみましょうか。

うーん、そうだなー。
向きが変わるとうまくいかないんだから…、
向きが固定された別のキャラを用意して、それにしゃべらせましょうか?
OL_05-75x117.png なるほど、ということは、「メッセージ」ですね!
ai_san03-75x85.png いいですね。
では、やってみてください!
キャラは、これ007pic13-70x70.pngを使いましょうか。
OL_05-75x117.png はい!
   

別のキャラに変数を渡すには?  引数の使い方

OL_03-75x117.png ということは、描画を始めるときに、女の子のキャラにメッセージを送って、
女の子のキャラがメッセージを受け取ったら、「正n角形」としゃべればいいのよね。

矢印のプログラムはこれでいいかな。

007pic14.png

OL_03-75x117.png 次は、女の子のプログラム。

007pic15.png

OL_03-75x117.png この2番目の空欄に、核の数を入れたら完成ね!

 

 

OL_03-75x117.png あれっ?
「へんすう」のところに、「角の数」がない!
先生、どういうことですか?
ai_san03-75x85.png ああ、なるほど。
矢印のキャラのところで作った変数「角の数」が、女の子のキャラでは表示されないということですね。
OL_06-75x117.png そうなんです!
矢印のキャラでは表示されるんですけど、女の子のキャラに変えると、消えてるんです。
ai_san03-75x85.png それは、変数が使える範囲が関係しています。
OL_07-75x117.png 変数が使える範囲?
ai_san03-75x85.png プログラミングゼミのレベル30までで使える変数は、「ローカル変数」といって、そのキャラでしか使えないように設定してあるんです。
OL_05-75x117.png へぇー。
だったら、女の子のキャラでは、矢印のキャラの中の変数は使えないってことですか?
ai_san03-75x85.png そうなりますね。
でも、変数は使えなくても、矢印のキャラから女の子のキャラにメッセージを送るとき、数字を同時に送ることはできますよ。
OL_03-75x117.png そうなんですか?
早く教えてほしいなー。
ai_san05-75x85.png それは、メッセージの「引数」といいます。

007pic16.png

007pic17.png

ai_san05-75x85.png ほら、メッセージを送るブロックと、受け取るブロックに、「+」の記号があるでしょう?
OL_03-75x117.png はい、ありますね。
ai_san03-75x85.png その「+」をクリックしてみてください。
まず、送り手、矢印のキャラの方から。
OL_05-75x117.png 分かりました。

 

 

OL_05-75x117.png 新しい空欄ができました。
ai_san03-75x85.png それが引数を入れる場所です。
そこに、変数の「角の数」を入れておいてください。
OL_03-75x117.png はい。
ai_san03-75x85.png 次に、受け手の女の子のキャラの方も同じようにしてください。
OL_03-75x117.png はい。

 

 

OL_03-75x117.png あっ、「ひきすう1」という変数が自動的にできました。
これはどうやって使うんですか?
ai_san03-75x85.png 「引数」とは、メッセージのおまけみたいなものです。
テレビのリモコンでチャンネルを変えたいとき、チャンネルの番号を直接指定するようなものです。
今回のように、送る側に引数を指定しておくと、受ける側はそれを使うことができます。
受け側で新しくできた「ひきすう1」を使いたい位置にドラッグして使います。
OL_03-75x117.png やってみますね。

 

 

OL_03-75x117.png 意外と簡単にできるんですね。
ai_san03-75x85.png いえいえ、Mさんは理解力がいいですね。
これで動かしてみてください。

 

 

OL_03-75x117.png できた―!
ふぅー、今回は、難しかったですね。
ai_san03-75x85.png かなり高度なことをやってますから、難しく感じますよね。
難しく感じるときは、復習しておくといいですよ。

まず、変数って何でしたか?
OL_02-75x117.png はい。
数値を入れる箱のようなものでした。
ai_san05-75x85.png どのような使い方をしますか?
OL_01-75x117.png ①作成
②初期化
③処理
④確認
この4つです。
ai_san01-75x85.png ちゃんと分かっていますよ。
その調子です。

では、引数って何ですか?
OL_01-75x117.png リモコンの数値みたいなものです。
でも、あまり良く分かっていません。
ai_san03-75x85.png ですよねー。
ここでは、「メッセージにつけるおまけ」というイメージで覚えておいてください。
今回のように、相手に変数を渡したいときに使います。
OL_10-75x117.png おまけは大歓迎ですが、引数のおまけはちょっと嫌かなー。
ai_san03-75x85.png ははは。
そうですよね。
今回はこれくらいの理解で十分ですよ。
使っていくうちに便利さが分かってくると思います。
今日は、お疲れさまでした!
OL_01-75x117.png ありがとうございました。

いかがでしたか? 変数と引数は、難しいですが、プログラムの幅が広がりましたね。
仕事で使う実用的なプログラムを作るときには、変数と引数は欠かせないツールです。
是非マスターしてください。

次回は、「リアルな動きを追求しよう」というテーマです。
「変数」を応用して、キャラの動きを細かく制御します。
お楽しみに!

著者プロフィール

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