JavaScriptの数値計算とは？演算子やライブラリの例を紹介

言語・開発

プログラミング言語

JavaScript

ライブラリ

アンドエンジニア編集部

2024.03.21

この記事でわかること

JavaScriptでは整数と小数を区別せずに数値型「Number」として扱う

JavaScriptでは算術演算子・代入演算子などの様々な演算子を使って数値計算を行う

JavaScriptの浮動小数点数の計算で発生する丸め誤差は、数値計算ライブラリの活用で抑えられる

Facebook

LINE

Hatena

JavaScriptで行う計算とは

JavaScriptは、HTMLと組み合わせて動的なWebサイトの構築に使われる、オブジェクト指向のスクリプト言語です。現在では、ブラウザのみならずNode.jsなどのフレームワークでサーバサイドでの実行も可能で、幅広い開発現場で使用されています。

JavaScriptではどのように数値計算を行うことができるのでしょうか。

この記事では、JavaScriptの数値計算について学びたい方のために、JavaScriptの計算の基礎や、様々な演算子について解説します。また、簡単な計算フォームの実装例や、数値計算ライブラリについても説明します。

JavaScriptとは？特徴・メリット・何ができるのかを解説

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

JavaScriptの計算の基礎

まず、JavaScriptで扱われる数値型である「Number」について説明します。また、基本的な演算子の種類とその動作、優先順位の概要、インクリメントとデクリメント演算子について見ていきましょう。

JavaScriptで扱われる数値型

他のプログラミング言語では、整数と小数をそれぞれ専用のデータ型で管理することが一般的ですが、JavaScriptでは、数値を表すデータ型が「Number」の1つのみです。

JavaScriptでは整数と小数の違いを意識することなく、Number型のデータとして区別せずに扱えます。

例えば、整数と小数を足し合わせた結果も、Number型として表現できます。計算の過程で整数から小数に変換されたり、その逆のケースが発生したりしても、プログラマーが型変換を心配する必要がありません。

基本の算術演算子

JavaScriptでは、他のプログラミング言語同様、基本的な算術演算を行うための演算子が用意されています。その中でも代表的なものが、加算「+」、減算「-」、乗算「＊」、除算「/」、剰余「%」です。

■加算演算子「+」 2つの値を足し合わせた結果を新しい値として返します。数値どうしの足し算はもちろん、文字列同士の連結にも使用できます。

■減算演算子「-」 値から別の値を引いた差を返します。マイナス値の指定にも利用できます。

■乗算演算子「＊」 2つの値をかけ合わせた積を、除算演算子（/）は割り算の結果である商を返します。JavaScriptは小数を区別しないため、除算した結果が小数になる場合でも気にする必要がありません。

■剰余演算子「%」 2つの値の割り算を行い、剰余を返します。割り算のあまりを求めるのに用います。

演算子の前後にある値を、オペランドと呼びます。演算子とオペランドを組み合わせて式を作ります。例えば、「3 + 5」の式では、「3」と「5」がオペランドです。数値計算においてはよく聞く用語なので覚えておきましょう。

演算子の優先順位

JavaScriptの演算子には優先順位があります。乗算と除算が常に最初に計算され、その後に加算と減算が実行されます。これは、通常の数学の授業で習う優先順位と同様です。

例えば、次の式を考えてみましょう。

3 + 2 * 4

この式では、乗算が加算よりも優先されるため、2 * 4が先に計算されて8になります。その後、3 + 8が計算されて11になります。

また、括弧を使用すると特定の演算子を優先的に計算させることもできます。例えば、次の式では、加算が先に計算されるため、5 * 4 = 20ではなく、3 + 2 = 5になります。

(3 + 2) * 4

インクリメントとデクリメント

プログラミングで繰り返し値を増減させたい場合に便利なのがインクリメント演算子（++）とデクリメント演算子（--）です。

インクリメントは変数の値を1増やす操作で、例えば以下のコードでは、変数xの値が1増えて1が表示されます。

var x = 0;
++x;

デクリメントは逆に変数の値を1減らす操作です。次の様に記述すると、変数xの値が1減って0が表示されます。

var x = 1;
--x;

JavaScriptでよく使われる演算子とは

JavaScriptの計算では、算術演算子以外にも様々な演算子が使われます。ここでは、使用頻度の高い主要な演算子について解説します。

代入演算子

プログラミングにおいて、変数に値を代入する際に代入演算子が使われます。JavaScriptでは、例えば「x = 1」と記述することで、変数xに値1を代入することができます。この「＝」が代入演算子です。

代入演算子は、算術演算子などと組み合わせて、計算結果を変数に再代入する複合代入演算子としても使われます。

例えば、複合代入演算子「+=」を使って「x += 10」と記述すると、変数xの値に10を加えた結果が再び変数xに代入され、「x = x + 10」と同じ意味になります。

加算以外にも、減算「-=」、乗算「*=」、除算「/=」、剰余「%=」といった複合代入演算子があります。

論理演算子

論理演算子は、プログラミングにおける条件分岐の設定などに使用される演算子です。

JavaScriptでは主に、「1」「True」と「0」「False」で表す論理値（ブール値）を扱うために、「&&」（論理積）、「||」（論理和）、「!」（論理否定）といった論理演算子が用意されています。

「&&」は、両方のオペランドがtrueの場合にtrueを返し、それ以外の場合はfalseを返します。一方、「||」は、どちらかのオペランドがtrueであればtrueを返し、そうでない場合はfalseを返します。

また、論理否定演算子「!」は、単一のオペランドがtrueに変換できる場合はfalseを、そうでない場合はtrueを返します。

比較演算子

比較演算子は、値を比較するための演算子です。JavaScriptには様々な比較演算子があります。一覧で見てみましょう。

■等価演算子「==」 オペランドが等しい場合にtrueを返す ■不等価演算子「!=」 オペランドが等しくない場合にtrueを返す ■厳密等価演算子「===」 オペランドが等しく、かつ同じ型である場合にtrueを返す ■厳密不等価演算子「!==」 オペランドが同じ型で値が等しくないか、型が異なる場合にtrueを返す ■大なり演算子「>」 左のオペランドが右のオペランドよりも大きい場合にtrueを返す ■大なりまたは等号演算子「>=」 左のオペランドが右のオペランド以上である場合にtrueを返す ■小なり演算子「<」 左のオペランドが右のオペランドよりも小さい場合にtrueを返す ■小なり小なりまたは等号演算子「<=」 左のオペランドが右のオペランド以下である場合にtrueを返す

これらの比較演算子は、オペランドを比較してその結果に基づいて論理値を返します。例えば、等価演算子「==」を使った以下のコードは、オペランドが等しいためtrueを返します。

1 == 1

また、不等価演算子「!=」を使った以下のコードは、オペランドが等しくないためtrueを返します。

1 != 2

JavaScriptでは、等価演算子と不等価演算子では異なる型のオペランドを比較する際に、そのオペランドを比較に適した型に変換しようとしますが、厳密等価演算子や厳密不等価演算子は、比較する前にオペランドを適合する型に変換しません。

厳密等価演算子や厳密不等価演算子を使うことで、異なる型のオペランドを比較する際に、型の変換による予期せぬ挙動を避けることができます。

文字列連結演算子

JavaScriptでは、文字列を連結するために「+」を使用します。例えば、「Hello」と「world」を連結する場合は、「"Hello" + "world"」のように記述します。

この演算子は、両方のオペランドが文字列である必要があります。文字列以外のオペランドと文字列を連結しようとする場合、JavaScriptは自動的にそれらを文字列に変換してから演算します。

例えば、文字列と数値のオペランドを連結しようとする以下のコードは、「12」を返します。

"1" + 2

JavaScriptで作る簡単な計算フォーム

ここでは、HTMLとJavaScriptを組み合わせた簡単な計算フォームの作成例を見てみましょう。計算には加算、乗算、除算などの基本的な算術演算子を使用しています。

足し算計算フォームの例

それでは、HTMLとJavaScriptを組み合わせた、Webブラウザ上で動作する簡単な数値計算フォームの実装例を見てみましょう。

このフォームでは、HTMLで入力フィールドとボタン、そして結果を表示する領域を設け、JavaScriptでボタンがクリックされたときの動作を定義しています。

入力フィールドに数値を入れてボタンをクリックすると、入力された取得した2つの数値をJavaScriptの算術演算子「+」で足し算して、計算結果を画面に表示します。

<!DOCTYPE html>
<html>
<head>
  <title>簡単な計算フォーム</title>
</head>
<body>
  <h1>簡単な計算フォーム</h1>
  <label for="num1">数値1:</label>
  <input type="number" id="num1">
  <br>
  <label for="num2">数値2:</label>
  <input type="number" id="num2">
  <br>
  <button onclick="calculate()">計算する</button>
  <br>
  <p id="result">結果: </p>
  <script>
    function calculate() {
      // 入力された数値を取得
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);
      // 足し算を実行し、結果を表示
      var result = num1 + num2;
      document.getElementById('result').textContent = '結果: ' + result;
    }
  </script>
</body>
</html>

実際にこのコードをテキストエディタに貼り付けてHTML形式で保存し、ブラウザで動きを確認してみてください。

パーセント計算の例

次は、パーセント計算のフォーム実装例を見てみましょう。このフォームで使用される算術演算子は、乗算「*」、除算「/」です。HTMLのinput要素からは文字列型の値が取得できるので、parseFloat()関数で数値型に変換して計算しています。

入力した元の値に対して、指定したパーセンテージの値がいくつであるかを計算します。計算結果は、「元の値 * パーセンテージ / 100」の式で求められます。

<!DOCTYPE html>
<html>
<head>
  <title>パーセンテージ計算フォーム</title>
</head>
<body>
  <h1>パーセンテージ計算フォーム</h1>
  <label for="originalValue">元の値:</label>
  <input type="number" id="originalValue">
  <br>
  <label for="percentage">パーセンテージ:</label>
  <input type="number" id="percentage">
  <br>
  <button onclick="calculatePercentage()">計算する</button>
  <br>
  <p id="result">結果: </p>
  <script>
    function calculatePercentage() {
      // 入力された値を取得
      var originalValue = parseFloat(document.getElementById('originalValue').value);
      var percentage = parseFloat(document.getElementById('percentage').value);
      // パーセンテージを計算し、結果を表示
      var result = (originalValue * percentage) / 100;
      document.getElementById('result').textContent = '結果: ' + result;
    }
  </script>
</body>
</html>