レッスン 5

変数を使ってみよう

変数を使ってプログラムをしていきます。

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2はじめに

レッスン

このレッスンでは、変数について学びます。変数はプログラミングをする上でとても重要です。さっそく、変数を使ったプログラミングを試していきましょう。

チャプター3変数をつかってみよう

3. 1 写してみよう

以下のコードを写して実行しましょう。

var diameter = 100

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(10);
  noFill();
  ellipse(150, 150, diameter, diameter);
  ellipse(250, 150, diameter, diameter);
  ellipse(150, 250, diameter, diameter);
  ellipse(250, 250, diameter, diameter);
}

3. 2 コードの解説

変数diameterを用いて、円を描いています。

1行目
- varは、「変数を宣言する」という命令です。varのあとにあるdiameterは英語で直径という意味の英単語です。つまりdiameterが変数の名前となっています。
- さらに、= 100は「diameterを100にする」という意味です。これを代入（だいにゅう）といます。
12行目〜15行目
- 変数diameterは100なので、100と置き換えても同じ結果になります。

3. 3 変数とは

変数は文字通り、変化させられる数字です。同じ名前がついた変数は、代入していろいろな値に変化させることができます。

チャプター4変数の値を変更してみよう

4. 1 変更しよう

変数のメリットを感じるために、次のようにコードを変更しよう。

- var diameter = 100

+ var diameter = 200

コードが書けたら実行してみよう。次のように、すべての円が200の大きさになっていればOKです。

4. 2 コードの解説

変数の値が変わると、その名前の変数の値は全て変わります。
変数を200に変更すると、4つの円の大きさが全て変わりました。

4. 3 変数を使うメリット

プログラムに変数を使うメリットはいくつかあります。

修正がラク
何度も同じことを書かなくて良い

などです。

さらに、あとに学習するアニメーション（図形を動かす）際にも必要となります。

チャプター5変数について詳しくなろう

5. 1 変更しよう

  ellipse(150, 150, diameter, diameter);
  ellipse(250, 150, diameter, diameter);
  ellipse(150, 250, diameter, diameter);
  ellipse(250, 250, diameter, diameter);
+ ellipse(width/2, height/2, diameter, diameter);
}

コードが書けたら実行してみよう。次のようになっていればOKです。

5. 2 コードの解説

widthやheightはp5.jsであらかじめ決められている変数です。
キャンバスの大きさの横幅の値がwidth、縦幅の値がheightとなります。
width/2の/2は「横幅わる2」つまり横方向の半分という意味です。
試しにキャンバスのサイズを変更しても、中心の円の位置はずれません。

5. 3 システム変数

width(),height()
- 上で説明した通り、p5.jsのシステムで定められている変数です。キャンバスサイズに連動して変化するため便利です。

5. 4 変数の命名

変数の名前を決めるときに、いくつか注意すべきことがあります。

変数名に使えないものがある
- 変数に例えば、drawは使えません。drawは関数として名前がつけられているものだからです。
先頭を数字にしてはいけない
- 例えば、1diameterのような名前をつけることはできません。

以下はプログラムが動作しないという訳ではありませんが、心がけたいことです。

変数の名前は、名前からその意味が分かりやすい方が良い（プログラムが長くなればなるほど、大切です）
- 例えば、diameterを、単純にdとしても良いですが、dだけだと他の意味をもつdistance（距離という意味）と混乱する場合が考えられるためです。
2つ以上の単語をつなげて命名する場合は、2つめの単語の先頭を大文字にするとみやすい。
- 例えば、正方形の大きさという意味でrectsizeとするより、rectSizeとした方が読みやすいです。

5. 5 システム変数

widthやheightのように、システムで予め名前がつけられている変数をシステム変数といいます。変数名として自分で使うことができないので注意しましょう。

5. 6 変数の演算

演算については、あとで詳しく学びます。変数や数字に演算子「+,-,*,/」などを使うことで、コードをわかりやすくすることができますね。

チャプター6チャレンジしよう

次のような図形を描いてみよう。

ヒント

rectMode(CENTER)を用いた方が正方形の場合は位置が分かりやすいね。
正方形のサイズは40で描いているけど、あとから変更できるようにしておこう。
キャンバスのサイズが変更されても、中心に描かれるようにコードを工夫しよう。

チャプターを全部クリアしよう！

前のレッスン次のレッスン