第1回　Javascriptで計算してみよう（定数を理解しよう）

定数とは、定まっている値のことです。
前回、前々回と変数に値を代入して変更をひたすら繰り返しましたが、
定数は定まった値のため、変更することができません。一定です。一方通行です。絶対に変更ができません。

定数の宣言

ちなみに定数は下記のように設定します。

const PI = 3.14;

1	const PI = 3.14;

定数 PIに3.14の円周率を設定します。
これでPIは3.14になりました。もう変更はできません。
プログラムを書き換えない限りはずっとPIは3.14です。
そして、PIを使って円の面積を求める場合は以下のように書けます。

半径 * 半径 * PI

1	半径 * 半径 * PI

ここで疑問に思う人が出てくるかもしれません、その疑問はズバリ
「定数を使う意味がわからない」ということじゃないですか？
わかります。「定数が変えられないものなら直接書いても問題ないはずだ！」
つまりこのように3.14を直接書いてもいてもいいんじゃないか？
という疑問です。

半径 * 半径 * 3.14

1	半径 * 半径 * 3.14

もちろん問題ありません、ですが、少し想像して見ましょう。

あなたは円周率3.14を多用したプログラムを作っています。
その中で円周率を定数を使わずに直接プログラムに3.14と書いていたとします。
ある日、宇宙の物理法則が変わって円周率が3.15になりました。
もし、地球が存続していた場合、プログラムを修正する必要があります。
これはまずいです。今までプログラムに書いたすべての3.14を3.15に書き換えなければなりません。

しかし、円周率3.14を定数PIとしてプログラム書いていた場合はどうでしょうか？
変更は一行修正するだけで完了します。

//円周率が変わったので定数変更
  const PI = 3.15

1 2	//円周率が変わったので定数変更 const PI = 3.15

スマートです。
物理法則の変更にも柔軟に対応できます。
たとえ、また円周率の変更があっても、この一行の修正ですべて解決です。
定数を利用するケースが何となく理解できましたか？

魔法の数字

今回の例のようにプログラム中に記述された具体的な数値は
プログラムを書いた人にしか理解できず他人が理解することが困難であることから
「マジックナンバー」と呼ばれます。
仕事でマジックナンバーを書いてしまうと、他のプログラマの迷惑になるケースもあるので、
日頃から意識していきましょう。
※プログラムに数値を使う場合はなるべく定数に入れてわかりやすいように
　しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src=lec06.js></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

lec06.js

//定数に値を格納
const PI = 3.14;

//変数に値を格納
var Radius = prompt('求めたい円の半径を入力してください');

//定数と変数を計算
var Answer = Radius*Radius*PI;

//画面に表示
//`${}`で変数を囲むことで＋を使わなくても文字列を連結することができます。
//バッククォートはshiftキーと「@のキー」で入力できます。
document.write(`半径${Radius}の円の面積は${Answer}`);

//定数に値を格納

const PI = 3.14;

//変数に値を格納

var Radius = prompt('求めたい円の半径を入力してください');

//定数と変数を計算

var Answer = Radius*Radius*PI;

//画面に表示

//`${}`で変数を囲むことで＋を使わなくても文字列を連結することができます。

//バッククォートはshiftキーと「@のキー」で入力できます。

document.write(`半径${Radius}の円の面積は${Answer}`);

プロンプト(prompt)について覚えていますか？
以前コンソールに書きましたね。
その時は説明はしなかったのですが、ここで説明します。
promptはweb上で入力された文字、数値を変数に格納するものです。

var Radius = prompt('求めたい円の半径を入力してください');

//入力された文字や数値を受け取って変数や関数に渡すことができます。
//シングルクォーテーションで囲まれた文字列は入力する人へのメッセージです。

var Radius = prompt('求めたい円の半径を入力してください');

//入力された文字や数値を受け取って変数や関数に渡すことができます。

//シングルクォーテーションで囲まれた文字列は入力する人へのメッセージです。

まとめ

定数は決まった文字列や変数を格納するもので、変更ができない。
プログラムに書かれた特定の数値はマジックナンバーと呼ばれ
プログラムの修正に影響が出るため、なるべく使わないようにする。
プロンプトはwebの入力を受け取ることができる
バッククォートで囲まれた文字列の中に『${変数}』を書くことで
『+』を使わずに文字を連結することができる。

課題

コンソールでconstの値が上書きできないことを確認しよう

下記のプログラムは一般的に定数にしたほうが良い数値が含まれています。
どこを定数にした方が良いか考えてみましょう。そしてVS Codeでプログラムを
作成して実際に確認してみよう。

var product_price1 = 500;   //商品1の金額 500円
var product_price2 = 600;　 //商品1の金額 600円
var product_price3 = 700;   //商品1の金額 700円

//税込金額
var IncludeTax1 = product_price1*1.08;
var IncludeTax2 = product_price2*1.08;
var IncludeTax3 = product_price3*1.08;

//内容確認
document.write(IncludeTax1);
document.write(IncludeTax2);
document.write(IncludeTax3);