parseInt / parseFloat とは何か
文字列を数値に変換するための関数です。parseInt は「整数」を、parseFloat は「小数を含む数」を取り出します。両方とも、文字列の先頭から読めるところまで数値として解釈し、そこで止まります。読めない場合は NaN（数値ではない）になります。
parseInt("42"); // 42
parseFloat("3.14"); // 3.14
parseInt("123abc"); // 123（数字の後ろは無視）
parseFloat("2.5kg"); // 2.5（小数まで読んで止まる）
parseInt("abc"); // NaN（先頭が数字でない）
parseFloat("abc"); // NaN
parseInt の基本と進数（radix）の指定
parseInt は整数を取り出し、必要なら基数（進数）を指定できます。基数を省略すると通常は 10（十進）ですが、文字列の形によっては解釈が変わる可能性があるため、明示が安全です。
parseInt("255", 10); // 255（十進）
parseInt("FF", 16); // 255（十六進）
parseInt("101", 2); // 5 （二進）
parseInt("077", 8); // 63 （八進）
数値以外の文字を含む場合は、読めるところで止まります。
parseInt("12px", 10); // 12
parseInt("0xFF", 16); // 255
基数を指定しない場合の落とし穴を避けるため、十進数として扱うなら常に 10 を付けるのが無難です。
parseFloat の基本と小数・指数表記
parseFloat は小数点や指数表記（e 記法）を理解します。先頭から読み取り、数値でない文字が来たところで止まります。
parseFloat("3.14159"); // 3.14159
parseFloat("1.2e3"); // 1200（指数表記）
parseFloat(".5"); // 0.5（先頭が小数点でもOK）
parseFloat("5."); // 5
parseFloat("7.2kg"); // 7.2
parseFloat("e3"); // NaN（先頭が数値でない）
parseFloat には基数指定はありません。常に十進浮動小数として解釈します。
どこまで読み取るか（停止位置のルール）
文字列の先頭にある「数値として読める部分」だけが対象です。そこから先の文字は無視されます。
parseInt(" 42px"); // 42（前後の空白は許容）
parseFloat("\n\t3.5m"); // 3.5（空白や改行をスキップ）
parseInt("10.9"); // 10（小数点より前まで）
parseFloat("10.9.8"); // 10.9（2個目の小数点で停止）
先頭が数値でないときは、何も読めないため NaN になります。
Number との違い（厳密変換との比較）
Number は文字列全体が「数値として妥当か」を評価します。途中で無視はしません。変換に失敗すると NaN です。parse 系は「読めるところまで」を取り出せるため、フォーマットが混ざる入力に向いています。
Number("12px"); // NaN（全体が数値でない）
parseInt("12px"); // 12（読めるところまで）
Number(" 3.5 "); // 3.5（空白はOK）
parseFloat(" 3.5 "); // 3.5
入力が厳密な数値であるべき場面では Number を使い、ラベル付きや単位付きの文字列から数値部分だけ抜きたいなら parseInt / parseFloat を使うのが適切です。
よくある注意点と安全策
先頭以外の数字は無視されることに注意する
「価格: 1200円」のような文字列で、先頭が数字でない場合は NaN になります。数値部分まで切り出してからパースします。
const s = "価格: 1200円";
parseInt(s, 10); // NaN
parseInt(s.replace(/\D+/g, " "), 10); // 1200（例：非数字を空白に）
parseInt の基数は明示する
十進数なら常に 10 を付けて、環境差や文字列形による誤解釈を防ぎます。
parseInt("08"); // 8 になるが、常に安全とは限らない
parseInt("08", 10); // 8（意図を明確に）
小数が欲しいときは parseFloat を使う
parseInt は小数点以下を切り捨てます。小数が必要なら parseFloat か Number を選びます。
parseInt("9.99", 10); // 9
parseFloat("9.99"); // 9.99
NaN 判定は Number.isNaN を使う
パース結果が NaN かどうかを確認するときは、厳密な判定を使います。
const n = parseInt("abc", 10);
Number.isNaN(n); // true
例題で理解する
単位付きの文字列から数値を取り出す
const weight = "72.5kg";
const w = parseFloat(weight); // 72.5
16進カラーコードから数値化する
const hex = "FF";
const value = parseInt(hex, 16); // 255
行頭に余計な文字がある場合の前処理
const line = "size=42px";
const num = parseInt(line.replace(/^\D+/, ""), 10); // 42
CSV の列から数値化して合計する
const csv = "10,20,30,40px,foo";
const sum = csv
.split(",")
.map(x => parseInt(x, 10)) // ["10","20","30","40px","foo"] → [10,20,30,40,NaN]
.filter(n => !Number.isNaN(n))
.reduce((a, b) => a + b, 0);
console.log(sum); // 100
まとめ
parseInt は「整数を先頭から読めるだけ」、parseFloat は「小数・指数も含めて先頭から読めるだけ」を取り出します。厳密な数値変換が必要なら Number、ラベルや単位が混ざる入力から数値部分だけを抜きたいなら parseInt / parseFloat。十進の parseInt には基数 10 を明示し、結果が NaN かどうかは Number.isNaN で確認すると、初歩的なバグを避けられます。