では「単項プラス（+）／単項マイナス（−）」の理解を深めるために、
初心者でもステップアップできるように レベル別（基礎 → 応用 → 発展）練習問題セット を紹介します。
すべて ブラウザのコンソール（F12 → Console）で実行できます。
解答・解説も付けたので、じっくり理解しながら進めてください。
レベル1：基礎編（符号反転の基本）
「マイナスを前につけたらどうなる？」「プラスをつけたら何が起きる？」を確認！
問題1
let x = 7;
console.log(-x);
➡ 結果を予想してみよう！
解答: -7
解説: -x は符号を反転。7 → -7。
問題2
let a = -3;
console.log(-a);
解答: 3
解説: -(-3) → プラスに反転 → 3
問題3
console.log(+8);
解答: 8
解説: 単項プラスは何も変えません。「数値としてそのまま」。
問題4
console.log(-0);
解答: -0
解説: 実際には 0 と同じに見えるが、内部的には「−0」として区別される（特殊ケース）。
レベル2：変換編（文字列やnullの扱い）
「文字列を＋や−で数値に変換できる」ことを確認しよう。
問題5
console.log(+'15');
解答: 15
解説: 文字列 '15' → 数値 15 に変換される。
問題6
console.log(-'10');
解答: -10
解説: '10' → 数値 10 → 符号反転 → -10。
問題7
console.log(+'3.14');
解答: 3.14
解説: 小数もOK。'3.14' → 数値 3.14。
問題8
console.log(+'abc');
解答: NaN
解説: 数値に変換できない文字列 → NaN（Not a Number）。
問題9
console.log(+null);
解答: 0
解説: null は数値変換で 0 になる。
問題10
console.log(+true);
console.log(+false);
解答: 1 と 0
解説: true → 1、false → 0
レベル3：混在・応用編
数値・文字列・配列・boolean が混ざるとどう動く？を体験！
問題11
let a = '5';
let b = 3;
console.log(+a + b);
解答: 8
解説: +a が '5' → 5 に変換され、5 + 3 = 8
問題12
console.log(-['12']);
解答: -12
解説: ['12'] → '12' → 数値 12 → 符号反転で -12。
問題13
console.log(+['1','2']);
解答: NaN
解説: 複数要素を持つ配列は数値変換できない。
問題14
console.log(+undefined);
解答: NaN
解説: undefined は数値に変換できず NaN。
問題15
console.log(+{});
解答: NaN
解説: オブジェクト {} は数値変換不可。
レベル4：実践編（動作の違いを理解）
「+」が足し算になるとき、「文字列連結」になるときの違いを見てみよう！
問題16
console.log('10' + 5);
解答: "105"
解説: 片方が文字列なら 文字列結合 になる。
問題17
console.log(+'10' + 5);
解答: 15
解説: +'10' が数値変換 → 10 + 5 → 15
問題18
let input = '25';
console.log(Number(input) === +input);
解答: true
解説: +input は Number(input) と同じ結果（どちらも25）。
問題19
let n = '10';
console.log(+n - -n);
解答: 20
解説: +n → 10、-n → -10、よって 10 - (-10) = 20
問題20
let value = '5';
console.log(+value + +value + -value);
解答: 5
解説: +value→5、+value→5、-value→-5
→ 5 + 5 + (-5) = 5
レベル5：発展編（ちょっと頭を使う）
問題21
let a = '2';
let b = '3';
console.log(+a * +b);
解答: 6
解説: + で数値変換後、掛け算。
問題22
console.log(-'2' * +'3');
解答: -6
解説: -'2' → -2、+'3' → 3、掛け算で -6。
問題23
console.log(-(+('5') + -('3')));
解答: -2
解説:
内側から順に：+'5' → 5、-'3' → -35 + (-3) → 2
外の -() で反転 → -2
問題24
console.log(+['10'] + +['20']);
解答: 30
解説: 両方の配列が中の文字列を数に変換 → 10 + 20。
問題25
console.log(-['3.14'] + +'2');
解答: -1.14
解説: -['3.14'] → -3.14、+'2' → 2、合計 -1.14。
まとめ
| 記号 | 意味 | 主な使い方 |
|---|---|---|
- | 符号を反転 | 例：-x → xの符号をひっくり返す |
+ | 数値に変換 | 例：+'10' → 10、+true → 1 |
NaN | 数にできない | "abc", undefined, {} など |
単項演算子 (+ / -) 実行サンプル
See the Pen Unary + / – Operator Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
目的
JavaScript の 単項プラス（+） と 単項マイナス（-） の動作を、実際にブラウザ上で体験的に理解するためのデモ教材です。CodePen やローカル環境で動かせます。
このサンプルでできること
- 「例1〜例4」ボタンを押すと、基本的な使い方をコンソールのように表示。
- 自分で値を入力して、
+または-を付けたときの結果を確認。 - 練習問題の答え合わせボタンもあり。
使い方（CodePen / ローカル）
CodePen の場合
- CodePen を開く → 新しい Pen を作成。
- このリポジトリ内の HTML コード（
unary-plus-minus-demo.html）をコピーして、HTML タブに貼り付ける。 - 右上の Run ボタンを押すと動作します。
ローカルで動かす場合
unary-plus-minus-demo.htmlをダウンロードして保存。- ダブルクリックまたはブラウザにドラッグして開くだけでOK。
学べること
-xは 符号を反転する。+xは 数値に変換しようとする（結果が数値になる場合とNaNになる場合がある）。- 文字列・配列・null・boolean なども、
+を付けると内部で暗黙変換が起きる。 - 変換に失敗すると
NaNになる。
練習用の例
let a = 10;
console.log(-a); // → -10
let b = -3;
console.log(-b); // → 3
console.log(+'80'); // → 80
console.log(-'80'); // → -80
console.log(+null); // → 0
console.log(+true); // → 1
console.log(+false); // → 0
console.log(+'Flower'); // → NaN
練習問題（中級者向け）
+'123abc'の結果は？-['-3']の結果は？+['1','2']の結果は？+undefinedの結果は？'10' + '4'と'10' - '4'の違いは？
ヒント
Number(x)と+xは似ていますが、Number()の方が 明示的で安全。- 文字列の数値変換には
parseInt()/parseFloat()もあります（途中の文字を許す）。