VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

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

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