第4話:数値変数と計算

第1部 JavaScriptプログラミングの基本

目次

マンガ


















マンガ台詞

【1Page】
先生:よし 本格的な プログラミングに 入っていくぞ
    今日のテーマは 数値変数と計算だ
遊:変数?
先生:そうだ 『変数』だ
    『変数』を制する者は プログラムを制する と言っても 過言ではない
麗:その『変数』とやら 是非知りたいですわ
守:僕も知りたいです
遊:(むっ:対抗意識を燃やして)
    はいはい 私も知りたいです
【2Page】
先生:おっ みんな やる気があるな
    さて 前回 プログラムの 処理の順番に ついて説明した
麗:上から下へ 左から右へという 順番でしたわね
先生:そうだ
    では このプログラムを見てくれ
        var a = 3;
3人:ぽかーん
【3Page】
守:何ですか これは?
先生:分からないだろう
遊:はいはい 意地悪はいいから さっさと教えてよ
先生:よし 教えてやろう
    プログラムは 左から右に順に読む
    それは分かっているな?
遊:それはさっき 麗が言ったわ
【4Page】
先生:ああ だから 『var a = 3;』は
    『[変数][a]は、[3]です([終わり])』 という意味になる
守:なぜ そうなるん ですか?
先生:分解して説明する
        var 『これから変数を書く』という宣言
        a   『変数の名前』
        =   『左部分の中身は、右部分です』という記号
        3   数字の3
        ;    この式は終わり、以降は次の式ですという記号
        これが『var a = 3;』の 意味になる
遊:はーい 先生
    だから『変数』って いったい何ですか?
【5Page】
先生:変数というのは 値を入れておく 箱のことだ
遊:箱?
先生:そうだ
    変数は『筆箱』
    変数に入れる数値は 『筆箱』に入っている 『鉛筆の数』と 考えればよい
     『var a = 3;』は
    筆箱『a』の中は 鉛筆が3本入っている ということだ
遊:分かったような 分からないような…
【6Page】
先生:よーし みんなに質問だ
        var a = 3;
        var b = 2;
        var c = a + b;
    この意味を説明してみろ
守:1行目は『変数aは3』 2行目は『変数bは2』 だと思いますが
    3行目が分かりません
先生:じゃあ このプログラムを 筆箱と鉛筆のたとえで 表現してみよう
        筆箱『a』は 鉛筆が3本
        筆箱『b』は 鉛筆が2本
        筆箱『c』は 筆箱『a』と筆箱『b』の合計の鉛筆
    さて 筆箱『c』の 鉛筆は何本か?
遊:筆箱『2』つ分だから 『2』本!
【7Page】
先生:ブブー 間違いだ
麗:『3 + 2』で 鉛筆は『5』本です
先生:ピンポン ピンポン! 正解だ
麗:おほほほほ(勝ち誇った表情)
遊:ぐぬぬぬぬ(悔しがっている表情)
遊:先生!
    その問題は 私には 難しすぎます!
    それに どうせやるなら 私が楽になることが いいです!
【8Page】
先生:じゃあ 数学の宿題を解く プログラムを 書いてやろう
遊:え!(目がキラキラ)
    なら 今日の宿題を お願いします
        Q.三角形の面積を 求めなさい
麗:あなたは 小学生ですか?
遊:ううっ
先生:(カタカタ)
        var teihen = 20;    // 変数『底辺』は20
        var takasa = 10;    // 変数『高さ』は10
        var menseki = teihen  takasa / 2;
            // 変数『面積』は計算結果
            // 『』は掛け算、『/』は割り算の記号
            // 変数『面積』に、「『底辺』掛ける『高さ』割る2」
            // の答えを入れる

        // 変数『面積』の内容をダイアログ表示
        alert(menseki);
【9Page】
    (ダイアログが表示される)
        『100』と表示
遊:やった! 宿題が解けたわ(小躍り)
麗:もっと難しい計算も 解けるのですか?
先生:ああ 解ける
    それじゃあ みんなのために JavaScriptで使える演算子や
    計算方法を紹介しておこう

説明

この章では、『数値変数』とその計算方法について学びます。

コンピュータは、人間よりも速く、そして正確に計算を行うことができます。そもそもコンピュータは、より速く確実に、そしてより大量の計算を行うために発達してきました。そういった要求に答えるために、プログラミング言語には、多くの計算を効率よく行うための仕組みが用意されています。

プログラムでは、計算を効率よく行うために『変数』という仕組みを利用します。JavaScriptの『変数』には、いくつかの種類があります。この章では、その『変数』の中でも、最も分かりやすい『数値変数』について解説していきます。

『変数』とは?

『変数』は、プログラムを書く上で最も重要なものです。変数は、箱のようなものです。この変数には、数値や文字列などを入れることができます。

たとえば宅配便を思い浮かべてください。荷物はダンボール箱に入っており、その箱に、送り状が貼ってあります。宅配便の会社では、このラベルを見て、集荷や配送をします。箱の中身は、その都度確認したりはしません。

プログラムの『変数』は、このダンボール箱のようなものです。変数には名前をつけて利用します。この名前(『変数名』と呼ぶ)は、宅配便の送り状のようなものです。そして、箱となる『変数』に、荷物となる値を入れて、様々な計算に使います。

それでは以下、簡単な例を見てみましょう。

var a = 3;

『var』というのは、「これから変数を書く」という宣言になります。『var』は「variable(変数)」という意味です。

『a』は、変数の名前です。これは、宅配便のダンボール箱に貼る送り状のようなものです。

『=』は、この変数に、右辺の値を代入するという意味になります。通常の数学の『=』(イコール)とは違う使い方なので、注意が必要です。

プログラムでは、『=』の右側の値を、左側の『変数』に代入します。上記の式では、数字の『3』は、『変数』に入れる値になります。最後の『;』(セミコロン)は、「この式はここで終わり」という意味になります。

参考

変数名のルール

半角の英数字、および『_』(アンダーバー)が利用できます。ただし、最初の1文字目として、数字を使用することはできません。

また、JavaScriptの文法に利用される語は利用できません。

可否 記入例 駄目な理由
hensuu
hennsuu_1
× 1hennsuu 最初の1文字目に数字は使用できない
× var JavaScriptの文法に利用される語は利用できない

変数を使った計算

先ほど『var a = 3;』という、変数『a』に数字の『3』を代入する式の説明を行いました。

この式の『=』(イコール)の右側には、数値だけではなく、計算式を書くこともできます。計算式を書いた場合は、『変数』に代入される値は、その式の計算結果となります。また、『=』の右側の式の中には、『変数』を書くこともできます。

以下、実例を挙げて説明します。

var a = 3;

var b = 2 + 2;
    // 『b』の中身は、『2+2』の結果である『4』

var c = a + b;
    // 『a + b』は、『「変数aの中身」+「変数bの中身」』
    // 変数『a』は、最初の行で定義したように『3』
    // 変数『b』は、2番目の行で計算したように『4』
    // 『a + b』は、『3 + 4』と同じ意味
    // 変数『c』の中身は『7』となる

マンガ中のプログラムの解説

マンガ中に登場したプログラムについても解説します。

var teihen = 20;    // 変数『底辺』は20
var takasa = 10;    // 変数『高さ』は10
var menseki = teihen * takasa / 2;
    // 変数『面積』は計算結果
    // 『*』は掛け算、『/』は割り算の記号
    // 変数『面積』に、「『底辺』掛ける『高さ』割る2」
    // の答えを入れる

// 変数『面積』の内容をダイアログ表示
alert(menseki);

『底辺×高さ÷2』の、面積を求める式を、プログラムで書いたものです。3行目の『menseki』の右辺に注目してください。『teihen * takasa / 2;』となっており、1行目、2行目で宣言した変数が登場しています。この『teihen』には数字の『20』が、『takasa』には、数字の『10』が入っています。

そのため、『teihen * takasa / 2;』の結果は『100』となり、変数『menseki』には『100』が入ります。

最後に『alert(menseki);』とすることで、変数『menseki』の値を、ダイアログで表示させています。

『変数』利用のメリット

変数を使うと、複雑な計算も分かりやすく書くことができます。また、変数の値を変えるだけで、同じ計算式を再利用できるようになります。

以下、簡単な例を示します。

【変数を使わずに記述した例】

alert(200*8*750);    // 『1200000』と表示

【変数を使って記述した例】

// 数字だけの式よりも意味を理解しやすく書ける
var roudouNissuu = 200; // 労働日数
var roudouJikann = 8;   // 労働時間
var Jikyuu = 750;   // 時給
var nennsyuu = roudouNissuu * roudouJikann * Jikyuu;    // 年収
alert(nennsyuu);    // 『1200000』と表示

// 値を変えた計算も簡単にできる
Jikyuu = 800;       // 時給
nennsyuu = roudouNissuu * roudouJikann * Jikyuu;    // 年収
alert(nennsyuu);    // 『1280000』と表示

様々な計算方法

プログラムは、コンピュータに様々な計算を行わせるための命令方法です。そして、プログラムを使えば、様々な計算を行うことができます。

以下、JavaScriptの計算で使える記号を紹介します。こういった記号のことを、プログラムでは『演算子』と呼びます。

算術演算子

演算子 意味 使い方 説明
+ 足し算 a = 1 + 2 変数『a』に、『1 + 2』の結果である『3』を代入
- 引き算 a = 1 - 2 変数『a』に、『1 - 2』の結果である『-1』を代入
* 掛け算 a = 1 * 2 変数『a』に、『1 * 2』の結果である『2』を代入
/ 割り算 a = 5 / 2 変数『a』に、『5 / 2』の結果である『2.5』を代入
% 剰余 a = 5 % 2 変数『a』に、『5 / 2』の余りである『1』を代入

その他の計算

意味 使い方 説明
Math.ceil(n) 小数点以下を繰り上げ a = Math.ceil(1.55); 変数『a』に『2』を代入
Math.floor(n) 小数点以下を繰り下げ a = Math.floor(1.55); 変数『a』に『1』を代入
Math.round(n) 小数点以下を四捨五入 a = Math.round(1.55); 変数『a』に『2』を代入
Math.abs(n) 絶対値 a = Math.abs(-10); 変数『a』に『10』を代入
Math.max(n,m) nとmの大きい方 a = Math.max(1,10); 変数『a』に『10』を代入
Math.min(n,m) nとmの小さい方 a = Math.min(1,10); 変数『a』に『1』を代入
Math.pow(n,m) nのm乗 a = Math.pow(2,3); 変数『a』に『8』を代入
Math.sqrt(n) nの平方根 a = Math.sqrt(4); 変数『a』に『2』を代入
Math.random() ランダム a = Math.random() 変数『a』に、0以上、1未満の乱数を代入

以下は、よく使う組み合わせです。

a = Math.floor(Math.random() * 100);    // 変数『a』に、整数0~99の乱数を代入
        // 1. Math.random()
        //    →「0 <= x < 1」になる実数x(0~0.99999…)
        //
        // 2. Math.random() * 100
        //    →「0 <= x < 1」になる実数x(0~0.99999…)を100倍する
        //    →「0 <= x < 100」になる実数x(0~99.999…)になる
        //
        // 3. Math.floor(Math.random() * 100)
        //    →「0 <= x < 100」になる実数x(0~99.999…)の小数点以下を切り捨てる
        //    →「0 <= x < 100」になる整数x(0~99)になる

以下は、難しい数学の計算なので、興味のある人だけご覧下さい。

三角関数

意味 使い方 説明
Math.PI 円周率π a = Math.PI; 変数『a』に『3.141592~』を代入
Math.sin(n) 正弦 a = Math.sin(90 / 180 * Math.PI); 変数『a』に『1』を代入
Math.cos(n) 余弦 a = Math.cos(180 / 180 * Math.PI); 変数『a』に『-1』を代入
Math.tan(n) 正接 a = Math.tan(45 / 180 * Math.PI); 変数『a』に『0.999~』を代入
Math.asin(n) 逆正弦 a = Math.asin(1) / Math.PI; 変数『a』に『0.5』を代入
Math.acos(n) 逆余弦 a = Math.acos(-1) / Math.PI; 変数『a』に『1』を代入
Math.atan(n) 逆正接 a = Math.atan(1) / Math.PI; 変数『a』に『0.25』を代入
Math.atan2(y,x) 座標xとyの角度 a = Math.atan2(99,1) / Math.PI * 180; 変数『a』に『89.42~』を代入

その他の特殊な値や計算

意味 使い方 説明
Math.SQRT2 2の平方根 a = Math.SQRT2; 変数『a』に『1.41~』を代入
Math.SQRT1_2 1/2の平方根 a = Math.SQRT1_2; 変数『a』に『0.70~』を代入
Math.E 自然対数e a = Math.E; 変数『a』に『2.71~』を代入
Math.LN2 eを底とした2の対数 a = Math.LN2; 変数『a』に『0.69~』を代入
Math.LN10 eを底とした10の対数 a = Math.LN10; 変数『a』に『2.30~』を代入
Math.LOG2E 2を底としたeの対数 a = Math.LOG2E; 変数『a』に『1.44~』を代入
Math.LOG10E 10を底としたeの対数 a = Math.LOG10E; 変数『a』に『0.43~』を代入
Math.LOG10E 10を底としたeの対数 a = Math.LOG10E; 変数『a』に『0.43~』を代入
Math.exp(n) eのn乗 a = Math.exp(2); 変数『a』に『7.38~』を代入
Math.log(n) eを底としたnの対数 a = Math.log(2); 変数『a』に『0.69~』を代入
参考

以下、中級者以上向け。

特殊な計算方法

JavaScriptでは、計算式を短く書くための方法が用意されています。

たとえば、以下のような式は、2行目のように短く書くことができます。

a = a + 5;
a += 5;    // 短く記述
a = a - 5;
a -= 5;    // 短く記述

なぜこういった書き方をするのかと言うと、「プログラムを短く書くことができる」からです。今のところ、例として出てくるプログラムはいずれも短いものです。しかし、この先、どんどんプログラムは長く、複雑になってきます。そういった際に、より短く、簡潔に書くことができれば、プログラムの読みやすさが格段に向上します。

現時点では、特に便利さは実感できないと思いますので、「こういった書き方もある」と頭の片隅に留めておけばよいです。

以下、上記の式について、少しだけ補足します。

『a = a + 5;』は、左側の変数『a』に、「元の変数『a』に5を足した値」を入れる、という計算です。『a += 5;』は、左側の変数『a』に、5を足した値を入れる、という計算です。どちらも結果は同じになります。

同じように、掛け算や割り算でも、同じ方法が利用できます。

a = a * 5;
a *= 5;    // 短く記述
a = a / 5;
a /= 5;    // 短く記述

また、1を足したり、1を引いたりする計算は、以下のようにさらに短く書くことができます。

a = a + 1;
a += 1;    // 短く記述
a ++;      // さらに短く記述
a = a - 1;
a -= 1;    // 短く記述
a --;      // さらに短く記述

さらに高度な計算

JavaScriptでは、ここで紹介した方法以外にも、様々な高度な計算方法があります。

それらは、一度に紹介しても混乱すると思いますので、ここでは割愛しておきます。

ある程度、プログラムが書けるようになったら、本やWebを利用して、詳しい情報を調べてみてください。

エラーへの対処

プログラムを書いていると、書き損じや、計算のミスなどによって、エラーが出ることがあります。

例)

aleert(a);      // 『alert』が『aleert』になっている
alert("文字);   // 『"~"』が『"~』になっている
a = 10 / 0;     // 数字は0では割ることができない

エラーの内容と場所は『コンソール』で確認できます。コンソールは、以下の手順で確認できます。どのPC向けブラウザでも共通です。

  1. [F12]キーを押す。
  2. 「コンソール」(Console)タブを選択する。
  3. エラーの内容が表示されている。また、そのファイルと行数も書いてある。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(c = a + b;)を表示

sample2.html』(三角形の面積)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2018 Cronus Crown (c)1997-2018 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。