変数について理解する
ここではプログラミングの重要な概念である「変数」について詳しく解説します。少し抽象的な話になりますが、まず念頭に置いてほしいのが、「変数」は小難しいもの、複雑なものではなく、プログラミングをする人間にとって非常に便利なものだということです。
「変数」の理解を進めるために、次の「お題」を考えていきます。
お題
正方形の画面を描き、その四隅に大きさが等しく位置が対称になる円を１つずつ書いてください。
※例えば以下の図のようになればOKです。細かな大きさや位置は変わってもOK。
考え方：「変数」を利用しない場合
まずは「変数」を利用せずに考えましょう。以下に、筆者の考え方と「変数」を利用しない場合のコードを記しますが、いい機会なので、どういう風に考えてコードを書けばいいか自分なりに試行錯誤から目を通すようにしてください。
まずは与えられたお題を前から順に見ていきます。
正方形の画面を描き、
画面を描くのは「size()」でしたね。正方形を描けばよいので、十分な大きさを確保する意味で横幅、縦幅をそれぞれ「400」に指定しましょう。
size(400, 400);
これでとりあえず画面はできました。あとは四隅に４つの円を描くだけです。ポイントは「４つの円の位置が対称」、「大きさは同じ」というところです。円を描くので、使うのは「ellipse()」ですね。忘れてしまった人は基本の図形：円で復習しましょう。
まず、「大きさは同じ」は簡単そうです。計４つ描く円の半径をすべて同じ値にすればいいだけです。あまり大きく描くと円がかぶってしまいそうなので、「100」くらいにしましょうか。
次に４つの円の位置（座標）を決めましょう。まずは左上の円の位置を決めて、それに従って他の場所の位置を決めることにしましょうか。
円の直径は「100」（つまり半径は「50」）に指定したので、左上の円の座標は「(80, 80)」くらいにしてみましょうか。
size(400, 400);
ellipse(80, 80, 100, 100);
これで左上隅から横に「80」、縦に「80」離れたところに直径「100」（半径「50」）の円が描けました。次に右上隅に円を描きます。右上隅の座標は「(400, 0)」なので、中心の座標は「(400 - 80, 80)」、つまり「(320, 80)」にすればいいですね（下図参照）。
同様に、左下隅の円の中心の座標は「(80, 400 - 80)」、つまり「(80, 320)」となり、右下隅は「(400 - 80, 400 - 80)」、つまり「(320, 320)」となります。
よってコードと実行結果は以下の通り。
size(400, 400);
ellipse(80, 80, 100, 100);
ellipse(320, 80, 100, 100);
ellipse(80, 320, 100, 100);
ellipse(320, 320, 100, 100);
「変数」を利用しよう
さて、先ほどのコードをもう一度見てみましょう。
size(400, 400);
ellipse(80, 80, 100, 100);
ellipse(320, 80, 100, 100);
ellipse(80, 320, 100, 100);
ellipse(320, 320, 100, 100);
このコードに用いられている数字は、実は３種類しかありません。それは「400」と「80」と「100」です。
※「あれ？320は？」と思った方がいるかもしれませんが、「320」は「400 - 80」と等しいので、「400」と「80」で表現可能です。
このコードは同じ数字が何度も登場しています。最初はそれでいいかもしれませんが、例えば「円の直径を100から120に変えたい」と思ったら、計８箇所を修正しなければなりません。これはとても面倒な作業になります。
こうした手間は、「変数」を用いることで省略することができます。
細かな説明は後にして、まずは実際にコードを修正してみましょう。
まず、「変数」には好きな名前（半角英数字のみ）を付けることができます。
現在使っている数字について、対応する「変数」の名前を付けていきましょう。
円の横方向と縦方向の位置を決めているのが「80」という数字です。数学のお約束に習い、ここでは横方向を「x」、縦方向を「y」という変数名にしてみましょう。コード上では下記のように「変数」を使うよという「宣言」をします。
int x = 80;
int y = 80;
この「宣言」をした下の行から、「変数」をコード上で利用することができるようになります。（ちなみに「int」は「integer(整数)」の略）
同様に、円の直径も「変数」にしてしまいましょう。ここも数学に習って「r」にしましょう（厳密には直径なので「diameter」ですが、「radius(半径)」を用いるのが一般的です）
int r = 100;
あれ？「400」は？と思った方もいるかもしれません。実は、「size()」の中で使う数字は変数で指定することができません。その代わり、一度「size()」で指定した横幅、縦幅はそれぞれ「width」、「height」という変数でいつでも再利用することができます。こういった、すでにシステム側で用意してくれている変数は「システム変数」と呼びます。参考までに。
あとは、元々のコードを「変数」を利用する形で修正していきます。例えば、
ellipse(80, 80, 100, 100);
は、最初の「80」を「x」、次の「80」を「y」、直径である「100」を「r」に書き換えましょう。
ellipse(x, y, r, r);
次に、右上の円を描いていた行を書き換えます。
ellipse(320, 80, 100, 100);
「320」は「400 - 80」でしたね。この「320」は円の横方向の座標を指定している事に注意すると、「400」は画面の横幅、「80」は円の横方向の位置を示しています。したがって「width - x」と書き換え可能です。
ellipse(width - x, y, r, r);
左下の円を描いていた行はどう書き換えられるでしょうか。
ellipse(80, 320, 100, 100);
ここでの「320」は円の縦方向の座標を示しているので、画面の縦幅を表す「height」と円の縦方向の位置を表す「y」を用いればOKです。
ellipse(x, height - y, r, r);
右下の円については、右上と左下の円の書き換えを参考に、自分で考えてみてください。最終的なコードは次の通りです。
int x = 80;
int y = 80;
int r = 100;
size(400, 400);
ellipse(x, y, r, r);
ellipse(width - x, y, r, r);
ellipse(x, height - y, r, r);
ellipse(width - x, height - y, r, r);
では実行してみましょう。書き換え前と同じ画面が表示されるはずです。
変数の活用
コードが抽象的になったことで、修正を加えることが非常に容易になります。
試しに、円の直径を変えてみましょう。
int r = 150;
直径を「100」から「150」に変更しました。この１箇所の変更だけで、４つの円の大きさが変わります。１行だけ変更して再度実行してみましょう。
また、下２つの円だけ大きくしたいなら、このように記述することもできます。
ellipse(x, y, r, r);
ellipse(width - x, y, r, r);
ellipse(x, height - y, r + 50, r + 50);
ellipse(width - x, height - y, r + 50, r + 50);
「r」を「100」に戻して実行してみてください。画像のようになったらOKです。
さらに、コードの途中で変数を書き換えることもできます。
int x = 80;
int y = 80;
int r = 100;
size(400, 400);
ellipse(x, y, r, r);
ellipse(width - x, y, r, r);
r = 150;
ellipse(x, height - y, r, r);
ellipse(width - x, height - y, r, r);
このコードの実行結果は、先ほどと同じになるはずです。プログラムは原則として上の行から順に実行されるので、「r = 150」の前までは最初の「宣言」通り「r」は「100」として扱われ、「r = 150」の行で「r」に「150」が代入されたのちは、「r」は「150」として扱われます。
その他、「x」、「y」、「size()」の中の数字を変えたらそれぞれどのような変化が起こるかいろいろ試してみてください。
変数のデータ型
「変数」を「宣言」する際、「int」という前置きをしました。
int x = 80;
前述の通り、「int」は「integer（整数）」の略です。この前置きをすることで、「x」という変数は「整数」という「データ型」を入れる”箱”であると「宣言」することができます。
このとき、例えば「x」を「80.5」などの小数にしようとしても、はじめに「x」は「整数」であると「宣言」したことと矛盾し、エラーとなってしまうので注意してください。
データ型には例えば以下のようなものがありますが、必要に合わせて覚えていけば十分です。
- 整数 int
- 小数 float
- 色情報 color
- 文字 char(characterの略)
- 真偽値 boolean
理解度チェック
ここまで学習が済んだら、レベル1：直線の動きの繰り返しに挑戦してみましょう。