変数の仕組みを理解しよう

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

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

チャプター2基本図形を表示しよう

このレッスンでは、変数の仕組みを学習しよう。

2. 1 写してみよう

var x = 70;

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  ellipse(x, 200, 120, 120);

  x = x + 130;
  rect(x, 200, 120, 120);

  x = x + 130;
  triangle(x, 140, 390, 260, 270, 260);

  noLoop();
}

コードがかけたら実行してみよう。
丸と四角と三角が表示されたらOKだよ。

---

2. 2 コードの解説

var 値1;

変数は数値は文字のデータの保存や書き換えが可能

createCanvas(値1, 値2)

キャンバス要素を作成し、その寸法をピクセル単位で設定します。

値1： キャンバスの幅
値2： キャンバスの高さ

rectMode(CENTER)

rectMode（CENTER）は、rect（）の最初の2つのパラメータを形状の中心点として解釈し、3番目と4番目のパラメータはその幅と高さです。

background(値1)

背景に使用する色を設定します。デフォルトの背景は透明
値1: 色

noLoop

draw（）内のコードを連続して実行するのを停止します。

変数とは

プログラムを書くときには、さまざまなデータをさまざまなところで使うんだ。

ときには長い文字列や、同じ数値・計算式を何度も繰り返し使うことがあるよ。そのたびに同じデータを書き込むのは面倒です。そんなときに役立つのが変数なんだ。

変数とは、さまざまな文字列や数値を入れておく箱とイメージしていただくとわかりやすいね。

その箱に便宜上の名前（変数名）をつけ、中身のデータの代わりに変数名を書き入れて使い回すことで、同様の処理が簡単に行えるようになるんだ。

変数の書き方

p5.jsでは、変数を次のように書くんだ。

var 変数名 = 999; //数値の場合
var 変数名 = “文字列”; //文字列の場合

最初の「var」というのは、英語で「variable」の略だよ。variableは、日本語で変数という意味なんだ。最初にvarと書くことで、変数（値を入れる箱）を新たに作ることができるんだ。

変数の中に入れるのは、「＝」の右側にある値だよ。「=」は代入演算子（だいにゅうえんざんし）といって、右側の数値や文字列データを左側の変数に入れるんだよ。算数や数学と違って、イコール（左側と右側の値が等しい）という意味ではないから注意が必要だね。

代入した数値や文字列データのことを、変数の「値」というんだよ。

数値と文字列

"..."（ダブルクォーテーション）または '...'（シングルクォーテーション）で囲われたテキストは文字列だよ。

基本的には、どちらを使ってもいいよ。だけど同じプログラムの中では、ダブルクォーテーションとシングルクォーテーションのどちらかを統一して書くようにしよう。

数値は、"..."（ダブルクォーテーション） または '...'（シングルクォーテーション）で囲わないから注意だね。

チャプター3コンソールログで値を確認しよう

このチャプターでは、変数xの数値を確認してみるよ

ここまでの見本20

3. 1 変更しよう

13行目・17行目・21行目にコンソールログの出力を追加してみよう。

   function draw() {
     background(220);
 
+    console.log(x);
     ellipse(x, 200, 120, 120);
 
     x = x + 130;
+    console.log(x);
     rect(x, 200, 120, 120);
 
     x = x + 130;
+    console.log(x);
     triangle(x, 140, 390, 260, 270, 260);
 
     noLoop();

左下のコンソールログエリアに数値が確認できたら、OKだよ。

ここまでの見本21