変数とは

変数とは、値を保持しておくための箱のようなものです。

まずは例をあげて説明していきます。

以下ではログを出力しながら解説していきます。
ログ出力について詳しく知りたい方は、以下の入門コースの解説をご覧ください。

オンラインエディタ を開き、次のコードを記述してください。

function setup() {
  createCanvas(400, 400);
  let x = 100;
  console.log(x);
}

function draw() {
  background(220);
}

コードを実行すると、コンソールに 100 と出力されたと思います。

コードを解説します。

let x = 100;
console.log(x);

この部分で、変数 x を宣言し、値として100を代入しています。
そして、変数 x の値をログ出力しています。

値を保持するための箱として変数を用意することを、宣言するといいます。
そして、変数に値を入れることを代入するといいます。

let x = 100;

この1行で、変数 x を宣言し、値として100を代入することを意味しています。
変数の宣言には let という構文を使います。

変数は宣言だけしておいて、あとで値を代入することもできます。
例えば、次のように書くこともできます。

let x;
x = 100;

変数は値を何度も代入し直すことができます。
例えば、

let x;
x = 100;
console.log(x);
x = 200;
console.log(x);

上記のコードを実行すると、100 と 200 がログ出力されます。

変数のスコープについて知っておく必要があります。
変数のスコープとは、変数の有効範囲のことです。

例えば、次のコードはエラーとなります。

function setup() {
  createCanvas(400, 400);
  let x = 100;
  console.log(x);
}

function draw() {
  background(220);
  console.log(x); //エラー
}

setup 関数で宣言した変数 x を、draw 関数でも利用しようとしています。
しかし、これはエラーとなります。
変数は宣言された関数の内部でしか利用できないのです。
このことを、変数のスコープが関数の内部に制限されているといいます。

しかし、setup 関数でもdraw 関数でも同じ変数を利用したいケースがあります。
その場合、次のように書くことができます。

let x = 100;

function setup() {
  createCanvas(400, 400);
  console.log(x);
}

function draw() {
  background(220);
  console.log(x);
}

関数外で宣言した変数は、どの関数からでも使用することができます。
このような変数を グローバル変数 といいます。