【6日でできるJavaScript入門】変数の演算

　変数を使う大きな利点の一つは、四則演算や文字の連結などさまざまな操作を簡単に行えることです。ここでは、JavaScriptで利用可能な演算子の基本から、インクリメント／デクリメント、文字の足し算までを学びます。

１．演算子の記述

　JavaScriptでは、数値の計算を行うために演算子を用います。半角の +, -, *, / などを組み合わせて式を記述しましょう。

1.1. 演算子の記述方法

ファイル名： lesson06-1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>➕ 基本の演算サンプル</title></head>
<body>
  <h1>🔢 演算子の基本</h1>
  <script>
    let a = 5 + 3;        // 足し算
    let b = 10 - 4;       // 引き算
    let c = 6 * 7;        // 掛け算
    let d = 20 / 5;       // 割り算
    console.log(a, b, c, d);
  </script>
</body>
</html>

デバックコンソールの出力

8 6 42 4

解説

5 + 3 や 10 - 4 など、半角演算子で数学的な式を記述
console.log(...) で計算結果を確認

1.2. JavaScriptで使用できる演算子

以下は主要な算術演算子の一覧です。

演算子	説明	記述例
`+`	足し算	`18 + 31`
`-`	引き算	`53 - 24`
`*`	掛け算	`80 * 1.5`
`/`	割り算	`55 / 6`
`%`	剰余（余り）	`70 % 12`
`**`	べき乗	`2 ** 8`

補足

数式中に変数を含めたり、() で演算順序を制御したりできます。

let x = 300;
let y = 700;
let z = (x + y) * 1.1;  // 1100

２．インクリメントとデクリメント

1ずつ増減させる操作は、プログラムでよく使われるパターンです。

2.1. インクリメント (`++`)

ファイル名： lesson06-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔼 インクリメント</title></head>
<body>
  <h1>1ずつ増やす</h1>
  <script>
    let n = 5;
    n++;                // n = n + 1 と同じ
    console.log(n);     // 6
  </script>
</body>
</html>

デバックコンソールの出力

2.2. デクリメント (`--`)

ファイル名： lesson06-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔽 デクリメント</title></head>
<body>
  <h1>1ずつ減らす</h1>
  <script>
    let m = 5;
    m--;                // m = m - 1 と同じ
    console.log(m);     // 4
  </script>
</body>
</html>

デバックコンソールの出力

３．プログラムならではの記述

JavaScriptの代入式は「左辺に右辺を代入する」という意味です。

たとえば

let a = 5;
a = a + 3;  // aに3を足した結果を再びaに代入
console.log(a); // 8

解説

a = a + 3 は数学的には不正確でも、プログラムでは「元の a に3を足して新しい a とする」操作として成立します。

４．文字の足し算（文字列連結）

演算子 + は文字列同士の結合にも使えます。

4.1. 文字列連結の例

ファイル名： lesson06-4.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📝 文字連結サンプル</title></head>
<body>
  <h1>👋 文字の足し算</h1>
  <script>
    let str = 'ようこそ';
    str = str + '東京へ';
    alert(str);  // 「ようこそ東京へ」

    let answer = 52;
    alert('答えは' + answer + 'です'); // 「答えは52です」
  </script>
</body>
</html>

動作

「ようこそ東京へ」アラート表示
「答えは52です」アラート表示

ブラウザの出力例

解説

str + '東京へ' で文字列を連結
数値変数も + で文字列と結合可能
文字列に対しては「足し算」のみ対応し、「引き算」はできない。

まとめ

　既に説明した内容をまとめます。基本的な演算子、インクリメント/デクリメント、代入パターン、文字列の連結の4つのエリアについてです。これらの内容は、動的な電卓、カウンター管理、メッセージ生成、データフォーマットなどに活用できます。

ここで解説した内容は以下の４点です。

算術演算子の利用
・+, -, *, /, %, ** を使って数値の四則演算やべき乗、剰余を記述
・変数や括弧 () を組み合わせて計算順序や動的な式を制御
インクリメント／デクリメント
・n++（n = n + 1 相当）で値を１ずつ増やし、m--（m = m - 1 相当）で値を１ずつ減らす
・カウンタの更新やループ処理で頻出するシンプルな構文
自己代入パターン
・a = a + 3 のように、変数自身に演算結果を再代入する書き方
・値を段階的に蓄積・更新したいケースで活用
文字列連結
・+ 演算子で文字列同士、または文字列と数値を結合
・ユーザー向けメッセージ生成や動的な表示内容の構築に便利

　これらの基本操作をマスターすることで、数値計算やデータの組み立てといったプログラムの基礎的な処理を簡潔に記述できるようになります。

【6日でできるJavaScript入門】変数の演算