（最終更新月：2023年11月）
✔当記事は以下のような疑問を持つ方に最適です
「parseInt関数って正確にはどのような役割があるの？」
「JavaScriptでparseIntを使う正しい方法を学びたい」
「具体的なparseIntの使用例が見てみたい」
✔当記事がお届けする内容
- parseInt関数の基礎知識
- JavaScriptにおけるparseIntの効果的な利用法
- parseIntの実用的な使用例
当記事を読むことで、parseInt関数の基本的な理解から、実際のコード内での賢い使い方まで、実際のコードを交えてわかりやすくご説明します。
ぜひ記事の最後まで、ご覧ください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
はじめに: JavaScriptとparseIntの役割
こちらでは、「JavaScriptとparseIntの役割」についてお伝えしていきます。
初心者にも分かりやすく、この関数がプログラミングにおいてなぜ重要なのか理解しましょう。
- JavaScriptでのデータ型変換の必要性
- parseIntがプログラミングにおいて担う役割
- 初心者が押さえておくべき基礎知識
JavaScriptでのデータ型変換の必要性
JavaScriptでは、以下のような場面でデータ型変換が必要不可欠です。
- 異なるデータ型同士で演算をおこなう
- APIから受け取ったデータを扱う
ユーザーからの入力が文字列として受け取られる時、これを数値として計算に使いたい場面があります。
parseInt("123")文字列”123″が数値の123に変換されます。
parseIntがプログラミングにおいて担う役割
parseInt関数は、文字列から整数を取り出して、それを数値型に変換する役割を担います。
とくに以下のような場面で使える関数です。
- フォームからの入力値を数値として扱う
- 文字列から特定のフォーマットの数値を取得する
たとえば、ユーザーが入力した郵便番号データを数値に変換し、計算や確認に使えます。
parseInt("12345")初心者が押さえておくべき基礎知識
まず初心者が理解すべきは、parseIntにおける以下のような特徴です。
parseIntは文字列の先頭から数値に変換可能な部分のみを数値として取得- 変換不可能な文字が現れるとそれ以降は無視される
また、parseInt関数はオプションで基数（radix）を指定でき、変換する数値の進数を明確化できます。
parseInt("10", 8)文字列”10″を8進数として解釈し、10進数で8という数値を返します。
基本を押さえる: parseIntの構文
こちらでは、「parseIntの構文」について詳しく解説していきます。
構文の全体像を把握することで、実際のコーディングにおいて正しくparseIntを使用できるでしょう。
- 構文の全体像
- 引数の意味と役割
- 処理結果としての返値
- parseIntの使用時の一般的なエラー
構文の全体像
parseInt関数の一般的な構文は以下のとおり。
parseInt(string[, radix])第一引数は変換したい文字列で、必須です。
オプショナルな第二引数radixは、文字列をどの進数の数として解釈するかを示す整数です。
radixは、2~36の範囲で指定します。
parseInt("1010", 2)2進数の文字列”1010″を10進数の10に変換します。
引数の意味と役割
parseInt関数の第一引数は、数値に変換を試みる対象の文字列です。
第二引数radixは、対象文字列を解釈する際の基数、すなわち何進数とみなすかを指定します。
基数を省略した場合は自動的に10進数と見なされることが多いですが、エラーを避けるため常に明示的な基数の指定がおすすめです。
処理結果としての返値
変換可能な文字列は数値に変換されますが、変換不能な文字列を与えた場合はNaN（Not a Number）を返します。
parseInt("abc", 10)数値に変換できないので、結果はNaNになります。
parseInt("123abc", 10)文字列”123abc”を解釈し、数値123を返します。
parseIntの使用時の一般的なエラー
初心者がparseIntを使用する際にありがちなエラーは、基数の誤解や引数の形式の誤りです。
基数を省略した結果、0から始まる文字列が8進数（旧仕様）と解釈されるなどの混乱が起きることがあります。
また、空白を含む文字列や特殊文字が先頭にある場合、意図しない変換結果になることがあるでしょう。
正しい構文と引数を与えることで、このようなエラーを回避できるのです。
動きを見る: parseIntの使い方
「parseIntの使い方」を具体例を交えて詳しく見ていきます。
基本的な文字列から整数への変換方法から、進数の指定まで、実際の例で学びましょう。
- 文字列から整数への基本変換
- 進数を考慮した変換
- 第二引数を使った進数指定の例
文字列から整数への基本変換
parseIntの基本的な使い方は、数字の形をした文字列を整数に変換することです。
parseInt("42")数値の42を返します。
変換不能な文字がある場合、parseInt("42px")のように文字列の途中に文字が含まれていると、そこまでを数値として認識し、結果は42になります。
進数を考慮した変換
進数を考慮した変換は、主に異なる進数表記から10進数へ変換する際に使用します。
parseInt("0xF", 16)16進数”0xF”を10進数の15として解釈し、数値15を返します。
parseInt("075", 8)8進数として解釈し、10進数で61を得ることができます。
第二引数を使った進数指定の例
第二引数を明示的に使う例を見ていきましょう。
parseInt("1010", 2)文字列”1010″を2進数と解釈し、10進数の10を返します。
第二引数を省略すると、次のように予期せぬ結果になることがあるため注意が必要です。
parseInt("010")一部のJavaScriptエンジンでは8進数と解釈されて10進数の8を返す可能性がありますが、ECMAScript 5以降では10進数として10を返します。
常に意図した進数を得るためには、第二引数を省略しないことが重要です。
よくある使い方: 実用的なparseInt例
parseIntは多様なシナリオで役立ちますが、ここでは実際によく使われる例を紹介します。
具体例を通じてparseIntの応用力を高めましょう。
- 数値への変換：いくつかの練習例
- 非文字列の変換シナリオ
- 文字列に混じった数値の抽出
- URLや日付文字列からの数値抽出方法
数値への変換：いくつかの練習例
一番基本的な使い方は、単純な数字の文字列を数値に変換することです。
例えば、ユーザーが入力した”1000″円の文字列をparseInt("1000")で数値化し、計算に使えます。
また、単位が付いた”200px”のような文字列から数値を取り出す場合も同様です。
parseInt("200px")を実行すると、得られるのは200という数値です。
非文字列の変換シナリオ
たとえばnullやtrue、falseなどをparseIntに渡す場合、どのような挙動をするでしょうか？
parseInt(null)やparseInt(true)、parseInt(false)を実行すると、それぞれNaNが返されます。
しかしながら、空白文字、たとえばparseInt(" ")は0です。
これらは、parseIntが文字列を引数として期待しており、そのほかの型が渡されると予期せぬ動作となるため、適切な型の入力をすることが大切です。
文字列に混じった数値の抽出
ウェブアプリケーションでよく見られる例として、文字列の中に含まれる数値を抽出するようなケースがあります。
例えば、ユーザーIDが”ID1234″のような形式であった場合、parseIntで数値の1234を取り出せます。
parseInt("ID1234")重要なのはparseIntが数値以外の文字列を無視して、数値のみを取り出すという特性を理解することです。
URLや日付文字列からの数値抽出方法
Web開発でよく遭遇するのが、URLのクエリパラメータや日付フォーマット文字列から数値を抽出する場合です。
たとえば、URLのページ番号を示すクエリ”?page=2“から数値を取り出すには、以下のコードで、2を取得できます。
parseInt("page=2".match(/\d+/)[0])また、”2023-03-15″のような日付文字列から年を取り出すコードはこちら。
parseInt("2023-03-15".substring(0, 4))年の部分の2023という数値を抽出できます。
留意すべき点: parseIntを使う際の注意
parseIntを有効に活用するためには、いくつかの重要な点に注意を払う必要があります。
誤解しやすい挙動やエラーを避けるために、以下の点を留意しましょう。
- NaNが出現する場合の理解
- 混在する進数の取り扱い
- 非数値文字列の扱いとエラーハンドリング
- parseIntとparseFloatの違い
NaNが出現する場合の理解
文字列が数値に変換できない場合、parseIntはNaNを返します。
これを理解しないと、計算や処理の流れで意図しないエラーが発生する原因となるからです。
たとえば、parseInt("Hello World")はNaNを返します。
このような場合には、isNaN関数を使うことでNaNが返っているかをチェックし処理を分岐させることが可能です。
混在する進数の取り扱い
この進数の混在を避けるために、parseIntを使う際は常に第二引数で基数を指定する習慣をつけるべきです。
JavaScriptでは、文字列の先頭が”0x”や”0X”で始まる場合は16進数と見なされます。
ただの”0″で始まる場合はかつて8進数と見なされることがありましたが、ECMAScript 5からは直接10進数として扱われます。
非数値文字列の扱いとエラーハンドリング
parseIntを用いる際、数字ではない文字列が貰える可能性があることを念頭に置いておくべきです。
とくに、ユーザー入力をそのまま処理する場合、正しいエラーハンドリングが不可欠。
例えば、ユーザーが数字を期待される場所にアルファベットを入力した場合、適切なエラーメッセージを提供し、再入力を促すことが大事です。
parseIntとparseFloatの違い
parseIntと混同しやすいparseFloat関数もありますが、この2つは異なる目的で使われます。
parseIntは整数を返し、parseFloatは浮動小数点数を返します。
parseFloat("3.14")3.14という数値を返します。
parseInt("3.14")parseIntは整数値を返すので、返り値は3です。
これらの違いを理解しておくことで、さまざまな数値変換のニーズに対応することが可能になります。
parseIntを使うためのベストプラクティス
parseInt関数の使用法を総合的に理解することで、JavaScriptにおける数値変換のスキルを高め、より実践的なアプリケーション開発に役立てましょう。
- 文字列の数値化の要点再確認
- より効果的なparseIntの利用法
- 進数変換テクニックとヒント
文字列の数値化の要点再確認
parseIntを使用する主な目的は、文字列から数値を取り出し、それを整数型に変換することです。
この関数は文字列の先頭から数値に変換可能な部分を読み取り、最初の非数値文字で処理を停止します。
正しい基数（radix）を指定することで、想定したデータ形式での変換が可能です。
より効果的なparseIntの利用法
parseIntをより効果的に使用するには、入力データを適切に前処理することが重要です。
例えば、前もって正規表現を使用し、不要な文字を事前に除去するなどの操作により、parseIntの処理をより確実なものできます。
また、数値変換が失敗した場合に備え、常にNaNのチェックを行うことも忘れずに。
進数変換テクニックとヒント
parseIntでは基数を活用し、異なる進数間の変換をおこなうのが一般的です。
スクリプト内で進数を継続的に扱う場合は、便利な関数やライブラリを作成することで、コードの可読性と効率をさらに向上させられます。
クロスブラウザ対応や最新のECMAScript仕様に基づいたコーディングを意識することは、さらなる技術向上に繋がります。
まとめ
当記事では、JavaScriptのparseInt関数について学習してきました。
文字列から数値への変換を正確に行うためには、データの前処理から関数の正しい使用法、さらにはエラーハンドリングまで、総合的な理解が求められます。
今回学んだ知識を実際のコーディングに活かし、フロントエンド開発のスキルを高めましょう。
最後までご覧いただき、ありがとうございます。