入力フォームで数値を入力する際はparseIntを使用する（JavaScript, React）

状況

• JavaScriptで入力フォームから数値を入力する
• 入力フォームから受け取った数値を合計する

※コメントでご指摘を頂き、parseIntだと文字列によって誤った値を返す恐れがあるので、Number()や単項プラスを使う方が良いとのことです。

parseIntだと整数専用なので、Number()や単項プラスを使用して文字列全体を数値として扱ったほうが誤った変換を防ぐことが出来ます。

parseIntを使わない場合の問題点

• 入力フォームで数値を入力して送信した場合、JavaScriptが動的にstring（文字列）型に変換してしまう
• 入力した数値がstring型だと何が良くないのか？
  • string型のまま数値を合計しようとすると文字列の連結を起こしてしまう

例:string型での足し算
const str1 = "1";
const str2 = "2";

console.log(str1 + str2);

12

parseIntの使い方

    parseInt('5', 10)
    >> 5
    // 文字列から数値に変換されている

• parseIntの第一引数に数値に変換したい文字列、第二引数に基数を入力する
  • 基数を10にした場合、10進数で変換される

<input
          type="number"
          value={time}
          min="0"
          onChange={(e) => setTime(parseInt(e.target.value, 10))}
/>

• Reactの入力フォームでparseIntを使用する例
  • onChange属性で入力フォームのイベントが発火されたときに、文字列ではなく数値としてuseStateにセットする

まとめ

JavaScriptで入力フォームから数値を送信する際は、そのままでは文字列に変換されるのでparseIntを使用し数値に変換する