javascript – 02 “変数”

“変数”という言葉を聞いたことがあるでしょうか?
おそらく皆さん中学数学で聞いたことがあるはずですが、忘れている方が多いでしょう。
y = f(x) のことを “yはxを変数とする関数” って言うみたいな表現がなされたかなーと思います。

プログラムの世界にも変数という概念が存在します。
難しいものではありません。

まずは実際に変数を使用しているコードをご覧いただきましょう。

// 1. "num"っていう変数を使うことを宣言
let num;

// 2. numに123を代入
num = 123;

// 3. numに num + 1 を代入
num = num + 1;

// 4. numを出力
console.log(num);

多くのサイトでは変数は「箱」のイメージであると説明しています。
しかし、私は「箱」というイメージではないのです。
どちらかというと「名前を付ける」に近いと思ってます。

  1. 「”num”っていう変数を使うことを宣言」
    “num”っていう”名前”を用意します。別に”num”でなくても構いません。好きな”名前”で大丈夫です。”hensuu”とかでもOK。
    「名前を用意する」ことを「変数宣言する」あるいは「宣言する」と言います。
    宣言の際に使用するのが”let”という構文です。
    “let 変数名” で宣言ができます。
  2. 「numに123を代入」
    「”123″のことを”num”って名前で呼ぶことにする」ということです。
    「”値”を”変数”で呼ぶことにする」ことを「代入する」と言います。
    書き方は「変数名 = 値」です。
    この行以降で”num”と呼ばれたら”123″のことを指します。
  3. 「numにnum+1を代入」
    “num”は”123″のことを指すんでしたね。つまり”num + 1” は “123 + 1″ということになります。答えは”124″です。
    その答えを”num”に代入しています。この行以降、”num”は”124″のことを指します。
  4. console.logは前回の最後に出てきてましたね。
    console.log(値)で「”値”を出力する」ものです。上記コードでは「numを出力する」となっています。
    つまり「124を出力する」ということです。

上記コードは最終的に124を出力するコードです。
なんとなく雰囲気は掴めたでしょうか?

ちなみに上記コードでは宣言と代入を分けていますが、宣言と同時に代入することができます。普通は分けずに同時に行います。

// 宣言
let num;
// 代入
num = 123;

// 宣言と代入を同時に行う
let num = 123;

わかった気はするけど何に使うの?

プログラムを書いていると、色々と計算することがあります。
色々と計算するためにプログラムを書いていると言っても良いかもしれませんね。

例えば、お買い物したときの金額を計算するとしましょう。
「321円の商品を12個購入したときの税抜金額と消費税額、税込金額」を出力したいとします。
変数を使わないで書いたらこんな感じです。

// 税抜金額を出力
console.log(321 * 12);

// 消費税額(10%)を出力
console.log(321 * 12 * 0.1);

// 税込金額(10%)を出力
console.log(321 * 12 * 1.1);

別に難しくないですよね。(プログラムの世界ではかける(×)はアスタリスク(*)になります。)
それでは「321円の商品を12個」でなく「456円の商品を39個」計算するように書き換えてみましょう。

“321”を”456″に書き換えて(3か所)、”12″を”39″に書き換えます(3か所)。
計6か所書き換えましたね。

次に変数を使って「321円の商品を12個」買った時の計算をしてみます。

// 金額
let price = 321;

// 数量
let qty = 12;

// 税抜金額
let subtotal = price * qty;

// 消費税
let tax = subtotal * 0.1;

// 税込金額
let total = subtotal + tax;

// 税抜金額を出力
console.log(subtotal);

// 消費税額(10%)を出力
console.log(tax);

// 税込金額(10%)を出力
console.log(total);

書く量が倍以上に増えてるじゃないか!変数を使わない方が簡単だ!と思いましたか?
全くその通りですね。でも先ほど同様に「456円の商品を39個」に書き換えてみましょう。

あら不思議。変数priceへ代入している部分と、変数qtyに代入している部分の2か所を書き換えるだけでOKではありませんか。
変数を使わない場合と比べて1/3の労力です。

これが変数を使う最大の利点です。
“値”だけを使ってプログラムを書くと後の変更が死ぬほど面倒になるわけです。

型について

“値”には”型(type)”が存在します。
簡単なところだと

  • 「123」のような数値
  • 「hakodate」のような言葉(プログラムの世界では文字列と言います)

などがあります。これらはすぐイメージできると思います。
ですが世の中にはもっとたくさんの型が存在し、実生活において皆さんはそれらを使い分けています。
いくつか書いてみましょう。

  • 整数(123, 2, 10000, -921, -42.0, 0)
  • 実数(3.14, -1324.12, 2.0, 0.0)
  • 文字列(函館, りんご)
  • 真偽値(YesかNoか)(true, false)
  • NULL
  • 配列
  • 連想配列
  • オブジェクト

などがあります。

型はプログラミング言語によって扱いが違います。
javascriptだと整数も実数も「number」型ですが、C言語だとint, uint, float, doubleなど色々と細かく分かれます。

また、javascriptには特別な型であるundefinedなどもあります。
おいおい説明します。

型はやりながら覚えた方が早いので、そんなものがあるんだーくらいの認識で構いません。
それでは今回はここまで。

また次回お会いしましょう。