JavaScript | 数値を固定小数点数形式で文字列に変換（toFixed() メソッド）

実際に動く例題と練習問題つきで説明します。目的・使い方・注意点・実務での使いどころを順に見ていきましょう。

toFixed とは（ざっくり）

toFixed は 数値を「小数点以下を指定桁に揃えた文字列」 に変換するメソッドです。見た目を揃えたいとき（料金表示、桁揃えした表、割合表示など）によく使います。

let x = 3.14159;
x.toFixed(2); // => "3.14"    （文字列を返す）

let x = 3.14159;
x.toFixed(2); // => "3.14"    （文字列を返す）

ポイント：

• 戻り値は 文字列（"3.14"）。数値型が欲しいなら Number(...) や parseFloat(...) で変換する。
• 小数点以下の桁数は引数で指定（省略時は 0 → 四捨五入して整数表示）。
• 指定桁数より少ない場合は 0 で埋める（例：”48.00″）。
• 指定桁数より多い場合は 丸め（最も近い値へ） を行う。

基本的な書き方と例

let n = 34.5642;
n.toFixed();    // "35"      引数省略 -> 0桁（四捨五入）
n.toFixed(1);   // "34.6"
n.toFixed(3);   // "34.564"

let m = 728.52;
m.toFixed(5);   // "728.52000"  足りない桁は0で補われる

let tiny = 0.016;
tiny.toFixed(1); // "0.0"
tiny.toFixed(3); // "0.016"

let n = 34.5642;
n.toFixed();    // "35"      引数省略 -> 0桁（四捨五入）
n.toFixed(1);   // "34.6"
n.toFixed(3);   // "34.564"

let m = 728.52;
m.toFixed(5);   // "728.52000"  足りない桁は0で補われる

let tiny = 0.016;
tiny.toFixed(1); // "0.0"
tiny.toFixed(3); // "0.016"

注意（構文トリック）：

// NG: 文法エラーになることがある
// console.log(48.toFixed(2)); // ← こう書くと構文解析でエラーになる

// 正しい書き方
console.log((48).toFixed(2)); // "48.00"
console.log(48 .toFixed(2));  // 空白を入れる方法でもOK: "48.00"

// NG: 文法エラーになることがある
// console.log(48.toFixed(2)); // ← こう書くと構文解析でエラーになる

// 正しい書き方
console.log((48).toFixed(2)); // "48.00"
console.log(48 .toFixed(2));  // 空白を入れる方法でもOK: "48.00"

戻り値が文字列であることの影響

表示用にはそのままでOKですが、数値計算に戻すなら：

let s = (12.345).toFixed(2); // "12.35"
let num = Number(s);         // 12.35（数値に戻す）
let f = parseFloat(s);       // 同じく 12.35

let s = (12.345).toFixed(2); // "12.35"
let num = Number(s);         // 12.35（数値に戻す）
let f = parseFloat(s);       // 同じく 12.35

丸め（ラウンド）の注意点（浮動小数点の落とし穴）

toFixed の丸めは「最も近い値へ丸める」ように見えますが、JavaScript の数は内部で IEEE754 の浮動小数点で表現されるため、丸め結果が期待と違うことがあります。たとえば 1.005 のような値は内部表現の差で期待通りに丸まらないケースが知られています（エンジンによって挙動の見え方が変わることもある）。

安全な丸めが必要なときは、丸めを数値で行ってから toFixed で整形するか、Math.round を使った手法がよく使われます。

例（小数第2位で丸めてから文字列化）：

function toFixedSafe(num, digits) {
  const factor = 10 ** digits;
  return (Math.round((num + Number.EPSILON) * factor) / factor).toFixed(digits);
}

toFixedSafe(1.005, 2); // より期待に近い結果を得るための工夫

function toFixedSafe(num, digits) {
  const factor = 10 ** digits;
  return (Math.round((num + Number.EPSILON) * factor) / factor).toFixed(digits);
}

toFixedSafe(1.005, 2); // より期待に近い結果を得るための工夫

（Number.EPSILON を足すのは浮動小数点誤差を小さくするためのテクニックです）

引数の範囲について（重要）

ECMAScript 規格上、toFixed に渡す桁数は一般に 0〜100 の範囲（実装依存の上限がある）です。範囲外の数値を渡すと RangeError になる実装があります。通常は小さい整数（0〜4桁くらい）を使うのが普通です。

実務での使いどころ（ユースケース）

• 価格や金額の表示（例：¥123.40）
• 小数を揃えた表の表示（レポート、CSV出力）
• パーセンテージ表記（(ratio * 100).toFixed(1) + '%'）
• UI の少数桁固定（金融、統計のダッシュボード）

例（パーセンテージ）：

let ratio = 0.123456;
let label = (ratio * 100).toFixed(1) + "%"; // "12.3%"

let ratio = 0.123456;
let label = (ratio * 100).toFixed(1) + "%"; // "12.3%"

練習問題

問題と答えをセットで載せます。まずは自分でコンソールに打ってみて、結果を確認してください。

1. let a = 2.71828; を小数第2位にして表示（文字列）
   答：a.toFixed(2) → "2.72"
2. let b = 100; を小数第3位の形式で表示（”100.000″）にするには？
   答：(100).toFixed(3) または 100 .toFixed(3) → "100.000"
3. let c = 0.045; を小数第2位で表示。何になる？（コンソールで試す）
   ヒント：丸めのルールを意識。
   答：c.toFixed(2) → "0.04"（0.045 は四捨五入で 0.05 に近いが、浮動小数点表現の影響で結果が変わる可能性があるため、自分の実行環境で確認するとよい）
4. 文字列 "9.50" を数値に戻して +1 を足して 10.5 を得るには？
   答：

let s = (9.5).toFixed(2); // "9.50"
let n = Number(s);        // 9.5
console.log(n + 1);       // 10.5

let s = (9.5).toFixed(2); // "9.50"
let n = Number(s);        // 9.5
console.log(n + 1);       // 10.5

よくある間違い・Q&A

まとめ（初心者が覚えておく3点）

1. toFixed(n) は 小数点以下 n 桁に揃えた文字列 を返す。
2. 戻り値は 文字列 → 数値で使うなら Number() / parseFloat() を使う。
3. 浮動小数点誤差に注意。正確な丸めが必要な場面では Math.round と組み合わせたり、専用ライブラリ（小数計算ライブラリ）を使う。