TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで小数点を切り捨てる方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptで小数点を切り捨てる方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで小数点を切り捨てる方法について解説しています。小数点を切り下げるにはMath.floorかparseIntを使いますが違いがあります。数値がマイナスの場合に両者のメソッドによる小数点の切り下げの結果が異なってしまいます。

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

JavaScriptで小数点を切り捨てる方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

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

 

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

小数点を切り捨てる方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

JavaScriptで小数点を切り捨てる方法

JavaScriptで小数点を切り捨てる方法は、主に2つあります。

 

parseInt 関数を使う方法

parseInt 関数の書き方は以下のとおりです。

parseInt(string, radix)

stringには、数値となる文字列を指定します。文字列以外に数値も指定することができます。radixには基数を指定します。

例えば10進数なら10を指定します。省略した場合には10が設定されます。parseInt 関数について、詳しくは以下の記事が参考になるでしょう。

mozilla.org-parseInt

 

Math.floor 関数を使う方法

Math.floor 関数の書き方は以下のとおりです。

Math.floor(x)

xには数値に変換可能な値を指定します。Math.floor 関数について、詳しくは以下の記事が参考になるでしょう。

mozilla.org-Math/floor

 

実際に書いてみよう

今回のサンプルプログラムでは、parseInt と Math.floor それぞれについての記述例をご紹介します。

<!DOCTYPE html>
<html>
  <head>
  <script>
  // parseIntを使った方法
  var value = parseInt("3.14", 10);
  console.log( "parseInt", value );
 
  // Math.floorを使った方法
  value = Math.floor(1.4142);
  console.log( "Math.floor", value );
  </script>
  </head>
  <body></body>
</html>

実行結果は以下のようになります。Chromeの場合、デベロッパーツールのコンソールで確認できます。

それでは任意の位、例えば小数点第2位で切り捨てしたい場合にはどうしたら良いでしょう。そのような場合は、一旦位に合わせて乗算し、切り捨てられた数値に対して除算を行うことで実現できます。

// 任意の位で切り捨てする方法
value = Math.floor(3.141592 * 100) / 100;
console.log( value );

実行結果は以下のようになります。

 

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

筆者プロフィール

この記事を監修してくれた方

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでブラウザを閉じる方法を現役エンジニアが解説【初心者向け】

JavaScriptでブラウザを閉じる方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向け...
JavaScript

JavaScriptのsessionStorageの使い方を現役エンジニアが解説【初心者向け】

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

jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】

jQueryのAjax関数を利用したJavaScriptについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

かっこよく見せたい！jQueryでスライドショーを設置する方法【初心者向け】

JavaScriptのライブラリであるjQueryでスライドショーを設置する方法を紹介します。 コーポレートサイトやECサイトなどのトップに、取り扱ってい...
JavaScript

JavaScriptで変数名を取得する方法を現役エンジニアが解説【初心者向け】

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

Javascriptでスクロールバーをカスタマイズする方法を現役エンジニアが解説【初心者向け】

Javascriptでスクロールバーをカスタマイズする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
JavaScript

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

Javaで小数点を切り捨てる方法を現役エンジニアが解説【初心者向け】

Javaで小数点を切り捨てる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Java講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 小数点を切り捨てる方法について詳しく説明していくね！ 大石ゆかり お願いします！   Javaで小数点の切り捨て（及び切り上げ、四捨五入）を行う方法 Javaプログラムで小数点の切り捨て、切り上げ、四捨五入を行うには、それぞれMathクラスのfloorメソッド、ceilメソッド、roundメソッドを使用します。 切り捨て(floorメソッド) 対象の数値以下の整数値の中で、最も大きい整数値を求めます。たとえば、「15.02」の小数点以下を切り捨てると、「15.00」になります。 切り上げ(ceilメソッド) 対象の数値以上の整数値の中で、最も小さい整数値を求めます。たとえば、「15.4」の小数点以下を切り上げると、「16」になります。 四捨五入 対象の数値との差が最も小さい整数値を求めます。たとえば、「15.5」を四捨五入すると「16.0」になり、「15.4」を四捨五入すると「15.0」になります。   実際に書いてみよう 切り捨て、切り上げ、四捨五入をそれぞれ使用したサンプルプログラムで確認します。 public class MathSample { public static void main(String[] args) { double val1502 = 15.2; double val1505 = 15.5; System.out.println(val1502 + "の切り捨ては、" + Math.floor(val1502) + "です。"); System.out.println(val1505 + "の切り捨ては、" + Math.floor(val1505) + "です。"); System.out.println(val1502 + "の切り上げは、" + Math.ceil(val1502) + "です。"); System.out.println(val1505 + "の切り上げは、" + Math.ceil(val1505) + "です。"); System.out.println(val1502 + "の四捨五入は、" + Math.round(val1502) + "です。"); System.out.println(val1505 + "の四捨五入は、" + Math.round(val1505) + "です。"); } } 実行結果 15.2の切り捨ては、15.0です。 15.5の切り捨ては、15.0です。 15.2の切り上げは、16.0です。 15.5の切り上げは、16.0です。 15.2の四捨五入は、15です。 15.5の四捨五入は、16です。   [PR] コーディングで副業する方法とは監修してくれたメンター 松井紀明 メーカー系で17年エンジニアとして勤務後、現在はフリーのエンジニアとしてリモートワークで働いています。 Java、Perl、COBOL、最近ではRuby、PHP等、様々な言語での開発を経験しています。TechAcademyではJavaコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でも、JavaやServletの技術を使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。   また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
Java

Pythonで四捨五入、切り捨て、切り上げを行う方法を現役エンジニアが解説【初心者向け】

Pythonで四捨五入、切り捨て、切り上げを行う方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonで四捨五入、切り捨て、切り上げを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   四捨五入する方法 Pythonで四捨五入するにはround関数を使います。   round(number[, ndigits])   第一引数numberに四捨五入したい値を、第二引数ndigitsに有効桁数を入力することで、四捨五入した値を取得できます。 注意点として、round関数は「もっとも近い偶数」を返すようになっているので、 round(0.5) => 0, round(1.5) => 2, round(2.5) => 2 という結果になることに注意ください。 「0.5 は 1 に、2.5 は 3 に」といった一般的に想像される四捨五入の挙動とは異なるので、場合によってはプログラムのバグの原因になることもあります。 第二引数ndigitsを指定した場合の例をいくつか見てみましょう。   round(1.3456) # => 1 round(1.3456, 0) # => 1.0 round(1.3456, 1) # => 1.3 round(1.3456, 2) # => 1.35 round(1.3456, 3) # => 1.346   ndigitsを省略した場合はint型の結果が、ndigits = 0の場合は同じ値がfloat型で返ってきます。ndigitsに1以上を指定した場合は、指定桁の次桁以降の値を四捨五入した結果が返ってきます。 つまり、round(1.3456, 1)の場合は小数点第一桁が3なので、それ以降の456部分(0.0456)を四捨五入した値となります。   切り捨てする 切り捨てにはmath.floor関数を使います。 floorは「床」という意味なので、下側の値(= 切り捨てされた値)が取得できる、とイメージしておくと覚えやすいです。   math.floor(number)   math.floorには有効桁数の指定がないため、特定の桁で切り捨てを行いたい場合には自分で処理を書く必要があります。   [PR] コーディングで副業する方法とは切り上げする 切り上げにはmath.ceil関数を使います。 ceilは「天井」という意味なので、上側の値(= 切り上げされた値)が取得できる、とイメージしておくと覚えやすいです。   math.ceil(number)   math.ceilもmath.floorと同様に有効桁数の指定がないため、特定の桁で切り上げを行いたい場合には自分で処理を書く必要があります。   実際に書いてみよう Pythonの対話モードで色々と試してみましょう。   $ python ... >>>   対話モードが起動したら、まずはmathモジュールからfloorとceilをインポートします。 roundは標準組み込み関数なので、特に何もしなくてもそのまま使用できます。   >>> from math import floor, ceil   四捨五入や切り捨て、切り上げの対象とする変数numを定義して、round, floor, ceilに入力してましょう。   >>> num = 1.3456 >>> round(num) 1 >>> round(num, 0) 1.0 >>> round(num, 1) 1.3 >>> round(num,
Python

JavaScriptのMathオブジェクトのceil()関数について現役エンジニアが解説【初心者向け】

JavaScriptのMathオブジェクトのceil()関数について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのMathオブジェクトのceil()関数について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Mathオブジェクトとは ceil() 関数の概要と使い方 実際に書いてみよう まとめ   Mathオブジェクトとは JavaScriptで数学的な処理を行うにはMathオブジェクトを使用すると便利です。 Mathオブジェクトには数学関係の定数や関数などが格納されています。いくつか見てみましょう。 Math.E ：ネイピア数(自然対数の底) Math.PI ：円周率。焼く3.14159 Math.SQRT2 ：2の平方根。焼く1.414 Math.sin(x) ：引数に対するサイン(正弦)を返す Math.log(x) ：引数に対する自然対数を返す Math.round(x) ：引数を四捨五入して返す この他にも Math オブジェクトには様々な定数や関数が用意されています。Math オブジェクトについて、詳しくは以下の記事も参考にしてください。 MDN – Math   [PR] コーディングで副業する方法とはceil() 関数の概要と使い方 ceil()関数は引数を切り上げた結果を返す関数です。ceil()関数の構文は以下のとおりです。 Math.ceil(値) ceil() 関数について、詳しくは以下の記事も参考にしてください。 MDN – ceil()   実際に書いてみよう 今回のサンプルプログラムでは、 ceil()関数で切り上げを行う方法について確認します。合わせて、切り捨て、四捨五入を行う関数についてもみていきます。実行はChromeブラウザーのデベロッパーツールで行いましょう。 はじめはceil()関数を使った切り上げです。 console.log(Math.ceil(3.14)); console.log(Math.ceil(0.01)); console.log(Math.ceil(-6.5)); 実行結果は以下のとおりです。「0.01」のように微細な値でも切り上げとなります。またマイナスの値はゼロ方向に切り上げとなることに注意しましょう。 4 1 -6 次は切り捨てです。切り捨てを行うにはfloor()関数を使用します。 console.log(Math.floor(3.14)); console.log(Math.floor(0.01)); console.log(Math.floor(-6.5)); 実行結果は以下のとおりです。こちらもマイナスの値の時は切り捨てられる方向がプラスと逆になることに注意しましょう。 3 0 -7 最後は四捨五入です。四捨五入を行うにはround()関数を使用します。 console.log(Math.round(3.14)); console.log(Math.round(0.01)); console.log(Math.round(-6.5)); 実行結果は以下のとおりです。 3 0 -6   まとめ 今回の記事ではJavaScriptのMathオブジェクトのceil()関数について学習しました。   筆者プロフィール 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaでBigDecimalクラスを使って四捨五入する方法【初心者向け】

この記事では、Javaで四捨五入する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 四捨五入することで、数値をわかりやすく表示することが可能です。 実務でも、四捨五入、切り上げ、切り捨てなどを利用するので、ぜひ学習してみてください。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。 目次JavaScriptで小数点を切り捨てる方法実際に書いてみよう筆者プロフィール そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 四捨五入する方法について詳しく説明していくね！ 大石ゆかり お願いします！   四捨五入をする方法 javaで四捨五入を行う場合、java.math.BigDecimalクラスを使います。 BigDecimalクラスは小数点を含む計算を厳密に行いたいときに使います。 加算、減算、乗算、除算など通常に四則演算に加え、数値の比較や各種の丸め等ができます。 前提 サンプルコード import java.math.BigDecimal; 解説 import java.math.BigDecimal;では、BigDecimalクラスをインポートして利用する準備をしています。 BigDecimalクラスをインポートすることで、BigDecimal処理を実行できるようになります。 基本的な文法 サンプルコード 変数.setScale(小数点指定, BigDecimal.BigDecimalのメソッド指定) 解説 変数に、BigDecimalクラスで処理する数値が入った変数を指定します。 .setScaleメソッドを利用して、小数点以下の桁数を丸める指定を行います。 小数点指定では、小数点第何位で処理を行うかを指定します。 2を指定すると、1.2345というデータであれば、1.23のように小数点第２位までで処理することを意味します。 BigDecimalでは、BigDecimalクラスを利用することを意味します。 BigDecimalのメソッド指定の部分に、使用するBigDecimalクラスのメソッドを指定することで、四捨五入、切り上げ、切り捨てなどの処理を行うことができます。 BigDecimalのメソッド ここでは、BigDecimalのメソッドの例を3つ紹介します。 四捨五入 切り上げ 切り捨て 四捨五入 BigDecimal.ROUND_HALF_UPのようにして、ROUND_HALF_UPメソッドを利用すると四捨五入できます。 切り上げ BigDecimal.ROUND_UPのようにして、ROUND_UPメソッドを利用すると切り上げできます。 切り捨て BigDecimal.ROUND_DOWNのようにして、ROUND_DOWNメソッドを利用すると切り捨てできます。   実際に書いてみよう ここでは、BigDecimalクラスを使って四捨五入、切り上げ、切り捨てした数値を表示するプログラムを解説します。 サンプルコード import java.math.BigDecimal; public class Main { public static void main(String[] args) { BigDecimal bd = new BigDecimal(1.2345);//BigDecimal BigDecimal bdROUND_HALF_UP = bd.setScale(2, BigDecimal.ROUND_HALF_UP);//四捨五入 BigDecimal bdROUND_UP = bd.setScale(2, BigDecimal.ROUND_UP); //切り上げ
Java

JavaScriptで数値の切り上げをする方法を現役エンジニアが解説【初心者向け】

JavaScriptで数値の切り上げをする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで数値の切り上げをする方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptで数値の切り上げをする方法 JavaScriptで数値の切り上げや切り捨て、四捨五入を行うにはMathオブジェクトの関数を使用します。 切り上げ Math.ceil(数値) 切り捨て Math.floor(数値) 四捨五入 Math.round(数値) いづれも小数第一位に対して演算を行います。異なる小数位に対して演算を行うには対象の位が第一位になるよう乗算し、演算後に元に戻すような工夫が必要となります。 Mathオブジェクトについて、詳しくは以下も参考にしてください。 MDN Math   実際に書いてみよう 今回のサンプルプログラムでは、小数点第一位と第四位で演算を行う方法を確認します。 実行結果はブラウザのコンソールに表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script language="javascript" type="text/javascript"> // 基となる値 const val = 3.141592; console.log(`もとの値:${val}`); // 切り上げ var calc = Math.ceil(val); console.log(`切り上げ:${calc}`); // 切り捨て calc =
JavaScript

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

JavaScriptでparseInt( )を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列を数値として定義することができる関数の使い方を解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次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の用法はもちろん重要ですが、それ以上に「型を意識して開発する」ということが、長期的な観点では大事であるといえるでしょう。   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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptで小数点を切り捨てる方法を現役エンジニアが解説【初心者向け】