TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのparseIntメソッドでエラーが発生する際の対処方法について解説しています。ここではparseIntメソッドを使用したときに意図しない動作になりうる場面の例、それぞれの対処法を説明します。メソッドの基本の使い方とあわせて覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

parseIntメソッドでエラーが発生する際の対処方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

parseIntメソッドとは

文字列を解析し数値を返すメソッドです。
平たく言うと、’（シングルクォート）や”（ダブルクォート）で囲われた数字で書かれた文字列を数値に変換するときに使うメソッドになります。

 

[PR] コーディングで副業する方法とは

parseIntメソッドの使い方

parseIntメソッドはJavaScriptに標準で入っている関数なのでparseInt()のように直接記述して使うことができます。
引数は2つあり第1引数のみ必須です。

第1引数は整数に変換する文字列を指定します。第2引数は基数を指定する数値を指定します。基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。

省略した場合のデフォルト値は10ではないので注意してください。また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。

 

parseIntメソッドでエラーが発生する際の主な原因とその対処方法

parseIntメソッドでエラーが発生することはあまりありません。なぜならば、数値として解析する第1引数は全角でも数字以外の文字が含まれていても動作するからです。

エラーが発生するとしたら、第２引数の2〜36の整数で指定する基数を全角にしてしまうような構文エラーに近いものになるでしょう。

エラーにはならないものの意図しない動作になりうるパターンをいくつか紹介します。

第1引数の最初の1文字目が数字ではない

parseInt('あ123', 10)

この場合の戻り値は、NaN　となります。
NaNはNot-A-Numberの略で数ではないものを表すオブジェクトです。

第1引数の途中に数字以外の文字が含まれている

parseInt('123あいう456', 10)

この場合の戻り値は、123　となります。
数字以外の文字以降が無視されるためです。

第1引数が0から始まる数字で、第2引数が省略

parseInt('0123')

この場合の戻り値はブラウザによって異なる可能性があります。
0から始まる数を8進数とみなす解釈をするブラウザでは、83　が戻り値です。
10進数として扱うブラウザでは、123　が戻り値です。

第2引数に2〜36の間ではない数値が指定

parseInt('0123', 1)
parseInt('0123', 37)

この場合の戻り値はどちらも、NaN　となります。

 

まとめ

parseIntメソッドを紹介しました。
第2引数を指定することで意図しない動作の多くは防げます。
第2引数は指定するようにしましょう。

 

監修してくれたメンター

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでHTMLDocumentオブジェクトを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLDocumentオブジェクトを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
JavaScript

JavaScriptのbody内における読み込み処理(onload)について現役エンジニアが解説【初心者向け】

JavaScriptのbody内における読み込み処理(onload)について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向け...
JavaScript

JavaScriptで作成した要素にイベントを追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptで作成した要素にイベントを追加する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...
JavaScript

JavaScriptでsplitメソッドを使ってテキストを改行で分割して配列に格納する方法を現役エンジニアが解

JavaScriptでsplitメソッドを使ってテキストを改行で分割して配列に格納する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを...
JavaScript

JavaScriptでXMLをパースする方法を現役エンジニアが解説【初心者向け】

JavaScriptでXMLをパースする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptにおけるオブジェクト指向について現役エンジニアが解説【初心者向け】

JavaScriptにおけるオブジェクト指向について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そ...
JavaScript

あわせてよく読まれている記事

文字列を整数に変換！JavaScriptのparseInt( )の使い方【初心者向け】

JavaScriptでparseInt( )を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列を数値として定義することができる関数の使い方を解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   parseIntとは parseIntとは、文字列の整数を数値型の整数に変換するJavaScriptの組み込み関数（最初から使える関数）です。 JavaScriptでは、文字列の"1"と数値の1は厳密には別物として扱われます。 文字列の数字で計算処理などを行おうとすると、思わぬ不具合につながることがあります。 不具合を避けるために、明示的に文字列型の整数を数値型に変換するのが、この関数の役割です。   parseIntの基礎的な使い方 parseIntの最も基礎的な文法は、以下の通りです。 parseInt(str) strはstringの略称で、文字列を意味します。   さっそく、実際の用例を見てみましょう。 const str = "123" const num = parseInt(str); console.log(num); //-> 123 ここでは文字列型の”123″をstrという名前の変数に代入し、その変数をparseIntの引数に指定し実行しています。 parseIntの実行結果は返り値として取得できるため、返り値をnumという変数に代入しています。 結果、数値型に変換された123が出力されました。   [PR] コーディングで副業する方法とはparseIntを使わないとどうなるのか？ ここまで読んでも、いまいちparseIntでの変換を行う場合と行わない場合でどんな違いがあるのかイメージがつきませんね。 1つの大きな違いとして、足し算を行う場合の結果の違いが挙げられます。 const str1 = "3"; const str2 = "5"; console.log(str1 + str2); //-> "35" const num1 = parseInt(str1); const num2 = parseInt(str2); console.log(num1 + num2); //-> 8 str1 + str2 は、文字列の数字同士の足し算です。 ここではあくまで「文字列」として扱われるため、文字同士をそのまま結合した35が結果になります。 一方、num1 + num2 は、parseIntで数値型に変換された数字同士の足し算なので、通常の四則演算と同じく8が結果になります。 この例のように、型を意識しないプログラミングでは意図しない挙動を生んでしまうことがあります。 parseIntの用法はもちろん重要ですが、それ以上に「型を意識して開発する」ということが、長期的な観点では大事であるといえるでしょう。   parseIntの応用的な使い方（基数） parseIntには、以下のようなもう1つの記述パターンがあります。 parseInt(str, int) 第2引数intは、基数です。 基数とは、2進数や16進数の2や16の部分のことです。 基数を指定することで、変換前の数値を何進数で表現しているかについて宣言できます。 parseIntに基数を指定する用法は、数学的なロジックを扱う場合など、特殊なケースで用いることが多いため、現時点で必ず会得すべきものではありません。 しかし、parseIntと基数には1つ罠が潜んでいます。 それは、「デフォルトの基数が10進数ではないブラウザがある」ことです。 10進数は、普段用いる1,2,3…と続く数字の使い方です。 主要ブラウザの中でGoogle Chrome, Safari, Edgeでは、parseIntのデフォルトの基数が10進数であるため特に問題はないのですが、firefoxやoperaでは、このデフォルトが8進数になっています。 ブラウザによる挙動の違いによって、以下のようなレアケースでバグを引き起こす恐れがあります。 //Chrome, Safari, Edgeの場合 console.log(parseInt("08")); // -> 1 //Firefox, Operaの場合 console.log(parseInt("08")); // -> 0 8進数では”08″は0と変換されるので、このような違いが出てしまいました。 実際の開発で基数の違いによる不具合に遭遇することはまれですが、プログラミングをしていて些細な仕様の違いで悩まされることは多々あります。 上記のようなケースがあり得ることを認識していると、原因究明が素早くできるようになります。 今回の場合、ブラウザに依存せず10進数での結果を見るには、以下のように明示的に指定をしてやればよいですね。 parseInt("08", 10);   まとめ 本記事ではparseIntの基礎文法から、ブラウザによる仕様の違いまでを解説しました。 ポイントをまとめると以下の通りです。 parseIntは文字列型の数字を数値型に変換する関数 文字列のまま数字を扱うと、意図しない挙動を生むことがある parseIntのデフォルトの基数は、ブラウザによって異なる 本記事で紹介した内容をすべて覚えることは簡単ではないですが、大切なことは「こういうケースもあるのか」と新しい視点を発見し、今後の開発でその視点を活用していくことにあります。 parseIntを通じて特に会得しやすい視点は、繰り返しになりますが「型の意識」です。 自分が今扱っているのは文字列型なのか、数値型なのか？と、型を常に意識しながら開発することで、1つ上のレベルを目指すことができます！ 本記事は以上です。   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

JavaScriptのNumberとparseIntの違いを現役エンジニアが解説【初心者向け】

JavaScriptのNumberとparseIntの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 NumberとparseIntの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   Numberとは Numberとは、オブジェクトの1つで、文字列や数字などの引数をNumber型に型変換するための操作です。 JavaScriptでは、文字列はString型、数値はNumber型として扱われます   Numberの使い方 引数に”123″などの数字を文字列として渡すと、123などの数値に変換されます。 また、引数に”abc”などの値を渡すと、数字ではないため「NaN」という戻り値が返され、これは変換不可能という意味です。   [PR] コーディングで副業する方法とはparseIntとは 引数を解析することで整数を得ることができるオブジェクトです。 JavaScriptに標準で組み込まれた関数のため、いきなり使うことができます。   parseIntの使い方 引数に変換したい数字文字列をセットしましょう。 var int1 = parseInt("123") // 123 parseIntの正式な使い方 parseIntはparseInt(“123”)のように使われることが多いものの、本来は以下コードで使用可能です。 parseInt( 変換したい文字列 , 何進数かを明示 ); 例えば、通常は１０進数で整数を扱うときに以下のように記述します。 parseInt( "123" , 10 );   NumberとparseIntの違い NumberとparseIntの利用例を比較してみましょう。 利用例の比較 以下の３通りの引数を用意します。 ケース１：「7日」　（ 半角数字 + 漢字 ） ケース２：「0.1」 　（ 小数 ) ケース３：「010」　（ ゼロサプレスされていない数字 ） Number("7日") // NaN Number("0.1") // 0.1 Number("010") // 10 parseInt("7日") // 7 parseInt("0.1") // 0 parseInt("010") // 10 利用例の比較結果 ケース１では、parseIntは数字だけ解析して取り出すことが可能です。 この場合では、事前に文字列を加工してから数値変換した方がスムーズだといえます。 ケース２では、parseIntでは情報が欠落してしまいます。 parseIntは整数専用であり、この場合はparseFloat()を使いましょう。 ケース３では結果は同一であるものの、以前のバージョンでは、parseIntを使うと引数を8進数扱いされるため結果が 8 となっていました。 役割の違いを考える 通常の１０進数の取り扱いに関しては、Numberを使うことをオススメします。 しかし、２進数や８進数などの特殊な計算においては、parseIntの利用を検討すると良いでしょう。   まとめ 文字列を数値に変換したい場合には、Numberを使いましょう。 そして、時と場合によって使い分けていくことが重要です。   執筆してくれたメンター 寺谷文宏 WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。   大石ゆかり JavaScriptのNumberとparseIntの違いがよく分かったので良かったです！ 田島悠介 ゆかりちゃん、分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
JavaScript

JavaScriptのparseInt関数の使い方と扱える最大値について現役エンジニアが解説【初心者向け】

JavaScriptのparseInt関数の使い方と扱える最大値について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 parseInt関数を利用することで、文字列を整数に変換することが可能です。 実務でもpraseInt関数を利用した、値の変換処理を行うのでぜひ学習してみてくださいね。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのparseInt関数の使い方と扱える最大値について詳しく説明していくね！ 大石ゆかり お願いします！   目次 parseInt関数について parseInt関数で扱える最大値 実際に使ってみよう まとめ   parseInt関数について praseInt関数は文字列を整数に変換するJavaScriptの関数です。 parseInt関数はJavaScriptに標準で入っている関数で、グローバル関数とも呼ばれます。 使い方は、parseInt()のように直接記述して使うことができます。 引数は2つあり第1引数のみ必須です。 第1引数は整数に変換する文字列を指定します。 第2引数は基数を指定する数値を指定します。 基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。 省略した場合の標準値は10ではないので注意してください。 また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。   [PR] コーディングで副業する方法とはparseInt関数で扱える最大値 JavaScriptで正確に扱える数は、数値を表すNumberオブジェクトに定数として保持されています。 Number.MAX_SAFE_INTEGERは最大整数値(253 – 1)となっています。 Number.MAX_SAFE_INTEGERを整数で表すと9007199254740991です。 JavaScriptで表すことが可能な最大数値はNumber.MAX_VALUEに保持されています。 Number.MAX_VALUEは、2の1024乗である値となっていて、1.7976931348623157e+308（e+308は10の308乗）です。 実際に使ってみよう 実際にparseInt関数を使って、渡した引数と結果を確認してみます。 ‘1234’という文字列を10進数の1234にする場合は下記のように記述します。 parseInt('1234', 10); //1234 ‘0123’のような0から始まる文字列を10進数にすると、整数が返されるので頭の0がなくなり123が返されます。 parseInt('0123', 10); //123 ‘一二三’のような数値ではない文字列を10進数にすると、数値ではないことを表すNan（Not-A-Number）が返されます。 parseInt('一二三', 10); //NaN ’12月と1日’のような数値以外が含まれる文字列を10進数にすると、最初の数値ではない文字以降を無視するので12が返されます。 parseInt('12月と1日', 10); //12   まとめ 今回は、parseInt関数を紹介しました。 主に使うことの多い10進数に絞った結果の違いを見ましたが、他の基数でも基本的な考え方は同様です。 詳細はMDNのリファレンスページでも確認できます。 MDNのリファレンスページ この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：金融・小売・製造業種の基幹システムから人工知能や機械学習開発教育まで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

Javaで文字列の空白を削除する方法を現役エンジニアが解説【初心者向け】

Javaで文字列の空白を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 入力された名前や電話番号に含まれる不要な空白文字を削除する方法が分かります。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり 名前を入力させるプログラムを作っているんですが、余分なスペースが入っていてデータがそろわないんです・・・ 山田　太郎　　, 　　　山田　花子, 　山田　三郎 田島悠介 それは大変だね。 文字列を扱うString型からstripメソッドやreplaceAllメソッドで余分な空白文字を削除した文字列を取得できるよ。 大石ゆかり そんな便利な機能がString型にあるんですね。 田島悠介 そうなんだ。 文字列の前後の空白を削除するならstripメソッド、文字列中のすべての空白を削除するならreplaceAllメソッドが使えるよ。 どちらのメソッドも全角と半角スペースの両方に対応できるんだ。 大石ゆかり そうなんですね！さっそく使い方を教えてください！   前後の空白を削除する（stripメソッド） 文字列を扱うStringクラスにあるstripメソッドで、文字列の前後にある半角スペースと全角スペースの空白文字を削除した文字列を取得します。 ※stripメソッドは2017年から使えるようになったJava 11に含まれるメソッドです。stripメソッドが使えない場合、replaceAllメソッドかtrimメソッドを使います。replaceAllメソッドについては後半の解説記事「文字の間の空白を削除する（replaceAllメソッド）」、trimメソッドとstripメソッドの違いについては「stripメソッドとtrimメソッドの違い」の解説記事をご覧ください。 ※文字の間にある空白文字を削除する場合は、後半の解説記事にあるreplaceAllメソッドを使います。   書式 結果を代入する変数 = String型.strip(); stripメソッドに引数はありません。 String型で宣言した変数などからstripメソッドを呼び出します。 stripメソッドを呼び出された文字列から文字列の前後の空白文字（半角スペースと全角スペース）を削除した文字列が返されます。 また、改行コードやタブコードなども同様に削除できます。 stripメソッドを呼び出した文字列そのものが変化するわけではなく、戻り値として結果が返ります。   【参考】Javaの特殊な文字 Javaでは改行やタブなどの特殊な文字を表現する方法があります。 特殊な文字の前に、エスケープシーケンス（\または¥）をつけます。 改行は「\n」（または¥n）、タブは「\t」（または¥t）と表記します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュ（\）が円記号（¥）で表示される場合があります。   サンプルコード 前後に空白文字がある文字列から、前後の空白文字をstripメソッドで削除したものを取得します。 ソースコード public class StripSample { public static void main(String[] args) { //前後に空白文字が入った文字列 String str_han_sp = "   前後に半角スペース     "; String str_zen_sp = "　　前後に全角スペース　　　"; //加工前の文字列を表示
Java

JavaScriptのNumber.parseIntメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptのNumber.parseIntメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのNumber.parseIntメソッドについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Numberオブジェクトとは Number.parseIntメソッドの使い方 実際に使ってみよう まとめ   Numberオブジェクトとは JavaScriptに標準で入っている数値を表すオブジェクトです。 Numberオブジェクトには数値を扱う定数とメソッドを持っています。定数には、JavaScriptの数値で表せる最大値のMAX_VALUEや最小値のMIN_VALUEなどがあります。 メソッドには、今回紹介する文字列を数値に変換するperseIntや数値かどうかを判定するisIntegerなどがあります。 [PR] コーディングで副業する方法とはNumber.parseIntメソッドの使い方 NumberはJavaScriptに標準で入っているオブジェクトなので、そのままNumber.parseInt()と記述することで使えます。引数は2つあり第1引数のみ必須です。 第1引数は整数に変換する文字列を指定します。第2引数は基数を指定する数値を指定します。基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。省略した場合のデフォルト値は10ではないので注意してください。また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。 実際に使ってみよう 実際にNumber.parseIntメソッドを使って、渡した引数と結果を確認してみます。’1234’という文字列を10進数の1234にする場合は下記のように記述します。 Number.parseInt('1234', 10); //1234 ‘0123’のような0から始まる文字列を10進数にすると、整数が返されるので頭の0がなくなり123が返されます。 Number.parseInt('0123', 10); //123 ‘一二三’のような数値ではない文字列を10進数にすると、数値ではないことを表すNan（Not-A-Number）が返されます。 Number.parseInt('一二三', 10); //NaN ’12月と1日’のような数値以外が含まれる文字列を10進数にすると、最初の数値ではない文字以降を無視するので12が返されます。 Number.parseInt('12月と1日', 10); //12   まとめ Number.parseIntメソッドを紹介しました。主に使うことの多い10進数に絞った結果の違いを見ましたが、他の基数でも基本的な考え方は同様です。 詳細はMDNのリファレンスページでも確認できます。 MDNのリファレンスページ 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】