1-3 変数と関数
ソースコードは、数値や文字列を扱う
変数と、計算式やコンピューターへの命令を一つのまとまりにした
関数で構成されます。
ここではJavaScriptの変数と関数について説明します。
(1)変数
プログラミングでは数値や文字列（テキスト）を変数という文字記号で管理します。
JavaScriptでは変数を
varで宣言します。宣言とはその名称の変数を使うとコンピューターに教えることです。
プログラミング言語の変数は、数学の変数とほぼ同じ概念ですが、変数に値を入れる時に = を用いるところが数学と違います。
数学の = は 左右の式が等しい時と最終的な答えを記述する時に使いますが、プログラミングにこれらの意味はございません。
また掛け算と割り算の記述、そして数を比較する記述に数学と違いがあり、それらを順に説明します。
【例１】
var x = 10;
var y = x * x;
var z = 50 / x;
JavaScriptを含む多くのプログラミング言語で、掛け算はアスタリスク * 、割り算は スラッシュ / で記述します。
そして変数宣言や命令の区切りにセミコロン ; を記述します。
この例では xの値は10、yの値は100、zの値は5 になります。
変数はコンマで区切り羅列して宣言することができます。
【例２】
var a = 3, b = 2;
var c = a + b;
var d = a - b;
この例では cの値は5、 dの値は1 になります。足し算と引き算は数学と同じ + - で記述します。
変数で
文字列を扱うことができます。
【例３】
var n1 = "鈴木";
var n2 = "太郎";
var san = "さん";
var namae = n1 + n2 + san;
この例では namae の値は 鈴木太郎さん となります。
文字列を扱う場合は + で文字列をつなげることができます。
変数宣言のvarや処理を行う命令(if、forなど)を
予約語といいます。
変数名は予約語と被らなければ、アルファベット、もしくはアルファベットと数字で任意につけることができます。変数名にアンダーバー _ を含めることもできます。
○ var mikan = 100;
○ var book_1 = 100, book_2 = 500;
× var 12a = 0; ←数字から始まる変数名は使えません
× var else = 99; ←else は 予約語のため使えません
大文字も使うことができ、以下のように記述した場合、それぞれ別の変数として扱われます。
var apple = 1000;
var Apple = 2000;
但し、似たような変数名に大文字小文字を混在させるとソースコードが判りにくくなります。変数名は基本的に小文字とし、値を変えることのない定数を大文字で記述すると良いでしょう。
var yen = 0; ←プログラム内で変化する値は小文字で
var ZEIRITSU = 0.08; ←一度宣言したら変更しない値を大文字とする
var myScore, yourScore; ←単語の頭文字を大文字にすれば見やすい変数名になるので、これは推奨される
変数の宣言
C系言語やJavaでは変数は必ず宣言してから使いますが、JavaScriptはvarの宣言無しに使うことができてしまいます。
しかし宣言せずに使った変数は意図せぬ挙動をすることがあります。変数は必ず var で宣言するようにしましょう。
また一般的なプログラミング言語の変数名は半角英数字と_のみ使用できますが、JavaScriptでは全角日本語でも変数名をつけることができます。
使い方によっては見やすいソースコードとなるかもしれませんが、変数名はプログラミングの基本ルールにのっとり半角英数字としましょう。
(2)算術演算子
算術演算子は、足し算(＋)、引き算(－)、掛け算(×)、割り算(÷)を行う記述のことで、JavaScriptでは次のように記述します。
| a = a + 1; もしくは a++; | aに１足す |
| a = a + 10; もしくは a += 10; | aに１０を足す |
| b = b - 1; もしくは b--; | bから１引く |
| b = b - 20; もしくは b -= 20; | bから２０を引く |
| x = x * 5; もしくは x *= 5; | xに５を掛ける |
| y = y / 2; もしくは y /= 2; | yを２で割る |
四則算の他に、割り算の余り（剰余）を求める演算子 % があります。
| 10%3 | １０を３で割った余りで、１となる |
| 9%3 10%2 100%25 | 割り切れる場合は０となる |
| a=12; b=5; c=a%b; | Ｃの値は２となる |
変数と算術演算子で何をするのでしょう？
ゲームでは点数を保持したり、キャラクターの座標を管理します。
例えば点数を管理する変数を var score; と宣言し、ゲームを開始する処理で score = 0; と記述して値を 0 にします。
そしてザコ敵を倒したら score = score + 100; と記述するとscoreが100加算されます。
ボスを倒したら score = score + 10000; として１万点を加算するというように使います。
主人公キャラの位置座標(X,Y)を管理する場合 var playerX, playerY; と宣言し、ゲーム開始時に初期値を入れます。
コンピューターの画面は横方向がＸ軸、縦方向がＹ軸で、左上の角が原点座標(0,0)です。
左に移動する入力があれば playerX -= 10; 右に移動する入力があれば playerX += 10; とし、
(playerX,playerY)の位置にキャラクターの画像を表示します（この場合左右に10ドットずつ動く）。
これを繰り返すことでキャラクターを動かす仕組みです。
(3)関数
関数とは変数の計算やJavaScriptの命令をひとまとまりにして、何らかの処理を行わせるものです。
関数は
function の後に任意の関数名を記述して定義します。関数名の付け方は変数名のルールと一緒で、関数は名称の後に()を記述します。
【例１】
var a = 1, b = 1;
function daisyo() {
if( a > b ) alert( "bよりaが大きい" );
if( a < b ) alert( "aよりbが大きい" );
if( a == b ) alert( "aとbは等しい" );
}
{ から } までがその関数の処理になります。
ifは()内の条件が成り立った時、続けて記述した処理を行う
条件分岐の命令です。
この例で関数daisyo()が実行されると「aとbは等しい」というメッセージが表示されます。
a = 10, b = 0; などa > b の値で実行されると「bよりaが大きい」、a < b の値で実行されれば「aよりbが大きい」と表示されます。
２つの変数や数が等しいか調べるには == と記述します。数を比較する記述を
関係演算子もしくは
比較演算子といいます。
※条件分岐と関係演算子は
1-4 で説明します
次は税抜き金額から税込み金額を計算する関数の例です。
【例２】
function zeikomi( yen ) {
var yen2 = yen * 1.08;
var kingaku = Math.floor( yen2 );
return kingaku;
}
この関数では()内に
引数と呼ばれる変数 yen を記述しています。
JavaScriptの引数はvar宣言が不要です。
Math.floor は 少数点以下を切る命令です（下の補足を参照）。return は後ろに記述した変数の値を返す命令で、関数が返す値を
戻り値といいます。
次のように引数に税抜き金額を与え、この関数を呼ぶことで税込み金額を返す処理になります。
var drink_p = zeikomi(100);
var book_p = zeikomi(1200);
drink_p の値は108となり、book_pの値は1296となります。
Math.floorの注意点
Math.floorを小数点以下を切り捨てる命令と説明するサイトが多いですが、厳密には違います。
値が０以上の時は切り捨てになりますが、負の値では以下のようになります。
・Math.floor(-0.01) → -1 になります
・Math.floor(-9.8) → -10 になります
つまりMath.floorはその値を超えない最大の整数にする命令となります。
例１は戻り値の無い関数、例２は戻り値がある関数です。関数は戻り値があるかないかの２つに大別されます。C系やJavaでは戻り値の有無で関数を宣言する
宣言子を変えますが、JavaScriptの関数の宣言子はfunctionのみとなります。
ゲーム制作では例えば
・主人公を動かす関数
・敵キャラを動かす関数
・背景を描画する関数
というように、まとまった処理ごとに関数にすることで、効率が良く見やすいソースコードを書くことができます。
前のページへ ／ 次のページへ
