JavaScriptの単項演算子の基礎（プラス・マイナス）
はじめのうちは「記号が1つ付くだけ」で何が起きるか分かりにくいですよね。ここでは、単項演算子の「-（単項マイナス）」と「+（単項プラス）」を、例題を交えて丁寧に解説します。
単項マイナスの基本（-）
- 役割: 数値の符号を反転します（正⇄負）。
- 直感: 「マイナスを1つ付けると、プラスがマイナスに、マイナスがプラスに」
console.log(-8); // -8
console.log(-(5)); // -5
console.log(-(-7)); // 7
- 変数にも使える: 値そのものは変えず、「計算として」反転します。
let x = 10;
console.log(-x); // -10（xは10のまま）
console.log(x); // 10
- 数値っぽくないものに使うと？ 単項マイナスは、内部で「数値への変換」を試みてから符号反転します。
console.log(-'42'); // -42（文字列 → 数値 → 反転）
console.log(-true); // -1 （trueは数値1に変換される）
console.log(-false); // -0 （falseは0）
console.log(-'abc'); // NaN （数値にできない → NaN）
単項プラスの基本（+）
- 役割: 数値ならそのままですが、重要なのは「数値に変換する力」があること。
- 直感: 「+を1つ付けると、とりあえず数として扱えるようにする」
console.log(+8); // 8（数値はそのまま）
console.log(+'80'); // 80（文字列 → 数値）
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(+undefined); // NaN（未定義は数にならない）
console.log(+'abc'); // NaN（数値にできない）
- フォーム入力の定番: 文字列で受け取った値をすぐ「数」にしたい時に便利。
const input = '12';
const count = +input; // 12 に変換
console.log(count + 5); // 17
型変換のコツ（Number, parseInt, parseFloat）
- わかりやすさ重視: 初心者は、見て分かる明示的な関数を使うと読みやすいです。
- Number(value): できるだけ素直に数値へ
- parseInt(value): 先頭から整数として読み取る（途中で数字以外が来たら止まる）
- parseFloat(value): 小数も読み取る
console.log(Number('80')); // 80
console.log(parseInt('80px')); // 80（pxで止まる）
console.log(parseFloat('3.14')); // 3.14
console.log(Number('80px')); // NaN（全部を数にできない）
- どれを使う？
- 入力が「純粋な数」想定: Number
- CSS値など「数字+単位」想定: parseInt / parseFloat
- とりあえず数にしたい簡便さ: 単項プラス
よくある落とし穴
- 文字列の足し算になってしまう
- 「数字っぽい文字列」をそのまま足すと「結合」になります。
const a = '10';
const b = '20';
console.log(a + b); // '1020'（文字列結合）
console.log(+a + +b); // 30 （数値へ変換して足し算）
- NaN（Not-a-Number）の伝染
- どこかでNaNが混ざると、計算結果もNaNになります。入力チェックが大事。
const n = +'abc'; // NaN
console.log(n + 5); // NaN
- マイナスゼロ（-0）
- JSには-0があります。見た目は0ですが、符号がつきます。多くの場面では気にしなくてOK。
console.log(-0); // -0 と表示されることがある
console.log(Object.is(-0, 0)); // false（区別される）
練習問題と解答
問題1: 文字列を足し算できるようにして、合計を出力してください
- 入力:
'15'と'27' - 期待: 42 を出力
const a = '15';
const b = '27';
// ここを書き換える
const sum = +a + +b;
console.log(sum); // 42
問題2: '3.5px' から数値だけ取り出して、2倍して出力してください
- 期待: 7 を出力
const size = '3.5px';
// ここを書き換える
const value = parseFloat(size);
console.log(value * 2); // 7
問題3: true と '4' を使って、数値計算で合計を5にしてください
- 期待: 5 を出力
const flag = true; // 1 に変換される
const text = '4';
const total = +flag + +text;
console.log(total); // 5
問題4: undefined を足しても安全な合計処理にしてください
- 条件:
xがundefinedの場合は 0 として扱う
let x = undefined;
let y = '30';
// ここを書き換える（NaNを避けたい）
const nx = Number.isFinite(+x) ? +x : 0;
const ny = +y;
console.log(nx + ny); // 30
実務での使い分けの指針
- 入力を「数にする」だけなら: 単項プラス（短くて便利）
- 読みやすさと明確さを重視: Number, parseInt, parseFloat
- 符号を反転したいだけ: 単項マイナス
- バリデーションを忘れない:
Number.isFinite(value)で安全確認
const raw = '99px';
const n1 = +raw; // NaN（短いが失敗しやすい）
const n2 = parseInt(raw); // 99（目的に合う）
const n3 = Number(raw); // NaN（全部を数にできず）
「まず何をしたいのか」を決めてから、最短で正確に目的を満たす手段を選ぶのがコツです。使いながら自然と慣れていきます。