ステップ１：変数をつくる

変数○○をつくるには、プログラムの最初にvar ○○;と書きます。varは変数の英語variableの略称です。

この○○は変数の名前です。これは『箱』につける名札のようなものです。例えばvar age;、var year;、var speed;など、変数には自由に名前をつけることができます。

ステップ２：変数に数字を代入する

変数○○に25を代入するには、○○=25;と書きます。=記号は「代入する」と読みましょう。例えば、age=25;は、変数ageに25を代入します。

ステップ１：変数をつくる

四角形（rectangle）の幅(width)を表す変数rectWidthをつくりましょう。

変数rectWidthをつくるには、プログラムの最初にvar rectWidth;と書きます。

ステップ２：変数に数字を代入する

変数rectWidthに四角形の幅140を代入しましょう。rectWidth=140;と書きます。

ステップ３：変数を使う

⇨ 例題22-3を実行しよう

変数rectWidthに数字の140を代入すると、140と書く代わりに変数rectWidthと書くことができます。

つぎの例題22-3を実行して確認しましょう。

ステップ４：変数に数字を代入する

⇨ 例題22-4を実行しよう

変数を使うと、３つの四角形の幅をまとめて変えることができます。

例えば、変数rectWidthに260を代入すると、３つの四角形の幅が260に変わります。

例題22-4の変数rectWidthに様々な数字を代入して実行してみましょう。

ステップ５：完成

⇨ 例題22-5を実行しよう

draw関数のなかで、変数rectWidthにmouseXを代入するとどうなるでしょうか。例題22-5を実行して確認しましょう。

ステップ１：変数をつくる

⇨ 例題22-1にプログラムを書こう

円の直径を表す変数diameterをつくりましょう。プログラムの最初にvar diameter;と書きます。

図を参考にしながら、var diameter;を例題22-1の最初に書いてください。

ステップ２：変数に数字を入れる

⇨ 例題22-2にプログラムを書こう

つぎに、変数diameterに80を代入しましょう。diameter=80;と書きます。

図を参考にしながら、例題22-2にdiameter=80;を書いてみましょう。

ステップ３：変数を使う

⇨ 例題22-3にプログラムを書こう

これで、80の代わりに変数diameterと書くことができます。

図を参考にしながら例題22-3の80を変数diameterに書き直しましょう。

ステップ４：変数に数字を代入する

⇨ 例題22-4にプログラムを書こう

変数diameterを使って、６つの円の大きさをいっぺんに20に変えてみましょう。

図を参考にしながら、例題22-4の変数diameterに20を代入してください。

変数diameterに様々な数字を代入して試してみましょう。

ステップ５：発展

⇨ 例題22-5を実行しよう

例題22-5では、変数diameterに対してかけ算やわり算を行ってみました。