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

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

文字列を数値として定義することができる関数の使い方を解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。

目次

• parseIntとは
• parseIntの基礎的な使い方
• parseIntを使わないとどうなるのか？
• parseIntの応用的な使い方（基数）
• まとめ
• JavaScriptを学習中の方へ

そもそも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の用法はもちろん重要ですが、それ以上に「型を意識して開発する」ということが、長期的な観点では大事であるといえるでしょう。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

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サービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する