変数の使い方

広告

まずは変数とは何かについて簡単に確認してみます。

数は値を保存しておくための箱のようによく言われます。この箱には数値や文字列などの値を保存することができ、そしていつでも取り出したり改めて違う値を保存することができます。

では順に2倍していき順に結果を表示するようなプログラムの場合を考えてみます。変数を使用しない場合は毎回毎回最初から2倍をしていかなければなりません。 

document.write("<p>" + 1 * 2 + "</p>");
document.write("<p>" + 1 * 2 * 2 + "</p>");
document.write("<p>" + 1 * 2 * 2 * 2 + "</p>");
document.write("<p>" + 1 * 2 * 2 * 2 * 2 + "</p>");

少ない回数ならこれでもいいですけどこの計算を100回も繰り返すことを考えたら毎回毎回計算していくのは非効率です。

そこで変数を使います。変数は値を保管しておくための箱のようなものです。そこで計算を行ったら変数に一度保存しておきます。そして変数に保存された値を取り出して2倍していくことを繰り返します。(具体的な記述方法などは次のページ以降で解説します)。 

var num = 1;

num = num * 2;
document.write("<p>" + num + "</p>");

num = num * 2;
document.write("<p>" + num + "</p>");

num = num * 2;
document.write("<p>" + num + "</p>");

num = num * 2;
document.write("<p>" + num + "</p>");

プログラムの行数が増えてしまっていますが、無駄な計算は行われず前回の計算結果を利用して効率良く計算が行われています。

今回は計算結果を一時的に保存するために変数を利用しましたが、変数に数値が格納されている場合には変数に対して直接演算を行ったり、ユーザーが入力した値を変数に保存しておきプログラムの中で何度でも利用するといったことも可能です。変数を使わなければ実現できないことや、変数をうまく使用することで効率的にプログラムを記述することができるようになります。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</body>
</html>

var num = 1;

num = num * 3;
document.write("<p>" + num + "</p>");

num = num * 3;
document.write("<p>" + num + "</p>");

num = num * 3;
document.write("<p>" + num + "</p>");

num = num * 3;
document.write("<p>" + num + "</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

( Written by Tatsuo Ikura )