2021年1月 – サイゼントの技術ブログ

2021年1月21日

JavaScript：小数点以下の丸め誤差に対応する

JavaScriptでは数値リテラルがNumber型（浮動小数点型）として扱われるため、何も考えずに小数点以下の計算を行うと誤差が発生します。
この問題への対処法は他の記事でも紹介していますが、大きく分けて以下の２つが存在します。
１．数値項目の単位を変えた上で整数型で計算を行う
２．任意精度型で計算を行う

以下では、JavaScriptの場合の具体的な対処法について紹介します。

１．数値項目の単位を変えた上で整数型で計算を行う

JavaScriptには、BigInt型という整数型が用意されています。
数値リテラルの末尾に”n”をつけることで、BigInt型として扱われます。

整数型であるため、計算結果で小数が発生する場合は全て切り捨てが行われます。
この性質を利用して、切り上げや四捨五入を行うこともできます。
以下は、切り捨て・切り上げ・四捨五入を行うサンプルコードです。

【サンプルコード】

console.log("■１桁目で切り捨て");
console.log("・(109n) / 10n * 10n");
console.log((109n) / 10n * 10n);
console.log("・(110n) / 10n * 10n");
console.log((110n) / 10n * 10n);
console.log("■１桁目で切り上げ");
console.log("・(100n + 9n) / 10n * 10n");
console.log((100n + 9n) / 10n * 10n);
console.log("・(101n + 9n) / 10n * 10n");
console.log((101n + 9n) / 10n * 10n);
console.log("■１桁目で四捨五入");
console.log("・(104n + 5n) / 10n * 10n");
console.log((104n + 5n) / 10n * 10n);
console.log("・(105n + 5n) / 10n * 10n");
console.log((105n + 5n) / 10n * 10n);
console.log("■おまけ：下２桁を小数とみなして表示");
console.log("・110nを表示");
let bigint = 110n;
let integer = bigint.toString().slice(0,-2)
let point = ".";
let decimal = bigint.toString().slice(-2);
console.log(integer + point + decimal);

console.log("■１桁目で切り捨て");

console.log("・(109n) / 10n * 10n");

console.log((109n) / 10n * 10n);

console.log("・(110n) / 10n * 10n");

console.log((110n) / 10n * 10n);

console.log("■１桁目で切り上げ");

console.log("・(100n + 9n) / 10n * 10n");

console.log((100n + 9n) / 10n * 10n);

console.log("・(101n + 9n) / 10n * 10n");

console.log((101n + 9n) / 10n * 10n);

console.log("■１桁目で四捨五入");

console.log("・(104n + 5n) / 10n * 10n");

console.log((104n + 5n) / 10n * 10n);

console.log("・(105n + 5n) / 10n * 10n");

console.log((105n + 5n) / 10n * 10n);

console.log("■おまけ：下２桁を小数とみなして表示");

console.log("・110nを表示");

let bigint = 110n;

let integer = bigint.toString().slice(0,-2)

let point = ".";

let decimal = bigint.toString().slice(-2);

console.log(integer + point + decimal);

【実行結果】

■１桁目で切り捨て
・(109n) / 10n * 10n
100n
・(110n) / 10n * 10n
110n
■１桁目で切り上げ
・(100n + 9n) / 10n * 10n
100n
・(101n + 9n) / 10n * 10n
110n
■１桁目で四捨五入
・(104n + 5n) / 10n * 10n
100n
・(105n + 5n) / 10n * 10n
110n
■おまけ：下２桁を小数とみなして表示
・110nを表示
1.10

■１桁目で切り捨て

・(109n) / 10n * 10n

100n

・(110n) / 10n * 10n

110n

■１桁目で切り上げ

・(100n + 9n) / 10n * 10n

100n

・(101n + 9n) / 10n * 10n

110n

■１桁目で四捨五入

・(104n + 5n) / 10n * 10n

100n

・(105n + 5n) / 10n * 10n

110n

■おまけ：下２桁を小数とみなして表示

・110nを表示

1.10

２．任意精度型で計算を行う

JavaScriptでは標準で任意精度型は用意されていませんが、外部ライブラリを取り込むことで任意精度型を利用することができます。
今回は、BigNumberを紹介します。

BigNumberは、リンク先のGitHubで「Code」→「Download ZIP」を選択することでダウンロードできます。
ダウンロードされたファイルの中には、「bignumber.js」が存在するので、これを実行環境の任意の場所に配置します。

取り込み方や使用方法は、README.mdに書かれています。
使用方法については、英語ということもあり不親切に感じるかもしれませんが、Webで検索すれば日本語のわかりやすい説明も出てきます。

以下では、Node.jsで小数点計算を試すサンプルコードです。
（「bignumber.js」は実行するスクリプトと同一階層に配置する前提です）

【サンプルコード】

// BigNumberの取り込み
const BigNumber = require('./bignumber.js');

// 計算
console.log("■標準機能で0.3-0.2");
let ng = 0.3 - 0.2;
console.log(ng.toString());

console.log("■BigNumberで0.3-0.2");
let ok = new BigNumber(0.3).minus(0.2);
console.log(ok.toString());

// BigNumberの取り込み

const BigNumber = require('./bignumber.js');

// 計算

console.log("■標準機能で0.3-0.2");

let ng = 0.3 - 0.2;

console.log(ng.toString());

console.log("■BigNumberで0.3-0.2");

let ok = new BigNumber(0.3).minus(0.2);

console.log(ok.toString());

【実行結果】

■標準機能で0.3-0.2
0.09999999999999998
■BigNumberで0.3-0.2
0.1

■標準機能で0.3-0.2

0.09999999999999998

■BigNumberで0.3-0.2

0.1

いかがでしたでしょうか。

JavaScriptではプリミティブ型の体系がJavaやC#とはかなり異なるので、小数点以下の丸め誤差の対処に戸惑いやすいと思います。
対処が必要になった時に、この記事がお役に立てれば幸いです！

2021年1月14日

JavaScript：オブジェクト指向らしい記述をする

JavaScriptではオブジェクト指向がサポートされています。
JavaやC#に触れている方であればお馴染みだと思いますが、オブジェクト指向を用いることで規模が大きいプログラムを作る時の生産性が向上します。

以下では、インスタンス生成と、ポリモーフィズム（複数のサブクラスを同じように使う）を試してみます。
Node.jsを使用して実行します。
（ES2015以降の書き方となります）

【サンプルコード】

・test.js

// クラスの定義
class Log {
  
  // コンストラクタの定義
  constructor(name) {
    this.name = name;
  }
  
  // メソッドの定義
  log(message) {
    console.log(this.name + ":" + message);
  }
}

// クラスの継承
class DecoratedLog extends Log {
  
  // コンストラクタの定義（継承元のコンストラクタ呼び出し）
  constructor(name) {
    super(name);
  }
  
  // メソッドのオーバーライド
  log(message) {
    console.log(this.name + ":*** " + message + " ***");
  }
}

// 継承でまた別のクラスを定義
class RichLog extends Log {
  
  constructor(name) {
    super(name);
  }
  
  log(message) {
    console.log(this.name + ":［unknown］ " + message);
  }
  
  // 継承したクラスに新たなメソッドを定義
  infoLog(message) {
    console.log(this.name + ":［info］ " + message);
  }
}

// オブジェクトを生成
let myLog1 = new Log("ログ１");
let myLog2 = new Log("ログ２");
let myDecoratedLog = new DecoratedLog("デコったログ");
let myRichLog = new RichLog("リッチなログ");

// オブジェクトを配列に格納
let objects = ［］;
objects.push(myLog1);
objects.push(myLog2);
objects.push(myDecoratedLog);
objects.push(myRichLog);

// 処理を実行
// ループ処理中でポリモーフィズムの実現を確認できる
// 継承先のクラスでしか定義していないメソッドも使用できている
myRichLog.infoLog("start");
for (let i = 0; i ＜ objects.length; i++) {
  objects［i］.log("hello World!");
}
myRichLog.infoLog("end");

// クラスの定義

class Log {

// コンストラクタの定義

constructor(name) {

this.name = name;

}

// メソッドの定義

log(message) {

console.log(this.name + ":" + message);

}

// クラスの継承

class DecoratedLog extends Log {

// コンストラクタの定義（継承元のコンストラクタ呼び出し）

constructor(name) {

super(name);

}

// メソッドのオーバーライド

log(message) {

console.log(this.name + ":*** " + message + " ***");

}

// 継承でまた別のクラスを定義

class RichLog extends Log {

constructor(name) {

super(name);

}

log(message) {

console.log(this.name + ":［unknown］ " + message);

}

// 継承したクラスに新たなメソッドを定義

infoLog(message) {

console.log(this.name + ":［info］ " + message);

}

// オブジェクトを生成

let myLog1 = new Log("ログ１");

let myLog2 = new Log("ログ２");

let myDecoratedLog = new DecoratedLog("デコったログ");

let myRichLog = new RichLog("リッチなログ");

// オブジェクトを配列に格納

let objects = ［］;

objects.push(myLog1);

objects.push(myLog2);

objects.push(myDecoratedLog);

objects.push(myRichLog);

// 処理を実行

// ループ処理中でポリモーフィズムの実現を確認できる

// 継承先のクラスでしか定義していないメソッドも使用できている

myRichLog.infoLog("start");

for (let i = 0; i ＜ objects.length; i++) {

objects［i］.log("hello World!");

}

myRichLog.infoLog("end");

【実行結果】

リッチなログ:［info］ start
ログ１:hello World!
ログ２:hello World!
デコったログ:*** hello World! ***
リッチなログ:［unknown］ hello World!
リッチなログ:［info］ end

リッチなログ:［info］ start

ログ１:hello World!

ログ２:hello World!

デコったログ:*** hello World! ***

リッチなログ:［unknown］ hello World!

リッチなログ:［info］ end

ちなみに、ES2015より前のバージョンではこの書き方はできません。
オブジェクト指向をプログラム言語で実現する上で、「クラスベース」と呼ばれる概念と「プロトタイプベース」と呼ばれる概念があるのですが、ES2015より前のバージョンでは「プロトタイプベース」と呼ばれる概念に基づく書き方をする必要があります。
JavaやC#は「クラスベース」と呼ばれる概念に基づく書き方をするので、JavaやC#の経験者にとってはとっつきにくいと思います。

なお、ES2015以降はクラスベースに基づく書き方が可能になっていますが、内部的にはプロトタイプベースに基づく処理をしています。
例えば、クラス名の型を調べると、”class”ではなく”function”になるのですが、これはプロトタイプベースの名残です。

いかがでしたでしょうか？

規模の大きいプロジェクトでは、一般的にオブジェクト指向で設計されています。
大抵の場合は何かしらのフレームワークが採用されており、classの存在を意識することはないかもしれません。
しかし、基本的にはそのフレームワークもオブジェクト指向で設計されているので、JavaScriptでもオブジェクト指向をサポートしていることは知っておいて損はないと思います。

2021年1月8日

Vue.jsインストール手順とHelloWorld(Windows、2020年12月)

Vue.jsとは、JavaScriptのGUIのフレームワークです。
MVVM(Model-View-ViewModel)を採用しており、画面(View)と内部状態(Model)を分離して画面の制約にとらわれないようにすることで、画面で入力された内容をリアルタイムに内部状態に反映させたり、内部状態の変化をリアルタイムに画面に出力したりすることができます。
この特徴により、画面をリッチにすることができます

今回は、WindowsOSのPCにインストールし、実行確認をする手順を掲載します。
実行確認の「Hello World」に関しては色々書き方がありますが、今回はMVVMの良さを実感できる書き方で「Hello World」を試します。

■前提

・OS

Windows8.1

・実施日

2020年12月30日

・Vue.jsのバージョン

2.6.12

■インストール手順

１．Vue.jsの公式サイトにアクセスする。

https://jp.vuejs.org/index.html

２．「はじめる」を左クリックする。

３．「インストール」を左クリックする。

４．「開発バージョン」を右クリックし「名前を付けてリンク先を保存」をクリック。

※FireFoxの場合。リンク先はjsファイルなので、ブラウザの機能でファイルとして保存する。

５．任意のフォルダにvue.jsを保存。

※今回は”C:\tmp”に保存。

■実行確認（Hello World）手順

１．”vue.js”を保存したフォルダに、”hello.html”という名前のファイルを作成する。

２．「hello.html」に下記を入力して保存。

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - Hello world!＜/title＞
＜/head＞
＜body＞

＜div id="app"＞
  ＜input type="checkbox" id="checkbox1" v-model="checked1"＞
  ＜label for="checkbox1"＞
    {{ message }}
  ＜/label＞
＜/div＞

＜script src="./vue.js"＞＜/script＞
＜script＞
  var app = new Vue({
    // elで指定した値はdivタグのidと対応
    el: '#app',
    // 変数の初期値定義
    data: {
      message: '',
      checked1: false
    },
    // 変数の値を監視するイベントを定義
    watch: {
      checked1: function(newVal, oldVal) {
        this.message = (newVal) ? 'Hello World!' : '';
      }
    }
  })
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - Hello world!＜/title＞

＜/head＞

＜body＞

＜div id="app"＞

＜input type="checkbox" id="checkbox1" v-model="checked1"＞

＜label for="checkbox1"＞

＜/label＞

＜/div＞

＜script src="./vue.js"＞＜/script＞

＜script＞

var app = new Vue({

// elで指定した値はdivタグのidと対応

el: '#app',

// 変数の初期値定義

data: {

message: '',

checked1: false

// 変数の値を監視するイベントを定義

watch: {

checked1: function(newVal, oldVal) {

this.message = (newVal) ? 'Hello World!' : '';

}

})

＜/script＞

＜/body＞

＜/html＞

３．「hello.html」をブラウザから開く。

※今回はChromeで開きます。

初期状態では以下のように何も表示されませんが

チェックボックスをチェックすると「Hello World!」と表示されます。
ボタンをクリックしてイベントを飛ばしたり、リロードしたりすることなく、画面で変更された内部状態をリアルタイムに画面上に反映することができています。

いかがでしたでしょうか。

今回はHelloWorldのみでしたが、これだけでもVue.jsの便利さを実感できたのではないかと思います。
Vue.jsは日本語の公式ドキュメントも充実しているため、その意味でもお勧めのフレームワークです。

2021年1月1日

ゴンペルツ曲線（信頼度成長曲線）とは

ゴンペルツ曲線（信頼度成長曲線）とは、テストで発見されるバグ数をグラフにしたものです。
横軸に時間、縦軸に累積バグ数をとる場合、下記のようなグラフになります。

テストを開始した直後は、テスト手順が確立していないため、バグはなかなか見つかりません。
テスト手順が確立した後は、時間が経つにつれて順調にバグが見つかります。
テストが終盤に近づくと、残っているテストケースはテスト困難なレアケースになるので、再びバグを見つけにくくなります。

具体的にいくつのバグが出るかは、プロジェクトの特性によって変化します。
現場毎に、プロジェクトの規模と発見されるバグ数の統計を取り、その統計を元にいくつのバグが出るのかを具体的な数値に落とし込みます。

もし、バグが大量に見つかる（aのケース）ようであれば、テスト開始時点の品質が悪い疑いがあります。
この場合、品質管理者は、バグの原因を確認し、前工程で見つけるべきバグが大量に見つかっていないかどうかを見る必要があります。
前工程で見つけるべきバグが大量に発見された場合は、バグの対応でテストの進捗が悪くなることを防ぐために、もう一度前工程に戻って品質強化を行う必要があります。

また、発見されるバグが少ない（bのケース）ようであれば、テストケースの作り込みが甘い疑いがあります。
この場合、品質管理者は、テストに使われているテストケースを確認し、テストの目的に照らし合わせてテストケースの網羅性が十分かを見る必要があります。
テストケースの網羅性が不十分な場合は、現在のテスト工程で見つけるべきバグが見つからないことにより次工程やリリース後に悪影響を及ぼすのを防ぐため、テストケースの修正を指示する必要があります。

品質管理者には成果物の一つ一つを細かく見る程の時間はないため、上記のような数値管理を行い、プロジェクトの状況を把握しようとします。
（人間の体に例えると、健康診断で数値を出し、疑わしい数値が出た場合に医師が検査を行う、という例えになります）
そのため、作業者としては、正直に数値を出すことで、品質管理者が適切に管理を行えるようにする必要があります。

あけましておめでとうございます！

昨年、何のためにバグ数を報告する必要があるのかと問われたので、今回の記事を執筆しました。
作業者目線では報告はうんざりするかもしれませんが、プロジェクトを円滑に進めるためだということを知っていれば、頑張って報告する気になれると思います。

実は昨年は適当に報告してしまっていた…という方、新年は是非報告も頑張ってみましょう！