JavaScript 数値計算と操作 基本的な算術演算子

本日はJavaScript数学のお時間となります。

これは人によって得意、不得意が分かれるかと思います。

ですが世界中の誰もが数学は私たちが生きていく上でなくてはならない、基本的な部分であることを否定することはできません、それは事実です。

これはJavaScriptまたはプログラミングに関わる、その他言語でも当てはまります。

ですのでまずは基本的な数値の操作を学びましょう。

数値型と演算子

JavaScriptでは、数値(Number)はプリミティブデータ型です。

数値データ型は、小数点付きまたは小数点なしの正または負の数値、または指数表記を使用して記述された数値を表すために使用されます。

最新のJavaScriptには、主に2種類の数値があります。

JavaScriptの通常の数値は、『倍精度浮動小数点数(ばいせいどふどうしょうすうてんすう)』とも呼ばれる64ビット形式で格納されます。

つまり整数値と小数値の両方を格納しています。

これは、普段から我々が使用してる数値となります。

もう１つは、任意の長さの整数を表す『BigInt』数値です。

これはJavaScriptプログラマーがデータ型でサポートされている範囲よりも大きい整数値を表現できるようにすることを目的とした時に、このBigInt数値を使用すると、整数演算の実行時に整数のオーバーフローについて心配する必要はありません。

言い換えれば、整数制限を超えても大きな整数を安全に格納および操作できるという事です。

BigInt番号は、整数の末尾にnを追加することによって作成されます。

const value = 9007199251247n

const value1 = value + 1n;

console.log(value1) 
// 9007199251248

bigintはいくつかの特別な領域で使用されるため、特別なBigIntを使用します。

多くのブラウザではサポートされておりません。

bigintは8つのデータ型のうちJavaScriptの2番目の数値データ型です。

bigintは別の機会で記事に致します。

JavaScript算術演算子を使用して、オペランド(値や変数)に対して数値演算を実行します。

つまり算術演算子は２つの値などを取り、それらに対して計算を実行する数学関数であり特定の記号を使用します。

算術演算子	記号	概要
加算	+	足し算の計算
減算	-	引き算の計算
乗算	*	掛け算の計算
除算	/	割り算の計算
剰余	%	あまり
べき乗	**	累乗

数値の定義方法

JavaScriptの数値の定義方法は2つございます。

• 数値リテラル
10,25,45など

const num1 = 15;

const num2 = 12.55;

console.log(num1, typeof num1);
 // 15, number
console.log(num2, typeof num2);
// 12.55, number

• 数値コンストラクター
任意の文字列またはその他のデータ型を数値に変換できます。

数値に変換できない場合は、NaNに変換されます。

NaNは計算エラーを表します、詳しくは後に解説致します。

数値コンストラクターを使用して数値を作成するにはNumber()、関数コンストラクターとして使用し、引数として数値を渡してあげます。

const num1 = Number(25);
const num2 = Number(12.55);

console.log(num1, typeof num1);
// 25, number
console.log(num2, typeof num2);
// 12.55, number

本来通常ではブラウザは自動的にNumberリテラルをNumberクラスのインスタンスに変換します。

10進数

プログラミングでは、私たち全員がよく知っている日常生活で使用する10進数でさえ、想像を遥かに超えているため複雑です。

10進数システムの数値の範囲は0〜9となっており、0〜9の組み合わせを使用して数値を定義するのは10進数となります。

指数表記

数字を書く際_区切り文字としてアンダースコアを使用することが可能です。

const num = 1_000_000_000;

このアンダースコアは『シンタックスシュガー』の役割を果たし、数値をより読みやすくします。

しかし実際では上記のように長く記述しないように心掛けております。

つまり、何十、何百億または何兆のような数字を書く際は非常に長くなり不便です。

そのような数値をより簡単に書ける方法を提供します。

JavaScriptでは、指数表記『e』を追加してゼロの数を指定することで、数値を短縮および大きすぎる数または小さすぎる数を含めることが可能となります。

const num = 1e9;  

console.log(num);
//1000000000

つまり与えられたゼロカウントでe数値を乗算します。

非常に小さな数値の場合

// const mсs = 0.000001;の場合

const mcs = 1e-6;

console.log(mcs)// 0.000001

後の負の数(e)は、指定された数のゼロで1で除算します。

1000は『1e3』、0.001は『1e-3』、0.002は『2e-3』、50000は『5e4』などと書くことが可能となります。

JavaScriptでは、16進数、2進数または8進数表記で表すことができる整数と浮動小数点の両方の数値をサポートしております。

他の言語とは異なり、JavaScriptは整数と浮動小数点を異なる方法で処理はしません。

JavaScriptでのすべての数値は、浮動小数点数として表されます。

16進数はJavaScriptで色の表現、文字のエンコードなど、さまざまな目的で広く使用されております。

当然のことながら、それらを書くためのより短い方法があります

xそして数です。

const a = 0xff;  
const b = 0xb4; 
const c = 0x00; 

console.log(a) //  255

console.log(b) //  180

console.log(c) // 0

const num1 = Number(0x22); // 34
const num2 = Number(0x1e2); 482

整数は、10進数、16進数、および8進表記で表すことができ、浮動小数点は10進表記または指数表記で表す。

ですが2進数および8進数は滅多に使用する事はありません。

const a = 0b11111111; //255

const b = 0o377; //8進数の255

JavaScriptでは基本的には16進数・2進数または8進数の3つという事です。

加算

JavaScript算術演算子は、2つの数値である変数を計算しますが加算演算子( + )は少し異なり曖昧な部分があります。

それは被演算子(変数や値)の片方1つが文字列だった場合です。

文字列付き+は連結に使用されます。

つまり、『連結』と『加算』両方の意味があるという事です。

console.log("20" + 21) // 2021

console.log("12.34" + 34) // 12.3434

JavaScriptでは文字列が見つかった場合は、他の値を文字列として変換します。

これはオブジェクトの場合であっても同様です。

console.log('21' + []); // 21

console.log('21' + {}); // 21[object object]

ブール値を含む数値の場合

ブール値である『true』は1に変換され、『false』は0に変換されます。

ですので、ブール値を含んだ数値を加算した際は1と0で扱われるのでご注意下さい。

const value1 = 10 + true; // 10 + 1

const value2 = 10 + false; // 10 + 0

console.log(value1); // 11

console.log(value2); //10

割り当ての連鎖

割り当て(代入)を連鎖させる機能です。

const a, b, c;

a = b = c = 2 + 4;

console.log(a); // 6
console.log(b); // 6
console.log(c); // 6

連鎖の割り当ては、右から左に評価されます。

最初に右端の式2 + 4が評価され、次に左側の変数に割り当てられます。

最終的にすべての変数が単一の値を共有します。

//読みやすくした場合

const a, b, c;

c = 2 + 4;
b = c;
a = c;

console.log(a); // 6
console.log(b); // 6
console.log(c); // 6

減算

減算演算子(-)は数値を減算(引き算)をします。

const x = 10;
const y = 5;

const z = x - y; // 5

数値の代わりに文字列またはブール値が指定されている場合、差が計算される前に数値に変換されます。

console.log("5" - 1;)     // 4
console.log(7 - "3");     // 4
console.log("5" - true);  // 4

文字列値を数値に変換できない場合、結果はNaNとなります。

"foo" - 1;      // NaN
100 - "num";    // NaN

指数表記(e)を使用した小さい数値です。

const a = 41e-2;

const b = 121e-3;

console.log(a - b); //0.289

console.log(a + "-" + b)
// 0.41-0.121

インクリメント・デクリメント

数値を1ずつ増減することは、最も一般的な数値演算の1つなのでご紹介致します。

それを行うには特別な演算子を使用します。

・増分( ++ )により変数が1ずつ増加します。

const counter = 1;

counter++;

console.log(counter); // 2

注意点はインクリメント・デクリメントは変数のみに適用されます。

( 1++ )のように使用するとエラーが発生するのでご注意下さい。

デクリメントは( -- )は変数を1つ減らします。

const counter = 2;

counter--;

console.log(counter); // 1

乗算

乗算演算子( * )は数値を乗算(掛け算)します。

const a = 5;
const b = 2;

const x = a * b;

console.log(x) // 10

下記は指数表記で乗算演算子を使用し求めたものです

const a = 41e-2;
const b = 121e-3;

const x = a * b;

console.log(x) 
//0.049609999999999994

除算

除算演算子( / )は数値を除算(割り算)します。

const a = 16 / 2;

console.log(a) // 8

const b = '4' / 2;

console.log(b); // 2

const c = '&9' / 2; 

console.log(c) // NaN

除算では無限大を無限大で割った場合は『NaN』となり、ゼロをゼロで割った際も『NaN』と出力されます。

JavaScriptでは2つの変数を簡単に除算でき、結果は浮動小数点になりますが除算の余りを取得したい場合は、『Mathオブジェクト』の『Math.floor()』を使用します。

floor()はMathオブジェクトのメソッドです。

このメソッドを使用すれば、小数点以下を切り捨てる事が可能です。

var a = 13;
var b = 5;

var quo = Math.floor(a/b);

var rem = a % b;

console.log(quo, rem);
// 2, 3

数値が大きすぎると失敗する場合があります。

JavaScriptには、数学演算の実行と数値の操作に役立つメソッドと定数を含む、Mathと呼ばれる組み込みオブジェクトがあります。

そのすべてのメソッドと定数は静的です。

つまり、それらを呼び出すMathオブジェクトのインスタンスを作成する必要はありません。

Mathコードの任意の部分でメソッドをすぐに呼び出すことが可能となっています。

Mathオブジェクトには固定定数があります。

固定数学定数もオブジェクトプロパティとして格納します。

現在JavaScriptで提供されている数学定数のプロパティは8つあります。

Math.E
自然対数の底e(約2.718)を返します。

Math.LN2
2の自然対数(約0.693)を返す

Math.LOG2E
2を底としたeの対数(約1.442)を返す

Math.LOG10E
10を底としたeの対数(約0.434)を返す

Math.PI
円周率の取得(約3.14159)を返す。

Math.SQRT1_2
2分の1の平方根(約0.707)を返す

これらはすぐに使用可能です。

例えばMath.PIで円周率を求めます。

const diameter = 2;
const x = Math.PI * diameter;

console.log(x)// 6.28以下省略

使用可能メソッド完全版は下記となります。

メソッド	概要
Math.abs()	数値パラメータの絶対値を返す
Math.acos	逆余弦(アークコサイン)を求めラジアン単位で返す
Math.acosh()	数値パラメータの双曲線(アークコサイン)を返す
Math.asin()	数値のアークサインをラジアン単位で返す
Math.atan()	数値パラメータのアークタンジェントを-PI/2からPI/2ラジアンの間の数値として返す
Math.atan2()	引数の正のアークタンジェントを返し2つの数値パラメータが必要。y、x座標
Math.atanh()	パラメータの双曲線アークタンジェントを返す。
Math.cbrt()	パラメータの立方根を返す。
Math.ceil()	最も近い番号(または整数)に切り上げられた数値を返す
Math.clz32()	パラメータの32ビットバイナリ表現の先行ゼロの数を返す
Math.cos()	パラメータのコサインを返す。
Math.cosh()	パラメータの双曲線コサインを返す。
Math.exp()	自然対数の底e(ネイピア数)を指数xで累乗で返す。
Math.expm1()	Math.expマイナス1の値を返す。
Math.floor()	最も近い整数に切り捨てられたパラメータを返す。
Math.fround()	数値の最も近い(32ビット単精度)float表現を返す。
Math.log()	パラメータの自然対数を返す。
Math.log10()	パラメータの常用対数を返す。
Math.log1p()	1 + x の自然対数を返す。
Math.log2()	パラメータの2を底とする対数を返す。
Math.max()	1つ以上の数値から最も高い値を持つ数値を返す。
Math.min()	1つ以上の数値から最も最小値の数値を返す。
Math.pow()	数値の指数値を計算します。2つのパラメータが必要です。
Math.random()	0から1までの乱数を返します。
Math.round()	パラメータを最も近い整数に丸めます。10進数 .5以上になると上がります。
Math.sign()	数値の符号を返す(引数が正、負、またはゼロのいずれであるかをチェックします)
Math.sin()	引数の正弦を返す。
Math.sinh()	指定された数の双曲線正弦を返す。
Math.sqrt()	渡した引数の平方根を返す。
Math.tan()	指定された数値の接線を返す。
Math.tanh()	引数の双曲線正接を返す。
Math.trunc()	引数の整数部分を返す。10進数の値数値です。

Mathメソッドは必要になった際にそれぞれ、その都度に学習下さい。

剰余

剰余演算子( % )は、外観の記号ではパーセントになっておりますがパーセントとは関係ありません。

整数除算(割り算)の余りです。

console.log( 5 % 2 ); // 1

console.log( 8 % 3 ); // 2

剰余演算子は、オペランドが正の整数である場合にのみ役立ちます。

べき乗

べき乗( ** )演算子もご紹介します。

第1オペランドを第2オペランドの累乗に上げて、指数を返します。

オペランドは被演算子で値や変数の事を指します。

べき乗演算子は( ** )として定義されます。

つまりa ** bならaの累乗になります。

console.log( 2 ** 2 ); // 2² = 4

console.log( 2 ** 3 ); // 2³ = 8

console.log( 2 ** 4 ); // 2⁴ = 16

const num1 = 2;

const num2 = 2;

console.log("2 ** 2 = " + (num1 ** num2)); 

  // 2 ** 2 = 4

式では、括弧()によって演算子の優先順位が変更されます。

最初にnum1 ** num2式が4と評価されたのちに値が文字列に変換されます。

べき乗演算子は通常の数学の場合と同様に、非整数に対しても定義されます。

平方根は1/2のべき乗。

console.log( 4 ** (1/2) ); // 2 

1/2の累乗は平方根と同じです。

無限を表す

InfinityはJavaScriptで処理するには大きすぎる数値を表します。

JavaScriptには特別なキーワードがInfinityであり正と負の無限大(∞)をそれぞれ表します。

無限大は数学的な無限大を表す特別な値であり、任意の数値よりも大きくなります。

typeof演算子は、Infinity値の数値を返します。

たとえば、以下に示すように0で除算すると取得可能です。

var x = 5 / 0;

console.log(x); // Infinity

var y = -5 / 0;

console.log(y); // -Infinity

console.log(1e500) // Infinity

浮動小数点の操作

let x = 0.1 + 0.2;

console.log(x)

// 0.30000000000000004

出力時は0.3ではありません。

この違いは、『表現エラー』または『丸め誤差』と呼ばれています。

JavaScriptだけではなく、他の言語同様に内部で10進数を表すために2進数形式を使用しているために発生致します。

ほとんどの小数はバイナリ形式で正確に表すことができないため、わずかではありますが違いが生じます。

それを回避するには浮動小数点を17桁にします。

let x = (0.1 * 10 + 0.2 * 10) / 10;

console.log(x)// 0.3

NaN

console.log( "not a number" / 1 );  //NaN

NaNは計算エラーを表します。

誤ったまたは未定義の数学演算の結果となります。

有効な数値を生成できない操作を実行した場合JavaScriptによって生成される可能性があります。

下記は全てNaNとなります。

console.log(5 - "Hello"); // NaN

console.log(3 - [1, 3, 4]); // NaN

console.log(9 + undefined); // NaN

console.log(5 * "five"); // NaN

文字列を数値に変換する場合、NaNが返されるため、文字列を数値に変換すると解析が失敗するという事です。

しかしスクリプトがエラーで停止することはありません、最悪の場合ではNaNで結果として得られます。

1 + "one"; // 1one

NaNは『Nota N umber』の略で、グローバルオブジェクトのプロパティです。

つまりは常にグローバルスコープを持っています。

NaNは、ある数値で失敗した演算をチェックするために使用されます。

JS数値メソッド

JavaScriptは、数値に対して操作を実行するためのいくつかのプロパティとメソッドを提供します。

JavaScriptでは、プロパティアクセス表記であるドット表記で参照すると、プリミティブデータ型はオブジェクトのように機能します。

前述ではMathオブジェクトのメソッドですが、Numberオブジェクトのメソッドの最も一般的に使用されるメソッドを紹介したいのですが、記事が非常に長くなってきたので少なめに紹介します。

数値を文字列に変換

toString()メソッドを使用して、数値を同等の文字列に変換可能です。

数値を表すために使用するベースを指定する2〜36の範囲の整数パラメーターを受け入れます。

console.log((12).toString());  // '12'

const a = 10;
const b = a.toString();

console.log(typeof a);  // number
console.log(typeof b);  // string

typeofは演算子であり、対象のデータ型を表す文字列を返します。

typeof演算子を使用することで『データ型』を調べる事が可能となります。

const myNumber = '10'; 10の文字列

myNumber += 5; 数値の5を追加

console.log(myNumber) // string

isFiniteおよびisNaN

『Infinity』および『-Infinity』は特別な数値です。

NaNはエラーを表します。

これらはタイプに属しますが、通常の数値ではないのでそれらをチェックする為の特別の関数がございます。

・isNaN(value)
これは引数を数値に変換しNaNをチェックテストします。

console.log(isNaN(NaN)); // true

console.log(isNaN("string")); // true

NaNはそれ自体が全てにおいて何も等しくないで一意となっております。

厳密な比較ではfalseが返ってきます。

console.log(NaN === NaN)// false

• isFinite(value)
引数を数値に変換しNaN/Infinity/-Infinityが通常の数値である場合はtrueとなります。

console.log(isFinite("10")); // true

console.log(isFinite("string")); // false

console.log(isFinite(Infinity)); // false

isFiniteは文字列の値が通常の数値であるかどうかを検証するために使用されることがほとんどです。

toLocaleStringメソッド

このNumber.toLocaleString()メソッドは、ロケール規則を使用してDateオブジェクトを文字列に変換します。

国のロケール日付を取得するために使用されるlocaleという引数を受け入れます。

console.log(new Date().toLocaleString('ja-JP'));
// 元号/月/日/リアルタイム日本時間 

const todayData = new Date();

console.log(todayData.toLocaleString('ja-JP'));

ja-JP(日本)、en-AU(オーストラリア英語)、fr-FR(フランス)etc…。

valueofメソッド

Number.valueOf()メソッドは、指定されたオブジェクトのプリミティブ番号を返します。

const num1 = new Number(25);

console.log(num1.valueOf());

console.log(typeof num1.valueOf(), typeof num1);

 /* 
25
number,object
 */

JavaScript入門 関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

最後に

JavaScript算術演算子は、浮動小数点で使用すると、他のほとんどのプログラミング言語と同じように機能します(ですがゼロによる除算は無限大を生成することに注意してください)。

他のすべての算術演算子は、評価する前に引数を数値として変換しようとします。

数値操作を実行する前に、JavaScriptで利用可能な 『typeof』や『isNaNまたはisInteger』などの組み込みメソッドや独自の関数を作成し変数を型チェックすることが重要となります。

数値の扱い方はまた第2弾として記事を作成致します

本日はこれで以上とさせて頂きます。

最後まで読んで頂きありがとうございました。