作成ファイル・保存場所
js-basic フォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| js-basic02.html | 変数と演算子の基本を学ぶHTMLファイル |
| js-basic__02.html | 算術演算子・代入演算子・複合演算子・インクリメント演算子 |
基本コード(HTML)は下記からコピー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 02</title>
</head>
<body>
<h1>JavaScriptで計算しよう！</h1>
<script>
// 変数に数値を保存
// 文字列と数値の結合（+ を使う方法）
// 結果を一度変数に入れてから出力する方法
// 再代入＋テンプレートリテラルで出力（バッククォートと ${}）
</script>
</body>
</html>
JavaScriptは <script> タグの中に直接書きましょう（内部JS）
今回のテーマ
JavaScriptでは「値（データ）」を変数に保存し、計算することができます。
今回は「変数」「演算子（+ – * / %）」を使って、数値の計算とその結果の表示を体験します。
目的
let(変数宣言)を使って変数に値を保存できるようになる+,-,*,/,%を使って基本的な計算ができるようになるconsole.log()で計算結果を開発者ツールで確認できるようになる- 文字列と計算結果のつなぎ方も学び、テンプレートリテラルの基本を体験する
- 順次処理の理解
チェックポイント
letを使って変数を宣言・代入できているか- 各演算子の意味と計算結果を正しく理解できているか
console.log()で出力を確認できているか'文字列' + 数値、および`文字列${}`を使って出力できているか
解説
変数とは？
let a = 10;
let を使って変数宣言された a という名前の箱（変数）に、10 という数を入れた状態です。
数字などの値をそのまま使うのではなく、「名前をつけた箱（変数）」に代入して使うことで、あとから再利用したり、計算したりできます。
JavaScriptでは、変数を宣言するためのキーワードとして、let や const（値が変更不可の変数）を使います。
昔は var というキーワードも使われていましたが、動作が直感的でなく、バグの原因になることがあるため、現在では非推奨とされています。
そのため、基本的には let または const を使うようにしましょう。
演算子とは？
JavaScriptでは、変数や値を「計算」するために 演算子 を使います。以下は代表的な数値用の演算子です
| 記号 | 名前 | 説明 | 例（a=10, b=3 のとき） |
|---|---|---|---|
+ | 足し算 | 左と右の数を足す | a + b → 13 |
- | 引き算 | 左から右の数を引く | a - b → 7 |
* | 掛け算 | 左と右の数を掛ける | a * b → 30 |
/ | 割り算 | 左を右で割る | a / b → 3.333… |
% | 剰余 | 左を右で割ったときの余り | a % b → 1 |
剰余 % は「割り切れなかったときの余り」が出ます。
例：10 ÷ 3 は 3 余り1 → 10 % 3 は 1 となります。
文字列と出力の方法
JavaScriptでは、文字列と変数をつなぐには + を使います。 たとえば、次のように書くと文字列と計算結果をつなげて表示できます。これは「文字列連結（string concatenation）」といいます。
console.log('合計は ' + result + ' です'); // + を使った方法
ただし、このような書き方は 複数の要素をつなぐと見づらくなることがあります。 そこで便利なのが、テンプレートリテラル という記法を使います。
console.log(`合計は ${result} です`); // テンプレートリテラル
- テンプレートリテラルは、バッククォート（`） で囲みます（Shift + @）
- ${} の中に変数や式を書くことで、その値が文字列に埋め込まれます。
- 複雑な文でも読みやすく、エラーも起きにくくなるのがメリットです。
まずは + を使った基本の結合を理解し、「見づらいな」と 感じたらテンプレートリテラルへ切り替える流れがスムーズです。見やすさから、近年では、テンプレートリテラルが使われています。
HTML/JavaScriptトレーニング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 02</title>
</head>
<body>
<h1>JavaScriptで計算しよう！</h1>
<script>
// 変数に数値を保存
let a = 10;
let b = 3;
// 文字列と数値の結合（+ を使う方法）
console.log('a + b = ' + (a + b)); // 足し算
console.log('a - b = ' + (a - b)); // 引き算
console.log('a * b = ' + (a * b)); // 掛け算
console.log('a / b = ' + (a / b)); // 割り算
console.log('a % b = ' + (a % b)); // 剰余（余り）
// 結果を一度変数に入れてから出力する方法
let result = a + b;
console.log('合計は ' + result + ' です');
// 再代入＋テンプレートリテラルで出力（バッククォートと ${}）
result = a - b;
console.log(`差額は ${result} です`);
result = a * b;
console.log(`掛けると ${result} です`);
result = a / b;
console.log(`割ると ${result} です`);
result = a % b;
console.log(`余りは ${result} です`);
</script>
</body>
</html>
ステップアップトレーニング
演算子をさらに使ってみよう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 02</title>
</head>
<body>
<h1>JavaScriptで計算しよう！</h1>
<script>
// -------------------------------
// 【1】算術演算子（+ - * / %）
// -------------------------------
let price = 1200;
let tax = price * 0.1;
let total = price + tax;
console.log(`税込価格は ${total} 円です`);
// -------------------------------
// 【2】代入演算子
// -------------------------------
// = は「右側の値を左側の変数に代入する」という意味です
let x = 5;
x = x + 3; // xに3を足して再代入
console.log(`xの値は ${x} です`); // 8
// -------------------------------
// 【3】複合代入演算子（+=, -=, *=, /=, %=）
// -------------------------------
// 複合代入演算子は、右の値を使って計算し、左の変数にまとめて代入する省略記法です
// たとえば「x = x + 3」は「x += 3」と書けます
let result = 100;
result += 50; // → 150
result -= 30; // → 120
result *= 2; // → 240
result /= 4; // → 60
result %= 3; // → 0（60 ÷ 3 の余り）
console.log(`resultの最終値は ${result} です`);
// -------------------------------
// 【4】インクリメント・デクリメント演算子（++ / --）
// -------------------------------
// 1ずつ増やす（++）または1ずつ減らす（--）ための演算子です
// 「count += 1」と「count++」はほぼ同じ意味です。
let count = 0;
count++; // 1
count++; // 2
count--; // 1
console.log(`カウントは ${count} です`);
</script>
</body>
</html>