[ JavaScript : 基礎習得講座 II ] 変数/定数と四則演算

本記事では、JavaScriptのプログラム上でデータを格納する「変数・定数」の定義方法から四則演算の書き方までをご紹介させて頂きます。

サンプルコードも掲載させて頂いておりますので、学習や使い方の参考にして頂ければ嬉しいです。

JSファイルの作成と実行方法 :
https://utubou-tech.com/js_01/

✅   「変数・定数」の定義方法
✅   四則演算の記述方法
✅   算術演算子/代入演算子を理解出来る
✅   複合代入演算子を理解出来る

学習用のファイルを準備

まず、内容に入っていく前に今回使用するファイルの準備をしましょう。
HTMLファイルを準備しますので、以下のコードをコピペしたファイルを作成してください。

※ JSコードは、HTMLに埋め込みながら動作させていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js_sample2</title>
    </head>
    <body>
        <script>
            <!-- ここにJSコードを記述していきます。 -->
        </script>
    </body>
</html>

変数と定数

変数

変数とは、プログラム上で扱うデータ(文字列, 論理値, 数値, 小数値…)を入れるための箱のようなものです。

変数の特徴としては、以下のようになっております。

① 初期値(最初の値)を定義時に設定しなくても良い
② 値の再代入が可能 (変数内の値の変更が可能)
③ 定義する際に「let」を変数名の前につける

変数の使い方を見ていきましょう。
以下のコードをはじめに作成して頂いたHTMLファイルのscriptタグ内に入力してください。

// 変数の定義 : 変数名(num), 初期値なし
let num;
// 変数の定義 : 変数名(num2), 初期値あり
let num2 = 10;
// 変数(num)へ値の代入
num = 1;
// 値の再代入(更新)が可能
num2 = 15;

// 変数の出力 (変数名のみでもOK)
// 文字列と変数を連結させたい時は、半角で「+」を間に書いてあげる 
console.log("変数 : numの値は、" + num + "です。");
console.log("変数 : num2の値は、" + num2 + "です。");

[ 実行結果 ]

定数

定数とは、プログラム上で扱うデータ(文字列, 論理値, 数値, 小数値…)を入れるための箱のようなものである点は、変数と変わりませんが、具体的な違いがありますので、使い方を間違えないようにしましょう。

定数の特徴としては、以下のようになっております。

① 初期値(最初の値)を定義時に設定するのが必須
② 値の再代入が不可(定数内の値の更新ができない)
③ 定義する際に「const」を定数名の前につける

定数の使い方を見ていきましょう。
以下のコードを変数用のサンプルコードのすぐ下に追加入力していきましょう。

// 定数の定義 : 定数名(num3), 初期値必須
// const num3; のような書き方はNG
const num3 = 15;

// 値の再代入(更新)が不可 (決まった値のみを使用(一定)/外部からの変更などを防ぐ事が出来るため、セキュリティ面で有効)
//num3 = 20; のような書き方をして、値を再代入することは出来ない

// 定数の出力 (定数名のみでもOK)
// 文字列と定数を連結させたい時は、半角で「+」を間に書いてあげる 
console.log("定数 : num3の値は、" + num3 + "です。");

[ 実行結果 ]

四則演算

四則演算とは、主に加算(+), 減算(-), 乗算(*), 除算(/), 剰余(%)などの演算子を用いた計算方法になります。演算を行う上でも様々な演算子があり、代入演算子や単項演算子, +や-などの算術演算子などが挙げられます。

今回はその中でも算術演算子と代入演算子についての活用法をご紹介します。

単項演算子については、入門編④の繰り返し処理(ループ処理)にて扱っていきます。

算術演算子/代入演算子

加算(+), 減算(-), 乗算(*), 除算(/), 剰余(%)などの演算子のことを算術演算子と言い、「=」を代入演算子と言います。
ここで注意しないといけないのが、プログラミングをする上では、掛け算は、「×」ではなく「*」になり、割り算は、「÷」ではなく「/」になります。

また、剰余は、余りのことです。こちらは、%を用いますので、覚えておきましょう。

算術演算子の使い方を見ていきましょう。
以下のコードを定数用のサンプルコードのすぐ下に追加入力していきましょう。

//四則演算 : 算術演算子/代入演算子
let　num4 = 10;
let　num5 = 5;

// 加算 (+)
kasan = num4 + num5;
console.log("加算 : " + kasan);

// 減算 (-)
genzan = num4 - num5;
console.log("減算 : " + genzan);

// 乗算 (*)
jyouzan = num4 * num5;
console.log("乗算 : " + jyouzan);

// 除算 (/)
jyozan = num4 / num5;
console.log("除算 : " + jyozan);

// 剰余 (%)
jyouyo = num4 % num5;
console.log("剰余 : " + jyouyo);

[ 実行結果 ]

複合代入演算子

代入演算子の一つである複合代入演算子とは、四則演算をする際に各演算式を省略して書いてあげる事ができるものになります。
イメージとしては、以下をご覧ください。

複合代入演算子の使い方を見ていきましょう。
以下のコードを算術演算子用のサンプルコードのすぐ下に追加入力していきましょう。

//四則演算 : 複合代入演算子
let num6 = 2;

// 加算 (+)
kasan += num6;
console.log("加算 : " + kasan);

// 減算 (-)
genzan -= num6;
console.log("減算 : " + genzan);

// 乗算 (*)
jyouzan *= num6;
console.log("乗算 : " + jyouzan);

// 除算 (/)
jyozan /= num6;
console.log("除算 : " + jyozan);

// 剰余 (%)
jyouyo %= num6;
console.log("剰余 : " + jyouyo);

[ 実行結果 ]