数値変数と計算

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第4話:数値変数と計算

目次



マンガ




















マンガ台詞

【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文字目に数字は使用できない
×varJavaScriptの文法に利用される語は利用できない



変数を使った計算

先ほど『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.SQRT22の平方根a = Math.SQRT2;変数『a』に『1.41〜』を代入
Math.SQRT1_21/2の平方根a = Math.SQRT1_2;変数『a』に『0.70〜』を代入
Math.E自然対数ea = Math.E;変数『a』に『2.71〜』を代入
Math.LN2eを底とした2の対数a = Math.LN2;変数『a』に『0.69〜』を代入
Math.LN10eを底とした10の対数a = Math.LN10;変数『a』に『2.30〜』を代入
Math.LOG2E2を底としたeの対数a = Math.LOG2E;変数『a』に『1.44〜』を代入
Math.LOG10E10を底としたeの対数a = Math.LOG10E;変数『a』に『0.43〜』を代入
Math.LOG10E10を底とした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リファレンス - 演算子
参考:とほほのJavaScriptリファレンス - 数学関数(Math)



特殊な計算方法

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では割ることができない

エラーが発生した場合は、Internet Explorerなら、ブラウザの左下に、三角形に『!』マークの警告記号が現れます。

この記号をダブルクリックすると、エラーダイアログが表示されます。『詳細の表示』ボタンをクリックすれば、『ライン:3』のように、何行目にエラーが出ているのか表示されます。

警告記号が現れない場合は、ブラウザを閉じたあと、再度起動して、HTMLファイルを読み込ませてみてください。警告記号が表示されるようになります。



サンプルの入手

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

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

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

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

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

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




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