TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseInt関数の使い方と扱える最大値について現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

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

初心者向けにJavaScriptのparseIntメソッドの使い方と扱える最大値について現役エンジニアが解説しています。parseIntメソッドとは文字列などを整数に変換する処理を行う関数です。parseIntメソッドで扱える最大値は、Numberオブジェクトの定数にあります。

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

JavaScriptのparseInt関数の使い方と扱える最大値について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

parseInt関数を利用することで、文字列を整数に変換することが可能です。

実務でもpraseInt関数を利用した、値の変換処理を行うのでぜひ学習してみてくださいね。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptの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で処理を終了する方法を現役エンジニアが解説【初心者向け】

JavaScriptで処理を終了する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &n...
JavaScript

JavaScriptでファイルを削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 J...
JavaScript

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

JavaScriptのgetDate()メソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptのおすすめGridライブラリ5選を現役エンジニアが紹介【初心者向け】

JavaScriptのおすすめGridライブラリ5選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
JavaScript

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エ

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法について、TechAcademyのメンター（現役エンジニア...
JavaScript

JavaScriptでクリックイベントを無効にする方法を現役エンジニアが解説【初心者向け】

JavaScriptでクリックイベントを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
JavaScript

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

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

JavaScriptでparseInt( )を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列を数値として定義することができる関数の使い方を解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次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

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

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次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

Javaで16進数を10進数に変換する方法を現役エンジニアが解説【初心者向け】

Javaで16進数を10進数に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 16進数を10進数に変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   進数とは 新数とは数字を表す概念のことです。 例えば、普段使っている0から9の組み合わせの数字は10個の数字を使用しているため10進数と呼びます。 新数には様々な種類があり下記のような新数が代表的です。 ・0と1の2つの数字のみを使用する場合は2進数 2進数「10」 -> 10進数「2」 2進数「11」 -> 10進数「3」 ・0から7までの8つの数字のみを使用する場合を8進数 8進数「6」 -> 10進数「6」 8進数「11」 -> 10進数「9」 ・0から9の数字に加えてAからFまでのアルファベットを使用して、16個の数字と記号を使用する場合は16進数 16進数「f」 -> 10進数「15」 16進数「ff」 -> 10進数「255」 Javaプログラムではこれらの10進数、2進数、8進数、16進数の4通りが使用可能です。   16進数を10進数に変換する方法 Javaのプログラムで16進数の数字を10進数の数字に変換するには、IntegerクラスのparseInt()メソッドを使用します。 以下、サンプルコードです。 Integer.parseInt(16進数文字列, 16) 第一引数は16進数の値を文字列で指定し、第二引数には基数となる「16」を使用しましょう。   [PR] コーディングで副業する方法とは10進数を16進数に変換する方法 Javaのプログラムで10進数の数字を16進数の数字に変換するには、IntegerクラスのtoHexString()メソッドを使用しましょう。 以下サンプルコードです。 Integer.toHexString(int型の10進数値) 引数に渡した10進数の値を16進数に変換します。 また、変換した値は16進数の文字列表現となる点は覚えておきましょう。   実際に書いてみよう 実際にサンプルプログラムで16進数から10進数への変換、10進数から16進数への変換を確認しておきましょう。 public class Change { public static void main(String[] args) { String hex = "fe"; int dec = Integer.parseInt(hex, 16); System.out.println(hex + " => " + dec); String hex2 = Integer.toHexString(dec); System.out.println(dec + " => " + hex2); } } 実行結果 fe => 254 254 => fe 16進数の値を10進数へ変換したり、10進数の値を16進数へ変換したりすることが可能です。   執筆してくれたメンター 松井紀明 メーカー系で17年エンジニアとして勤務後、現在はフリーのエンジニアとしてリモートワークで働いています。 Java、Perl、COBOL、最近ではRuby、PHP等、様々な言語での開発を経験しています。 TechAcademyではJavaコースを担当しています。   大石ゆかり Javaで16進数を10進数に変換する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaやServletの技術を使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
Java

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のメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 parseIntメソッドでエラーが発生する際の対処方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 parseIntメソッドとは parseIntメソッドの使い方 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

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。 目次parseInt関数についてparseInt関数で扱える最大値実際に使ってみようまとめこの記事を監修してくれた方 そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPの配列を結合するにはどうしたらいいですか？ 田島悠介 配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。 ただ連想配列でキーが同じだった場合に値が上書きされるよ。 大石ゆかり 連想配列？キー？上書き？　なんだか難しそうですね・・・ 田島悠介 聞いただけではイメージするのが難しいかもしれないね。 たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。 連想配列はこのキーが文字列の配列だね。 じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。 大石ゆかり お願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。   array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。 複数の配列をひとつに結合した配列を取得できます。 構文 結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。 配列のキーが同じ要素を結合すると？ 配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。 キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。 キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。 添字配列を結合する 配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。 ソースコード 色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。 配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ
PHP

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseInt関数の使い方と扱える最大値について現役エンジニアが解説【初心者向け】