JS代入演算子の処理桁が変動してしまう

前提・実現したいこと

JavaScriptで、変数の中の値を「0.01」づつ減らしたいと考えています。
その為、変数名 -= 0.01;
という文を書いたのですがなぜか3回目の実行で変数が「0.009999999999999」だけ減らされる処理になってしまいます。

◆この現象が起きている理由（JavaScriptやビット演算のルール上発生しているのか？自分のコードの書き方で発生してしまっているのか？）
◆この現象が起きてしまったときにどんな言葉で検索をかけて原因を調べれば良かったのか？

の2つをしりたいです。

発生している問題・エラーメッセージ

想定外処理のためエラーメッセージはなし
consoleを転記します

演算前の変数の価：7
index.html:16 演算後の変数の価：6.99
index.html:34 実行回数：1
index.html:14 演算前の変数の価：6.99
index.html:16 演算後の変数の価：6.98
index.html:34 実行回数：2
index.html:14 演算前の変数の価：6.98
index.html:16 演算後の変数の価：6.970000000000001
index.html:34 実行回数：3
index.html:14 演算前の変数の価：6.970000000000001
index.html:16 演算後の変数の価：6.960000000000001
index.html:34 実行回数：4
index.html:14 演算前の変数の価：6.960000000000001
index.html:16 演算後の変数の価：6.950000000000001
index.html:34 実行回数：5
index.html:14 演算前の変数の価：6.950000000000001
index.html:16 演算後の変数の価：6.940000000000001
index.html:34 実行回数：6
index.html:14 演算前の変数の価：6.940000000000001
index.html:16 演算後の変数の価：6.9300000000000015
index.html:34 実行回数：7

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charaset="UTF-8">
5        <!--コンストラクタ作りの練習-->
6        
7        <script>
8            //ここfunctionでコンストラクタを宣言する
9            function Pen(color,length){
10                this.color=color; //代入されたcolor要素（ひとつめの要素）をプロパティにする的な
11                this.length=length;
12                //functionっていうプロパティをメソッドって読んでいる
13                this.draw=function(){
14                    console.log("演算前の変数の価：" + this.length);
15                    this.length -= 0.01;
16                    console.log("演算後の変数の価：" + this.length);
17                }
18            }
19
20            //んでコンストラクタの宣言がおわったから実際にオブジェクトをつくってみる
21            var penR= new Pen("red",5);
22            var penG= new Pen("green",15);
23            var penB= new Pen("Blue",7);
24
25            var pen=penR;
26            var countstroke=0
27
28            //んでストロークって何？
29            function stroke(){
30                pen.draw(); //メソッドだから関数。()がいる
31                document.getElementById("color").textContent=pen.color;
32                document.getElementById("length").textContent=pen.length;
33                countstroke += 1;
34                console.log("実行回数：" + countstroke);
35            }
36
37            function pickR(){pen=penR};
38            function pickG(){pen=penG};
39            function pickB(){pen=penB};
40            
41        </script>
42
43    </head>
44    <body>   
45        <button onclick="pickR()">赤を選ぶ</button>
46        <button onclick="pickG()">緑を選ぶ</button>
47        <button onclick="pickB()">青を選ぶ</button>
48        <button onclick="stroke()">書く</button>
49        <p>
50            鉛筆の色は<span id="color"></span>,
51            長さは<span id="length"></span>cm
52        </p>
53    </body>
54
55
56</html>

試したこと

console.logを挿入し、どこで想定外の演算が行なわれているか調べました。
3回目の実行で「0.009999999999999」
7回目の実行で「0.0099999999999995」
減ってしまっているようです。

補足情報（FW/ツールのバージョンなど）

書籍: ゲームで学ぶ「JavaScript入門」
著：田中賢一郎

をもとに練習しております。

行動規範の内容に同意します

回答2件

ベストアンサー

◆この現象が起きている理由（JavaScriptやビット演算のルール上発生しているのか？自分のコードの書き方で発生してしまっているのか？）

数値は内部で2進数で扱われているのはご存じだと思いますが、10進表現の0.01は2進表現では無限小数になります。2進数無限桁であれば表現できますが、コンピューターで扱うのは2進数有限桁なので（JavaScriptの数値だと64bitのデータ。有効桁数は53bit）、無限桁の有限桁への丸め誤差が発生して、計算を重ねると累積します。

解決策としては、lengthに保持する際に100倍して整数化して、クラス外部とのやりとりの際に100分の1にしたり100倍したりすれば、丸め誤差発生は最小限に抑えられます。
53bitで表現できる範囲の整数なら変換での誤差は出ません。

◆この現象が起きてしまったときにどんな言葉で検索をかけて原因を調べれば良かったのか？

「浮動小数点誤差」「小数誤差」とかでしょうか。

投稿2021/02/14 10:31

otn

総合スコア84798

NYzyanai

2021/02/14 12:51

なるほど！とてもわかりやすかったです、ありがとうございます。基本情報技術者試験でなぜこんなに2進数変換をさせるんだろう？と思っていたのですが、こう言うWEBアプリケーションの演算にもたしかに関係して来るから必要なんですね。対策まで有難うございます！個人的には0.01にこだわり無いので0.25で有限にしちゃうのも楽そうですね〜たすかりました！