VIDEO LESSON

JavaScriptのparseFloat()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:46動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はパース・フロートを紹介します。
0:04これは、文字列の先頭から小数を読み取るためのグローバル関数です。
0:10たとえば、重さや長さのように単位が付いた文字列から、数値の部分だけを取り出す場面で活躍します。
0:19この動画では、書き方と引数と戻り値、記事の基本例、先頭から読んで途中で止まる仕組み、
0:26失敗したときの扱い、カンマや指数表記の境界条件、整数専用のパース・イントとの違い、
0:32そして入力検証の実例まで、実行結果と一緒に学びます。
0:39文字列を数値へ変える入口として、最初に覚えておきたい関数です。
0:45まず動作環境を確認します。
0:47パース・フロートは、オブジェクトを通さず関数名を直接書いて使う、古くからある標準の関数です。
0:53クロームとファイアーフォックス、サファリでは初代の版から、エッジでは十二以降で使えます。
0:59ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
1:04記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:08現在使われている環境であれば、ほぼどこでもそのまま使えるでしょう。
1:12追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:17迷ったときは、使う環境で一度実行して確かめるのが確実です。
1:21書き方を確認します。
1:23関数名を書いて、カッコの中に読み取りたい値を一つだけ渡します。
1:29引数はまず文字列へ変換され、その先頭から数値として読める部分が解析されます。
1:36戻り値はナンバー型の数値です。
1:39スライドの例では、三・一四という文字列が、数値の三・一四になり、型もナンバーであることを実機で確認しました。
1:49大切なのは、文字列全体が数値でなくてもよい点です。
1:53先頭に数値があれば、その部分だけが取り出されます。
1:58逆に、先頭から数値として読めなければ、例外ではなくナンという値が返ります。
2:05まずはこの基本の形を覚えてください。
2:08記事の基本例を見ます。
2:10十二・五キログラムという、数値に単位が付いた文字列をパース・フロートへ渡すコードです。
2:17実行結果は十二・五で、ノードの実機結果とも一致しています。
2:21末尾の単位の文字は無視され、先頭の小数だけが数値として取り出されました。
2:27読み方はシンプルで、単位付きデータから計算に使える数値を抜き出す、ということです。
2:34ただし注意点もあります。
2:36単位が正しいかどうかまで、この関数は確認しません。
2:40キログラムなのかグラムなのかといった検証は、別の処理で必要です。
2:45まずはこの例をコンソールかノードで実行し、数値の部分を変えて予測してから確かめてみてください。
2:52先頭から読む仕組みを詳しく見ます。
2:55まず、文字列の先頭にある空白は読み飛ばされます。
2:58そのあとにマイナスの符号があれば符号として読み、小数点を含む数字の並びを読み取ります。
3:05スライドの一行目では、空白とマイナス記号の付いた文字列から、マイナスゼロ・二五が取り出せたことを実機で確認しました。
3:13二行目のように、ゼロを省略して小数点から書き始めても、ゼロ・五として正しく読めます。
3:19逆に、数字より前に文字があると、そこで読み取りは始まりません。
3:24どこから数値が始まるかという先頭の位置が、結果を左右するポイントです。
3:29読み取りが途中で止まる動きを確認します。
3:32パース・フロートは、先頭から数値として読める間だけ読み進め、読めない文字が出た時点で止まり、
3:36そこまでの部分を返します。
3:41スライドの一行目では、小数点が二つある文字列が、十二・五まで読んで止まったことを実機で確認しました。
3:48ここで、よく似た変換であるナンバーとの違いも押さえてください。
3:53ナンバーは文字列全体が数値でないとナンになります。
3:57単位付きの文字列を渡すと、ナンバーではナン、パース・フロートでは十二・五と、
4:01結果がはっきり分かれます。
4:05ゆるく先頭だけ読むのか、全体を厳密に読むのかで選んでください。
4:10失敗したときの動きを見ます。
4:12記事の境界例でも確かめられているように、先頭が文字の文字列は、後ろに数字があっても読み取れず、
4:18ナンが返ります。
4:23空文字列も同じくナンです。
4:25どちらも例外は発生せず、値としてナンが返るだけなので、そのまま計算に使うと結果までナンに染まってしまいます。
4:36そこで判定には、前回学んだナンバー・イズ・ナンを組み合わせます。
4:42スライドの二行目では、空文字列の読み取り結果がナンかどうかを判定し、トゥルーになることを実機で確認しました。
4:52読み取った直後に必ず失敗を確かめる、という流れを習慣にしてください。
4:59記事の境界例をもう一つ見ます。
5:01一つ目はカンマを含む文字列です。
5:03地域によっては小数点をカンマで書きますが、パース・フロートが小数点として認めるのはピリオドだけです。
5:11そのためカンマの手前で読み取りが止まり、結果は一になることを実機で確認し、
5:14記事の期待出力とも一致しました。
5:18カンマ付きの書式を扱うときは、先にピリオドへ置き換えるなどの前処理が必要です。
5:24もう一つ、イーという文字を使った指数表記は正しく読めます。
5:28スライドの二行目では、一イー三が千になったことを確認しました。
5:33読める書式と読めない書式の境目を、ここで整理しておきましょう。
5:37次に読む記事でもある、整数専用のパース・イントとの違いを整理します。
5:42どちらも文字列の先頭から読み取る点は同じですが、パース・イントは整数部分だけを読み、
5:46小数点以下は切り捨てます。
5:49一方、今回のパース・フロートは小数部分まで読みます。
5:53スライドでは、同じ単位付きの文字列に対して、パース・イントは十二、パース・フロートは十二・五になったことを実機で確認しました。
6:02個数や件数のように整数で十分な場面ではパース・イント、重さや金額のように小数が必要な場面ではパース・フロート、
6:06という選び方が基本です。
6:11名前の最後の部分が、読む対象の違いを表しています。
6:15実務に近い実例として、入力値の変換と検証を見ます。
6:19フォームなどから届く値は文字列なので、まずパース・フロートで数値へ変換します。
6:25スライドでは、身長を表す文字列が数値の一七ゼロ・五になり、ナンではないことも合わせて実機で確認しました。
6:34もし結果がナンなら、計算へ進めずに入力ミスとして扱う流れにします。
6:39あわせて注意したいのは、この関数は先頭さえ数値なら後ろの文字を無視してしまう点です。
6:46単位違いや想定外の入力まで通してしまうため、厳密な検証が必要な場面では、
6:53全体を変換するナンバーと使い分けるか、入力形式そのものを別に確認してください。
6:59まとめです。
7:00パース・フロートは、文字列の先頭から小数を読み取るグローバル関数です。
7:06判断のポイントは三つです。
7:09まず、先頭の空白を読み飛ばし、符号と小数点を含む数値を、読める範囲まで読み取って止まること。
7:17次に、先頭から読めない場合や、カンマ付きの書式では失敗や途中終了になり、
7:21結果はナンや手前の値になること。
7:26そして、読み取った直後にナンバー・イズ・ナンで失敗を確認し、単位や形式の検証は別に行うことです。
7:35まずは記事の基本例をコンソールで実行し、単位やカンマに変えて、結果を予測してから確かめてみてください。
7:44お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

parseFloat()で文字列の先頭から小数を読み取る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのparseFloat()の使い方：引数・戻り値・実例と注意点 →