毎日コーディングクイズシリーズ!今回はJavaScript基礎の算術演算について、実践的なクイズ形式で学習しましょう!
🎯 問題
オンラインストアで商品の合計金額を計算するシステムを作成しています。以下のJavaScriptコードを実行したとき、コンソールに出力される結果は何でしょうか?
// 商品価格計算システム
let basePrice = "1500";
let taxRate = 0.1;
let discount = 100;
let totalPrice = basePrice * (1 + taxRate) - discount;
console.log("合計金額:" + totalPrice + "円");
console.log(typeof totalPrice);
このコードでは、基本価格に消費税を加算し、そこから割引額を差し引いて最終的な合計金額を計算しています。JavaScriptの算術演算と型変換がどのように働くかがポイントです。
A. 合計金額:1550円 / number
B. 合計金額:1500.1-100円 / string
C. 合計金額:1550円 / string
D. 合計金額:NaN円 / number
B. 合計金額:1500.1-100円 / string
C. 合計金額:1550円 / string
D. 合計金額:NaN円 / number
答えを確認する
✅ 正解:A
正解
正解は A. 合計金額:1550円 / number です!
解説
JavaScriptでは算術演算子(*, -, +など)を使用する際、自動的に型変換(暗黙的な型変換)が行われます。この問題では、文字列 “1500” が数値演算の中で使用されているため、自動的に数値 1500 に変換されて計算が実行されます。
- 選択肢A: 正解です。”1500″ × 1.1 = 1650、1650 – 100 = 1550 となり、結果は数値型(number)になります。
- 選択肢B: 不正解です。乗算演算子(*)は文字列を数値に変換するため、このような文字列結合は発生しません。
- 選択肢C: 不正解です。算術演算の結果は数値型(number)になるため、型がstringにはなりません。
- 選択肢D: 不正解です。数値として有効な文字列 “1500” は正常に数値に変換されるため、NaNにはなりません。
実際の開発では、ユーザーからの入力データやAPIからの値は文字列として受け取ることが多いため、この暗黙的な型変換の仕組みを理解することは重要です。ただし、予期しない結果を避けるために、明示的に Number() や parseInt() を使用することを推奨します。
// より安全な書き方の例
let basePrice = Number("1500"); // 明示的な型変換
let taxRate = 0.1;
let discount = 100;
let totalPrice = basePrice * (1 + taxRate) - discount;
console.log("合計金額:" + totalPrice + "円");
// 出力: 合計金額:1550円
この問題を通じて、JavaScriptの型変換の仕組みを理解し、実際のWebアプリケーション開発で価格計算などを行う際の基礎知識を身につけることができます。次は明示的な型変換について学習することをお勧めします。
💡 ポイント
- 乗算(*)や除算(/)、減算(-)では文字列が自動的に数値に変換される
- 加算(+)は文字列結合と数値加算の両方の意味があるため注意が必要
- 算術演算の結果は基本的に数値型(number)になる
- 安全なコーディングのために明示的な型変換(Number(), parseInt())を使用することを推奨