サイゼントの技術ブログ

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

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

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

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

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

2020年12月25日

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

Node.jsをインストールすることで、JavaScriptをCUIで実行することができるようになります。
JavaScriptが得意なエンジニアがサーバーサイドプログラミングに関わる場合によく使われるようです。

今回は、WindowsOSのPCにインストールし、実行確認をする手順を掲載します。
バージョンが頻繁に更新されるようなので、バージョンを明記します。

■前提

・OS

Windows8.1

・実施日

2020年10月04日

・Node.jsのバージョン

12.18.4

■インストール手順

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

https://nodejs.org/ja/

２．「12.18.4 LTS」をクリックする。

３．「node-v12.18.4-x64.msi」を実行する。

４．Node.jsのインストール画面が出てくるので、デフォルト設定でインストールする。

※「Install」押下後、インストールするか尋ねるポップアップが出たら「はい」を押下

５．インストールが完了すると下記の画面が出てくるので、Finishを押下。

■Node.js起動手順

１．「Node.js command prompt」を探して起動。

※Windows8.1の場合、「スタート」→左下の「↓」ボタン押下→「アプリ」から起動可能

２．プロンプト画面が起動するので、下記コマンドを発行（入力→Enter押下）。

node --version

1	node --version

インストールしたバージョン（今回は「v12.18.4」）が出力されればOK。

■実行確認（Hello World）手順

１．「Node.js command prompt」を起動する。

２．下記コマンドを発行し、任意のフォルダ（今回は「C:\tmp\」）に移動する。

cd C:\tmp\

1	cd C:\tmp\

３．下記コマンドを発行し、「hello.js」という名前のファイルを作成する。

type nul＞hello.js

1	type nul＞hello.js

４．任意のフォルダに作成した「hello.js」を、エクスプローラ上から開く。

５．「hello.js」に下記（プロンプト上に文字列を出力する命令）を入力して保存。

console.log("Hello world!");

1	console.log("Hello world!");

６．下記コマンドで「hello.js」を実行、「Hello world!」と出力されればOK。

node hello.js

1	node hello.js

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

Web系でもない限りはNode.jsを使うことはあまりないと思いますが、今風のWebサービス（例えばSlack）の手順をWebで探すとNode.jsを使うことが前提の手順が出てきたりします。
できる作業の幅を広げるという意味で、Node.jsの概要、インストール手順、実行手順といったものは知っておいて損はないと思います。

2020年12月25日

JavaScript：動的型付けとは

JavaやC#に慣れている人だとJavaScriptの動的型付けの概念に戸惑うと思うので、この記事では動的型付けについて簡単にまとめてみます。

JavaScriptには、下記の７つのプリミティブ型（ECMAScript 2015の場合）とObject型が存在します。

型	説明
Boolean	真偽値を示す。true または false
null	null値を示す。
undefined	未定義の値を示す。
Number	浮動小数点型を示す。例１：100 例２：123.45
BigInt	整数型を示す。例：123n（これで整数の123の意味となる）
String	文字列型を示す。例：”Hoge”
Symbol	名前空間の衝突を防ぐ特殊な型。言語仕様の拡張等で用いられる。

JavaScriptの場合、下記のように変数を定義します。
型名を指定するのではなく、”let”というキーワードで変数であることを示します。

let hoge = 1;

1	let hoge = 1;

※補足

“let”の代わりに”var”や”const”で変数を定義することもできます。
“var”で定義した変数は、定義したブロックの外でも参照可能になります。
“const”で定義した変数は定数となり、上書きができなくなります。

どのような型でも”let”で変数定義できる、という話であれば、JavaやC#の型推論と同じような話になります。
しかし、JavaScriptの動的型付けは、型推論とは異なる点もあります。

JavaScriptでは、一度変数を定義した後に、定義した時とは異なる型の値を代入することが許されます。

例えば、下記のコードでは、Number型の変数を定義した後にString型の値”Hello World!”を代入していますが、異常終了することなくコンソール上に”Hello World!”と出力されます。

let hoge = 1;
hoge = "Hello World!";
console.log(hoge);

let hoge = 1;

hoge = "Hello World!";

console.log(hoge);

なお、JavaやC#では一度変数の型を定義した後に異なる型の値を代入することは許されておらず、コンパイルエラーとなります。
この挙動の違いを理解していないと、バグ調査する際の絞り込みが難しくなることがあるので、注意が必要です。

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

JavaやC#の経験者がJavaScriptを触ると動的型付けの概念に戸惑うと思うので、記事にしてみました。
他にも、整数型の扱いについても戸惑うのではないかと思っています。これは別の機会に記事にしたいと思います。

ちなみに、この記事でちょうど100記事目になりました！
今まで見て下さった方々、ありがとうございます。
これからもブログを続けていきますので、よろしくお願いします。