変数とfunctionで、はてなボックス出現！：初心者のためのJavaScript入門（3）（2/3 ページ）

[小島尚基，有限会社インテレクトキューブ]

変数の名前の付け方

　変数に付ける名前は、英字の「a〜z、A〜〜Z」、数字「0〜9」、「_（アンダースコア）」を使うことができます。ただし、「1ban」のように名前の最初に数字を付けることはできません。

　名前の長さは特に制限はありませんが、あまり長いと使いにくいので、分かりやすい名前にすることをお勧めします。

　特に気を付けなくてはいけない点として、英字の小文字と大文字は区別されます。例えば、「Hensu」と「hensu」は別の変数として扱われてしまいます。

　また、予約語といって、JavaScriptが使っている文字は使えません。以下のものがJavaScriptの予約語です。

	abstract	debugger	finally	int	short	typeof
	boolean	default	float	interface	static	var
	break	delete	for	long	super	void
	byte	do	function	native	switch	volatile
	case	double	goto	new	synchronized	while
	catch	else	if	package	this	with
	char	enum	implements	private	throw
	class	export	import	protected	throws
	const	extends	in	public	transient
	continue	final	instanceof	return	try

ここに挙げた以外に、false、null、trueが使用できません。

変数に入れられるもの

　変数の使い方を理解してもらえたでしょうか。「変な数」ではなく、中身を「変えることができる数」と考えれば良いですね。

　変数には数字以外にも好きなものを入れられます。例えば、先ほどのサンプルの「a」と「b」の中身に、

var a="アットマーク";
var b="・アイティ";

のように文字を入れることもできます。

　変数は奥が深く、ほかにも色々なものを変数に入れたり、便利に使ったりする方法がたくさんあるのですが、すべてを解説すると変数だけで終わってしまうので、今回はここまでにしておきます。

functionって何？

　functionはファンクションと読みます。日本語にすると数学用語の関数になります。

　関数なんて聞くと、数学アレルギーの人は拒絶反応を起こしそうですが、数学の問題を解かなくても使えますので、安心してください。

　そもそも関数ってどんなものでしょう。今度は、「中身の分からない箱」をイメージしてください。箱には「入口」と「出口」が付いています。絵で書くと、このような感じになります。

　この中身の分からない箱の入り口に適当な数字を入れてみましょう。入り口に数字を入れると、別の数字が出口から出てきます。

　入り口から「1」を入れたら、出口から「2」が出てきました。次に、「2」を入れたら、今度は「4」が出てきました。そして、「3」を入れたら、今度は「6」が出てきました。

　どうやら、この箱に数字を入れると、入れた数字が2倍になって出てくるようです。これを仮に「数字が2倍になる箱」と呼びましょう（そのまますぎるネーミングですが……）。

　今度は別の箱に数字を入れてみます。見た目は同じ箱ですが、入り口から「1」を入れたら「1」が出てきます。数字を入れても変化がないのでしょうか。

　次に、「2」を入れたら、今度は「4」が出てきました。2倍になったのでしょうか。そして、「3」を入れたら、今度は「9」が出てきました。

　分かりましたか。この箱は「数字が2乗になる箱」ですね。このように、箱に「入れた数に対応した数が出てくる」のが関数のイメージです。

　関数のイメージがつかめたら、最初の「数字が2倍になる箱」をJavaScriptの関数で書いてみましょう。

function nibai(x) {
    var y=x*2;
    return y;
}

　JavaScriptで関数を使うには、最初にfunctionと書きます。続いて、関数に名前を付けます。この関数は、「入れた数が2倍になる関数」なので、ローマ字で「nibai」という名前を付けました。

　関数の名前のルールは、変数と同じです。英字の「a〜z、A〜Z」、数字「0〜9」、「_（アンダースコア）」を使うことができます。2倍だからといって「2bai」のように名前の最初に数字を付けることはできません。

　名前の次に、「(x)」と書いてあります。これは、関数の入り口になります。どんな数が入るか分からないので、数字の代わりにxという変数が書いてあります。数字ではなく、変数を使うことで入れる数字が自由に変えられるというわけです。

　関数の入り口に使う変数のことを、特別に引数（ひきすう）と呼びます。無理に呼ばなくても良いのですが、入り口の変数というよりは何となく専門用語っぽくてカッコいいですね。

　引数として入り口の変数を用意するときに、varを付ける必要はありません。

　次の「{」は関数の始まりを表しています。最後の「}」と対応していて、この{ }に囲まれた部分が関数の中身になります。

　2行目の「var y=x*2;」には、どんな意味があるのでしょうか。var yのyは変数です。varは変数に名前を付ける時に使う約束でしたね。最後に付いている「;」はJavaScriptの区切りです。

　このように、変数には別の変数や、変数の計算結果を入れることもできます。ここでは、変数yにxを2倍した計算結果を入れています。こうすることで、入り口の変数xの値が変化すると、自動的に変数yの値も変化します。

　次の「return y;」は、箱の出口にあたります。returnはリターンと読みます。英語そのままの「返す」という意味で、変数yを返すというJavaScriptになります。

　先ほどからの流れで、変数yはxを2倍した数字なので、「xを2倍した数字を返す」と読み換えることができます。つまり、これで「数字が2倍になる関数」となっているわけです。