丸め誤差に対応した計算方法
最終更新日: 2024-04-08記事投稿日: 2024-03-31
Frontend developer
概要
ECサイト等でよく見られるレビュー「★★★☆☆」
この表示を作るために数値計算の処理を入れていましたが、ある条件における星の表示数にズレが生じていることに気がつきました。
原因を調べると引き算の結果に誤差が埋めれていることがわかりました。所謂「丸め誤差」というやつです。
丸目誤差とは
丸め誤差（round-off error）とは、長い桁や無限桁の小数を扱う際に、これを有限桁で表すためにある桁以降の値を捨ててしまうことにより生じる誤差のこと。コンピュータでは浮動小数点型の数値計算などで現れる。
https://e-words.jp/w/%E4%B8%B8%E3%82%81%E8%AA%A4%E5%B7%AE.html
コンピュータで浮動小数点型の数値計算を行う場合、2進法によって実行されます。例えば10進数の「0.1」という数字は2進数では「0.000110011...」となるため、場合によって、微妙な計算誤差が生まれてしまいます。
対応方法
以下のような「(目的の計算)×100をした上でMath.roundで四捨五入してあげて最後に100で割って元に戻す」みたいな方法で回避できます。
関数化しておくと便利そうですね👀
Math.round((x - y) * 100) / 100
参考サイト
関連記事
最終更新日: 2025-06-28記事投稿日: 2025-06-28
大量の画像を扱うSwiperスライダーが特定のデバイスでクラッシュする問題が発生。解決策としてSwiperの「Virtual」オプションを導入し、表示領域内のスライドのみをレンダリングする「仮想化」を実現。これによりDOM要素とメモリ使用量が劇的に削減され、クラッシュが解消し、スライダーの動作が安定しました。この仮想化技術は、無限スクロールなど大量のコンテンツを扱うウェブアプリケーション全般のパフォーマンス改善に極めて有効です。
大量の画像を扱うSwiperスライダーが特定のデバイスでクラッシュする問題が発生。解決策としてSwiperの「Virtual」オプションを導入し、表示領域内のスライドのみをレンダリングする「仮想化」を実現。これによりDOM要素とメモリ使用量が劇的に削減され、クラッシュが解消し、スライダーの動作が安定しました。この仮想化技術は、無限スクロールなど大量のコンテンツを扱うウェブアプリケーション全般のパフォーマンス改善に極めて有効です。最終更新日: 2025-01-11記事投稿日: 2025-01-11
TypeScriptの型システムで「プロパティがundefinedを取りうる」のを表現する方法としてオプショナルプロパティを使用した書き方とユニオン型を使用した書き方の二通りが考えられます。この二つの違いについてまとめてみました。
TypeScriptの型システムで「プロパティがundefinedを取りうる」のを表現する方法としてオプショナルプロパティを使用した書き方とユニオン型を使用した書き方の二通りが考えられます。この二つの違いについてまとめてみました。最終更新日: 2024-08-06記事投稿日: 2024-08-06
アクセシブルなmodalを実装するために必要なaria属性が意外と多い。参考となるコードをメモとして残しておきたい。
アクセシブルなmodalを実装するために必要なaria属性が意外と多い。参考となるコードをメモとして残しておきたい。最終更新日: 2024-07-27記事投稿日: 2024-07-27
swiper/reactで実装したカルーセルをTABキーで操作した時、画面に描画されていないスライドにもフォーカスが当たってしまう問題があり、それの修正対応をしたので備忘録として残しておく。
swiper/reactで実装したカルーセルをTABキーで操作した時、画面に描画されていないスライドにもフォーカスが当たってしまう問題があり、それの修正対応をしたので備忘録として残しておく。
