- Day 4：演算子（前半）
- 演算子とは何か
- 算術演算子
- 比較演算子
- 論理演算子
- 代入演算子
- 実践1：消費税込み価格計算
- 実践2：割引価格計算
- 演算子と「安全な計算」の関係
- Day 4前半のまとめ
- Day 4：演算子（後半）
- 演算子を組み合わせて「意味のある処理」にする
- 消費税込み価格計算を丁寧に組み立てる
- 割引価格計算を条件付きにしてみる
- 演算子をまとめて使う価格計算テンプレート
- Day 4後半のまとめ
- Day 4：演算子とミニ課題のゴール
- 演算子の基本を電卓の視点で整理する
- ミニ課題：簡単な電卓プログラムを作る
- Step 1：電卓の「入力部分」をコードで表現する
- Step 2：演算子に応じて計算するロジックを書く
- Step 3：入力が数値かどうかをチェックする
- Step 4：少しだけ拡張した電卓テンプレート
- Day 4ミニ課題のまとめ
Day 4：演算子（前半）
Day 4前半では、JavaScriptでよく使う「演算子」をまとめて整理していきます。 演算子は、値どうしを計算したり、比較したり、条件を組み合わせたり、変数に値を代入したりするための「記号」です。 ここでは、算術演算子・比較演算子・論理演算子・代入演算子を、初心者向けにかみ砕いて説明し、最後に「消費税込み価格計算」と「割引価格計算」の実践まで進めます。
演算子とは何か
値と値の「関係」を表す記号
演算子とは、値と値の関係や操作を表す記号です。
- 足し算や引き算をする → 算術演算子
- 大きい・小さい・等しいかを調べる → 比較演算子
- 条件を組み合わせる → 論理演算子
- 変数に値を入れる・更新する → 代入演算子
演算子を理解すると、「値をどう扱うか」を自由に表現できるようになります。
算術演算子
足し算・引き算・掛け算・割り算・余り
算術演算子は、数値どうしの計算を行うための演算子です。
+：足し算-：引き算*：掛け算/：割り算%：割り算の余り（剰余）
基本例
// 価格と数量を使った計算の例です
const price = 500; // 1つあたりの価格
const quantity = 3; // 個数
// 合計金額を計算します
const total = price * quantity; // 掛け算
console.log('合計金額：', total); // 1500
// 割り算と余りの例です
const a = 10;
const b = 3;
console.log('a / b：', a / b); // 3.3333...
console.log('a % b：', a % b); // 1（10 を 3 で割った余り）
比較演算子
大きい・小さい・等しいかを調べる
比較演算子は、2つの値を比較して、真偽値（true / false）を返す演算子です。
>：左が右より大きいか<：左が右より小さいか>=：左が右以上か<=：左が右以下か===：値と型が等しいか（厳密な比較）!==：値と型が等しくないか（厳密な不等比較）
基本例
const price = 1200;
const budget = 1000;
console.log(price > budget); // true（1200 は 1000 より大きい）
console.log(price <= budget); // false（1200 は 1000 以下ではない）
const a = 10;
const b = '10';
console.log(a == b); // true（値だけを比較するゆるい比較）
console.log(a === b); // false（型も比較する厳密な比較）
console.log(a !== b); // true（値と型が違う）
初心者のうちは、基本的に === と !== を使うと覚えておくと安全です。
論理演算子
条件を組み合わせるための演算子
論理演算子は、複数の条件を組み合わせるための演算子です。
&&：AND（かつ） → 両方がtrueのときだけtrue||：OR（または） → どちらかがtrueならtrue!：NOT（否定） →trueをfalseに、falseをtrueに反転
基本例
const price = 800;
const budget = 1000;
const isMember = true; // 会員かどうか
// 予算内で、かつ会員であるかどうか
const canBuyWithMemberDiscount = (price <= budget) && isMember;
console.log('予算内かつ会員か：', canBuyWithMemberDiscount); // true
// 予算内「または」会員であるかどうか
const canBuy = (price <= budget) || isMember;
console.log('予算内または会員か：', canBuy); // true
// 会員ではないかどうか
console.log('会員ではない：', !isMember); // false
代入演算子
変数に値を入れる・更新する
代入演算子は、変数に値を代入したり、更新したりするための演算子です。
=：基本の代入+=：足して代入（a += 1はa = a + 1と同じ）-=：引いて代入*=：掛けて代入/=：割って代入%=：余りを代入
基本例
let total = 0; // 合計値を表す変数です
// 100 を足します
total += 100; // total = total + 100 と同じ
console.log('total：', total); // 100
// 50 をさらに足します
total += 50; // total = total + 50
console.log('total：', total); // 150
// 30 を引きます
total -= 30; // total = total - 30
console.log('total：', total); // 120
代入演算子を使うと、「変数の値を更新する」処理が短く書けます。
実践1：消費税込み価格計算
ここからは、演算子を使った具体的な実践に入ります。 まずは「消費税込み価格」を計算するプログラムを書いてみます。
仕様イメージ
- 税抜価格（数値）を用意する
- 消費税率（例：10%）を用意する
- 税込価格を計算する
- コンソールに表示する
コード例（コメント付き）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 前半：消費税込み価格計算</title>
</head>
<body>
<h1>消費税込み価格計算</h1>
<p>コンソールを開いて、計算結果を確認してください。</p>
<script>
// 税抜価格を表す数値です
const priceWithoutTax = 1000; // 1000円（税抜）
// 消費税率を表す数値です（10% を 0.1 として表現します）
const taxRate = 0.1;
// 消費税額を計算します
// 税抜価格 × 税率 で税額が求まります
const taxAmount = priceWithoutTax * taxRate;
// 税込価格を計算します
// 税抜価格 + 税額 で税込価格が求まります
const priceWithTax = priceWithoutTax + taxAmount;
console.log('税抜価格：', priceWithoutTax, '円');
console.log('消費税率：', taxRate * 100, '%');
console.log('消費税額：', taxAmount, '円');
console.log('税込価格：', priceWithTax, '円');
</script>
</body>
</html>
重要ポイントの深掘り
- 税率は
10ではなく0.1として扱います（10% = 0.1）。 - 計算は「税抜価格 × 税率 → 税額」「税抜価格 + 税額 → 税込価格」という流れです。
- すべて数値（
number）として扱っていることが重要です。
実践2：割引価格計算
次に、「割引価格」を計算するプログラムを書いてみます。 ここでは、比較演算子や論理演算子も少し絡めて、「条件付き割引」を表現してみます。
仕様イメージ
- 元の価格（数値）を用意する
- 割引額（数値）を用意する
- 割引後の価格を計算する
- 価格が 0 未満にならないようにする（安全のため）
コード例（コメント付き）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 前半：割引価格計算</title>
</head>
<body>
<h1>割引価格計算</h1>
<p>コンソールを開いて、割引後の価格を確認してください。</p>
<script>
// 元の価格を表す数値です
const originalPrice = 2000; // 2000円
// 割引額を表す数値です
const discountAmount = 500; // 500円割引
// 割引後の価格を計算します
let discountedPrice = originalPrice - discountAmount;
console.log('元の価格：', originalPrice, '円');
console.log('割引額：', discountAmount, '円');
console.log('割引後の価格（計算直後）：', discountedPrice, '円');
// 安全のため、割引後の価格が 0 未満にならないようにチェックします
// 比較演算子（<）と代入演算子（=）を使います
if (discountedPrice < 0) {
console.log('割引後の価格が 0 未満になりました。0円に補正します。');
discountedPrice = 0; // 0円に補正します
}
console.log('割引後の価格（最終）：', discountedPrice, '円');
</script>
</body>
</html>
重要ポイントの深掘り
- 割引後の価格は
originalPrice - discountAmountで計算しています。 discountedPriceはletで宣言し、条件によって値を更新しています。discountedPrice < 0という比較演算子で、「0未満かどうか」をチェックしています。- 条件が
trueの場合に、代入演算子=を使ってdiscountedPriceを0に補正しています。
演算子と「安全な計算」の関係
演算子は、単に計算や比較をするための記号ではなく、安全に値を扱うための道具でもあります。
- 比較演算子で「あり得ない値」を検出する
- 論理演算子で「条件を組み合わせて安全なパスだけを通す」
- 代入演算子で「補正した値」を変数に反映する
こうした使い方は、実務でもセキュリティの観点でも非常に重要です。
Day 4前半のまとめ
Day 4前半では、次のポイントを押さえました。
- 算術演算子で、数値どうしの計算（足し算・引き算・掛け算・割り算・余り）を行うこと
- 比較演算子で、値どうしを比較し、真偽値を得ること
- 論理演算子で、複数の条件を組み合わせて「かつ」「または」「否定」を表現すること
- 代入演算子で、変数に値を入れたり、更新したりすること
- 実践として、「消費税込み価格計算」と「割引価格計算」のコードを書き、演算子の使いどころを体験したこと
ここまで理解できていると、「値をどう計算し、どう比較し、どう条件に使うか」という基本的なロジックを組み立てる準備が整っています。
Day 4：演算子（後半）
Day 4後半では、前半で学んだ演算子を「実際の計算ロジック」として使いこなすことを目標にします。 算術演算子・比較演算子・論理演算子・代入演算子を組み合わせて、消費税込み価格計算と割引価格計算を、初心者でも追いやすい形でコードにしていきます。 単なる記号の暗記ではなく、「なぜその演算子を使うのか」「どこで安全性を意識するのか」を丁寧に確認していきます。
演算子を組み合わせて「意味のある処理」にする
計算・判定・更新の3ステップを意識する
演算子は、大きく次の3つの役割に分けて考えると分かりやすいです。
- 計算する：算術演算子（
+,-,*,/,%） - 判定する：比較演算子（
>,<,>=,<=,===,!==） - 条件を組み合わせる：論理演算子（
&&,||,!） - 値を入れる・更新する：代入演算子（
=,+=,-=,*=,/=,%=）
後半では、この4種類を「バラバラに使う」のではなく、1つの流れの中で組み合わせて使うことを意識していきます。
消費税込み価格計算を丁寧に組み立てる
ステップ1：税抜価格と税率を決める
まずは、1つの商品について「税抜価格」と「消費税率」を決めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 後半：消費税込み価格計算</title>
</head>
<body>
<h1>消費税込み価格計算</h1>
<p>コンソールを開いて、計算の流れを確認してください。</p>
<script>
// 税抜価格を表す数値です
const priceWithoutTax = 1000; // 1000円（税抜）
// 消費税率を表す数値です
// 10% を 0.1 として表現します
const taxRate = 0.1;
console.log('税抜価格：', priceWithoutTax, '円');
console.log('消費税率：', taxRate * 100, '%');
</script>
</body>
</html>
ここではまだ計算していませんが、「何を計算するのか」という前提を明確にしています。
ステップ2：算術演算子で税額と税込価格を計算する
次に、算術演算子を使って「税額」と「税込価格」を求めます。
<script>
const priceWithoutTax = 1000;
const taxRate = 0.1;
// 税額を計算します
// 税抜価格 × 税率 で税額が求まります
const taxAmount = priceWithoutTax * taxRate;
// 税込価格を計算します
// 税抜価格 + 税額 で税込価格が求まります
const priceWithTax = priceWithoutTax + taxAmount;
console.log('消費税額：', taxAmount, '円');
console.log('税込価格：', priceWithTax, '円');
</script>
ここで使っている演算子は、
*（掛け算）：税額を求める+（足し算）：税込価格を求める
という役割を持っています。
ステップ3：複数商品に拡張して、代入演算子で合計を更新する
1つの商品だけでなく、複数の商品をまとめて計算してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 後半：複数商品の消費税込み価格計算</title>
</head>
<body>
<h1>複数商品の消費税込み価格計算</h1>
<p>コンソールを開いて、各商品の税込価格と合計金額を確認してください。</p>
<script>
// 消費税率（10%）です
const taxRate = 0.1;
// 商品ごとの税抜価格を配列で管理します
const pricesWithoutTax = [1000, 500, 1200]; // 3つの商品
// 合計金額（税込）を表す変数です
// 後で値を更新していくので let を使います
let totalWithTax = 0;
console.log('消費税率：', taxRate * 100, '%');
// 各商品の税込価格を計算して、合計に足していきます
pricesWithoutTax.forEach((priceWithoutTax, index) => {
// 税額を計算します
const taxAmount = priceWithoutTax * taxRate;
// 税込価格を計算します
const priceWithTax = priceWithoutTax + taxAmount;
console.log(`商品${index + 1}の税抜価格：`, priceWithoutTax, '円');
console.log(`商品${index + 1}の税込価格：`, priceWithTax, '円');
// 合計金額に税込価格を足します
// totalWithTax = totalWithTax + priceWithTax と同じ意味です
totalWithTax += priceWithTax;
});
console.log('---');
console.log('税込合計金額：', totalWithTax, '円');
</script>
</body>
</html>
ここでのポイントは、
- 算術演算子
*と+で「各商品の税込価格」を計算していること。 - 代入演算子
+=で「合計金額」を更新していること。
「計算して」「足して」「更新する」という流れが、演算子によって表現されています。
割引価格計算を条件付きにしてみる
ステップ1：会員かどうかで割引率を変える
次は、割引価格計算です。 ここでは、「会員かどうか」で割引率を変えるロジックを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 後半：条件付き割引価格計算</title>
</head>
<body>
<h1>条件付き割引価格計算</h1>
<p>コンソールを開いて、会員・非会員での割引結果を確認してください。</p>
<script>
// 元の価格を表す数値です
const originalPrice = 3000; // 3000円
// 会員かどうかを表す真偽値です
const isMember = true; // true なら会員、false なら非会員
// 割引率を表す変数です
let discountRate;
// 会員かどうかで割引率を決めます
if (isMember) {
discountRate = 0.1; // 会員は 10% 割引
console.log('会員割引が適用されます（10% 割引）');
} else {
discountRate = 0.05; // 非会員は 5% 割引
console.log('一般割引が適用されます（5% 割引）');
}
console.log('元の価格：', originalPrice, '円');
console.log('割引率：', discountRate * 100, '%');
</script>
</body>
</html>
ここでは、
- 真偽値
isMemberをifの条件として使っています。 - 代入演算子
=でdiscountRateに割引率を設定しています。
ステップ2：算術演算子で割引額と割引後価格を計算する
次に、割引額と割引後の価格を計算します。
<script>
const originalPrice = 3000;
const isMember = true;
let discountRate;
if (isMember) {
discountRate = 0.1;
console.log('会員割引が適用されます（10% 割引）');
} else {
discountRate = 0.05;
console.log('一般割引が適用されます（5% 割引）');
}
// 割引額を計算します
const discountAmount = originalPrice * discountRate;
// 割引後の価格を計算します
let discountedPrice = originalPrice - discountAmount;
console.log('割引額：', discountAmount, '円');
console.log('割引後の価格（計算直後）：', discountedPrice, '円');
</script>
ここで使っている演算子は、
*（掛け算）：割引額を求める-（引き算）：割引後の価格を求める
という役割を持っています。
ステップ3：比較演算子で「あり得ない値」を防ぐ
割引後の価格が0未満になるのは不自然なので、比較演算子を使ってチェックします。
<script>
const originalPrice = 3000;
const isMember = true;
let discountRate;
if (isMember) {
discountRate = 0.1;
console.log('会員割引が適用されます（10% 割引）');
} else {
discountRate = 0.05;
console.log('一般割引が適用されます（5% 割引）');
}
const discountAmount = originalPrice * discountRate;
let discountedPrice = originalPrice - discountAmount;
console.log('割引額：', discountAmount, '円');
console.log('割引後の価格（計算直後）：', discountedPrice, '円');
// 割引後の価格が 0 未満にならないようにチェックします
if (discountedPrice < 0) {
console.log('割引後の価格が 0 未満になりました。0円に補正します。');
discountedPrice = 0; // 0円に補正します
}
console.log('割引後の価格（最終）：', discountedPrice, '円');
</script>
ここでのポイントは、
- 比較演算子
<で「0未満かどうか」を判定していること。 - 条件が
trueの場合に、代入演算子=で値を補正していること。
演算子が「安全な計算」を支える役割を果たしています。
演算子をまとめて使う価格計算テンプレート
最後に、消費税と割引を両方含めた「総合的な価格計算テンプレート」を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4 後半：価格計算テンプレート</title>
</head>
<body>
<h1>価格計算テンプレート（税込＋割引）</h1>
<p>コンソールを開いて、計算の流れを確認してください。</p>
<script>
// 税抜価格を表す数値です
const priceWithoutTax = 4000; // 4000円
// 消費税率（10%）です
const taxRate = 0.1;
// 会員かどうかを表す真偽値です
const isMember = false; // 今回は非会員としてみます
// 割引率を表す変数です
let discountRate;
// 会員かどうかで割引率を決めます
if (isMember) {
discountRate = 0.1; // 会員は 10% 割引
console.log('会員割引が適用されます（10% 割引）');
} else {
discountRate = 0.03; // 非会員は 3% 割引
console.log('一般割引が適用されます（3% 割引）');
}
// 税額を計算します
const taxAmount = priceWithoutTax * taxRate;
// 税込価格を計算します
const priceWithTax = priceWithoutTax + taxAmount;
// 割引額を計算します（税込価格に対して割引を適用します）
const discountAmount = priceWithTax * discountRate;
// 割引後の価格を計算します
let finalPrice = priceWithTax - discountAmount;
console.log('税抜価格：', priceWithoutTax, '円');
console.log('消費税率：', taxRate * 100, '%');
console.log('税込価格：', priceWithTax, '円');
console.log('割引率：', discountRate * 100, '%');
console.log('割引額：', discountAmount, '円');
console.log('割引後の価格（計算直後）：', finalPrice, '円');
// 最終価格が 0 未満にならないようにチェックします
if (finalPrice < 0) {
console.log('最終価格が 0 未満になりました。0円に補正します。');
finalPrice = 0; // 0円に補正します
}
console.log('最終的な支払価格：', finalPrice, '円');
</script>
</body>
</html>
このテンプレートには、
- 算術演算子：税額・税込価格・割引額・最終価格の計算
- 比較演算子：0未満かどうかのチェック
- 真偽値＋
if：会員かどうかによる割引率の切り替え - 代入演算子：割引率の設定・最終価格の補正
がすべて含まれています。
Day 4後半のまとめ
Day 4後半では、次のことを確認しました。
- 演算子を「計算・判定・更新」の流れの中で組み合わせて使うこと
- 消費税込み価格計算で、算術演算子と代入演算子を使って合計を積み上げること
- 割引価格計算で、真偽値・比較演算子・代入演算子を使って条件付きの安全な計算を行うこと
- 税込＋割引の総合テンプレートを通して、演算子が「意味のある処理」を支える道具であること
ここまでの内容を自分の手で書き換えながら試してみると、演算子の使い方がぐっと身体に馴染んでいきます。
Day 4：演算子とミニ課題のゴール
Day 4では、算術演算子・比較演算子・論理演算子・代入演算子をひと通り学んだうえで、「簡単な電卓プログラム」を作るところまで進めていきます。 ここでは、演算子を「ただの記号」としてではなく、値を動かすための道具として捉え直しながら、初心者でも追いやすいステップでコードを書いていきます。
演算子の基本を電卓の視点で整理する
算術演算子：電卓の「計算ボタン」
算術演算子は、電卓でいう「＋」「−」「×」「÷」に相当するものです。
+：足し算-：引き算*：掛け算/：割り算%：割り算の余り（剰余）
電卓プログラムでは、これらを使って「2つの数値を計算する」処理を作ります。
const a = 10;
const b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1
比較演算子：結果が正しいかをチェックする
比較演算子は、2つの値を比較して真偽値（true / false）を返す演算子です。
>：左が右より大きいか<：左が右より小さいか>=：左が右以上か<=：左が右以下か===：値と型が等しいか（厳密な比較）!==：値と型が等しくないか（厳密な不等比較）
電卓プログラムでは、「入力された値が数値かどうか」をチェックする場面で役立ちます。
const input = 10;
console.log(typeof input === 'number'); // true（数値かどうかのチェック）
論理演算子：条件を組み合わせる
論理演算子は、複数の条件を組み合わせるための演算子です。
&&：AND（かつ）||：OR（または）!：NOT（否定）
電卓プログラムでは、「両方の入力が数値である」「どちらかが空である」といった条件を表現するときに使えます。
const isNumberA = true;
const isNumberB = false;
console.log(isNumberA && isNumberB); // false（両方 true ではない）
console.log(isNumberA || isNumberB); // true（どちらかが true）
console.log(!isNumberA); // false（true の反転）
代入演算子：結果を変数に保存する
代入演算子は、変数に値を入れたり、更新したりするための演算子です。
=：基本の代入+=：足して代入-=：引いて代入*=：掛けて代入/=：割って代入%=：余りを代入
電卓プログラムでは、「計算結果を変数に保存する」「履歴を足し込む」といった場面で使います。
let result = 0;
result = 10; // 10 を代入
result += 5; // 10 + 5 → 15
result *= 2; // 15 × 2 → 30
console.log(result); // 30
ミニ課題：簡単な電卓プログラムを作る
ここからがDay 4のミニ課題です。 「2つの数値と演算子を指定して、結果をコンソールに表示する電卓プログラム」を作っていきます。
ゴールのイメージ
- 数値Aと数値Bを用意する
- 演算子（
+,-,*,/）を文字列で指定する - 指定された演算子に応じて計算する
- 結果をコンソールに表示する
- 入力が不正な場合はエラーメッセージを表示する
Step 1：電卓の「入力部分」をコードで表現する
まずは、電卓が扱う「入力」を変数で表現します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4：簡単な電卓プログラム</title>
</head>
<body>
<h1>簡単な電卓プログラム</h1>
<p>コンソールを開いて、計算結果を確認してください。</p>
<script>
// 電卓の入力となる数値Aと数値Bです
const numberA = 10; // 1つ目の数値
const numberB = 5; // 2つ目の数値
// 使用する演算子を文字列で指定します
// '+', '-', '*', '/' のいずれかを想定します
const operator = '+'; // 今回は足し算を指定しています
console.log('数値A：', numberA);
console.log('数値B：', numberB);
console.log('演算子：', operator);
</script>
</body>
</html>
ここではまだ計算していませんが、「電卓が何を受け取るのか」を明確にしています。
Step 2：演算子に応じて計算するロジックを書く
次に、operator の値に応じて、どの計算を行うかを if 文で分岐します。
<script>
const numberA = 10;
const numberB = 5;
const operator = '+'; // 試しに他の演算子に変えてみても良いです
let result; // 計算結果を保存する変数です
// 演算子に応じて計算方法を切り替えます
if (operator === '+') {
// 足し算
result = numberA + numberB;
} else if (operator === '-') {
// 引き算
result = numberA - numberB;
} else if (operator === '*') {
// 掛け算
result = numberA * numberB;
} else if (operator === '/') {
// 割り算
result = numberA / numberB;
} else {
// 想定外の演算子が指定された場合
console.log('対応していない演算子が指定されました：', operator);
}
console.log('計算結果：', result);
</script>
重要ポイントの深掘り
operator === '+'のように、比較演算子===で演算子を判定しています。- 算術演算子
+,-,*,/を、演算子の種類に応じて使い分けています。 resultはletで宣言し、条件に応じて代入演算子=で値を更新しています。
Step 3：入力が数値かどうかをチェックする
電卓としては、「数値ではないもの」が入力されると正しく動きません。 そこで、typeof と比較演算子を使って、入力が数値かどうかをチェックします。
<script>
const numberA = 10;
const numberB = 5;
const operator = '+';
// 入力が数値かどうかをチェックします
const isNumberA = typeof numberA === 'number';
const isNumberB = typeof numberB === 'number';
if (!isNumberA || !isNumberB) {
console.log('エラー：数値ではない入力が含まれています');
} else {
let result;
if (operator === '+') {
result = numberA + numberB;
} else if (operator === '-') {
result = numberA - numberB;
} else if (operator === '*') {
result = numberA * numberB;
} else if (operator === '/') {
result = numberA / numberB;
} else {
console.log('対応していない演算子が指定されました：', operator);
return; // ここで処理を終了します
}
console.log('計算結果：', result);
}
</script>
ここで使っている演算子の役割
typeof numberA === 'number'：比較演算子で「数値かどうか」を判定!isNumberA || !isNumberB：論理演算子で「どちらかが数値ではない」場合を検出=：代入演算子でresultに計算結果を保存
Step 4：少しだけ拡張した電卓テンプレート
最後に、これまでの内容をまとめた「簡単な電卓プログラム」のテンプレートを示します。 このテンプレートは、演算子の使い方を復習するのにちょうど良い形になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 4：簡単な電卓プログラム（テンプレート）</title>
</head>
<body>
<h1>簡単な電卓プログラム</h1>
<p>コンソールを開いて、計算結果を確認してください。</p>
<script>
// 電卓の入力となる数値Aと数値Bです
// ここを書き換えることで、いろいろな計算を試せます
const numberA = 12; // 1つ目の数値
const numberB = 4; // 2つ目の数値
// 使用する演算子を文字列で指定します
// '+', '-', '*', '/' のいずれかを指定してください
const operator = '/'; // 今回は割り算を指定しています
console.log('数値A：', numberA);
console.log('数値B：', numberB);
console.log('演算子：', operator);
// 入力が数値かどうかをチェックします
const isNumberA = typeof numberA === 'number';
const isNumberB = typeof numberB === 'number';
if (!isNumberA || !isNumberB) {
console.log('エラー：数値ではない入力が含まれています');
} else {
let result; // 計算結果を保存する変数です
// 演算子に応じて計算方法を切り替えます
if (operator === '+') {
result = numberA + numberB; // 足し算
} else if (operator === '-') {
result = numberA - numberB; // 引き算
} else if (operator === '*') {
result = numberA * numberB; // 掛け算
} else if (operator === '/') {
// 割り算の前に、0で割っていないかをチェックします
if (numberB === 0) {
console.log('エラー：0で割ることはできません');
return; // 処理を終了します
}
result = numberA / numberB; // 割り算
} else {
console.log('対応していない演算子が指定されました：', operator);
return; // 処理を終了します
}
console.log('計算結果：', result);
}
console.log('電卓プログラムの処理が完了しました');
</script>
</body>
</html>
このテンプレートで意識してほしいこと
- 算術演算子が「電卓の計算ボタン」として機能していること。
- 比較演算子と論理演算子で「入力の妥当性」をチェックしていること。
- 代入演算子で「計算結果」を変数に保存し、後から参照していること。
- 0で割るケースを防ぐことで、「安全な計算」を意識していること。
Day 4ミニ課題のまとめ
Day 4のミニ課題「簡単な電卓プログラム」では、次のことを体験しました。
- 算術演算子・比較演算子・論理演算子・代入演算子を、ひとつのプログラムの中で組み合わせて使ったこと
- 入力値の型チェックや0割り防止など、「安全な計算」を意識したロジックを書いたこと
- 演算子が単なる記号ではなく、「意味のある処理」を支える道具であることを確認したこと
この電卓プログラムをベースに、演算子の部分を書き換えたり、条件を増やしたりしながら遊んでみると、演算子の感覚がぐっと馴染んでいきます。