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

2021年2月25日

Jestを試してみた

Jestとは、JavaScriptのテスト用のフレームワークです。
ここでは、Node.jsがインストールされていることを前提に、Jestを試してみます。
公式ドキュメントであるGetting Startedを参考に、説明が割愛されている箇所を補いながら説明していきます。

【前提】

・WindowsOSで作業を行います。
・Node.jsを事前にインストールし、”Node.js Command Prompt”でコマンド発行します。
・今回の確認では、C:\tmp\ で作業を行います（以下「作業フォルダ」）。

【インストール】

・cdコマンドで作業フォルダに移動します。

cd C:\tmp\

1	cd C:\tmp\

・npmコマンド（ライブラリのインストール用のコマンド）を発行しJestを取得します。

npm install --save-dev jest

1	npm install --save-dev jest

・コマンドを発行すると、以下のように出力されます。

C:\tmp＞npm install --save-dev jest
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN saveError ENOENT: no such file or directory, open 'C:\tmp\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open 'C:\tmp\package.json'
npm WARN tmp No description
npm WARN tmp No repository field.
npm WARN tmp No README data
npm WARN tmp No license field.

+ jest@26.6.3
added 511 packages from 351 contributors and audited 512 packages in 92.123s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


C:\tmp＞

C:\tmp＞npm install --save-dev jest

npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

npm WARN deprecated har-validator@5.1.5: this library is no longer supported

npm WARN saveError ENOENT: no such file or directory, open 'C:\tmp\package.json'

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN enoent ENOENT: no such file or directory, open 'C:\tmp\package.json'

npm WARN tmp No description

npm WARN tmp No repository field.

npm WARN tmp No README data

npm WARN tmp No license field.

+ jest@26.6.3

added 511 packages from 351 contributors and audited 512 packages in 92.123s

23 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

C:\tmp＞

・作業フォルダ直下に、以下のようなフォルダが作成されれば成功です。

C:\tmp＞dir node_modules\jest
 ドライブ C のボリューム ラベルは  です
 ボリューム シリアル番号は  です

 C:\tmp\node_modules\jest のディレクトリ

2021/01/06  21:45    ＜DIR＞          .
2021/01/06  21:45    ＜DIR＞          ..
2021/01/06  21:44    ＜DIR＞          bin
2021/01/06  21:44    ＜DIR＞          build
1985/10/26  17:15             1,086 LICENSE
2021/01/06  21:45    ＜DIR＞          node_modules
2021/01/06  21:45             2,084 package.json
1985/10/26  17:15               551 README.md
               3 個のファイル               3,721 バイト
               5 個のディレクトリ                 バイトの空き領域

C:\tmp＞

C:\tmp＞dir node_modules\jest

ドライブ C のボリュームラベルはです

ボリュームシリアル番号はです

C:\tmp\node_modules\jest のディレクトリ

2021/01/06 21:45 ＜DIR＞ .

2021/01/06 21:45 ＜DIR＞ ..

2021/01/06 21:44 ＜DIR＞ bin

2021/01/06 21:44 ＜DIR＞ build

1985/10/26 17:15 1,086 LICENSE

2021/01/06 21:45 ＜DIR＞ node_modules

2021/01/06 21:45 2,084 package.json

1985/10/26 17:15 551 README.md

3 個のファイル 3,721 バイト

5 個のディレクトリバイトの空き領域

C:\tmp＞

※なお、yarnコマンドでも取得できます。

【実行準備】

・作業フォルダに、”package.json”を作成します。内容は以下の通りです。

{
  "scripts": {
    "test": "jest"
  }
}

{

"scripts": {

"test": "jest"

}

※これで、npmコマンドの引数に”test”を指定すると、コマンド”jest”が発行されるようになります。

【テスト対象のスクリプト作成】

・作業フォルダに、”sum.js”を作成します。内容は以下の通りです。

function sum(a, b) {
  return a + b;
}
module.exports = sum;

function sum(a, b) {

return a + b;

}

module.exports = sum;

【テストコード作成】

・作業フォルダに、”sum.test.js”を作成します。内容は以下の通りです。

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () =＞ {
  expect(sum(1, 2)).toBe(3);
});

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () =＞ {

expect(sum(1, 2)).toBe(3);

});

【実行】

・npmコマンドによりテストを実行します。

npm test

npm test

・以下のように、作業フォルダ直下のテストコードが実行されれば成功です。

C:\tmp＞npm test

＞ @ test C:\tmp
＞ jest

 PASS  ./sum.test.js (7.241 s)
  √ adds 1 + 2 to equal 3 (10 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        23.654 s
Ran all test suites.

C:\tmp＞

C:\tmp＞npm test

＞ @ test C:\tmp

＞ jest

PASS ./sum.test.js (7.241 s)

√ adds 1 + 2 to equal 3 (10 ms)

Test Suites: 1 passed, 1 total

Tests: 1 passed, 1 total

Snapshots: 0 total

Time: 23.654 s

Ran all test suites.

C:\tmp＞

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

JavaにJunitがあるように、JavaScriptにもJestという自動テストツールがあります。
後の改修を楽にするためにも、可能なら自動テストツールを導入した方が良いでしょう。

2021年2月18日

JSONとは、データ構造を記述するフォーマットの一種です。
CSV等とは異なり、階層構造を記述することができます。
階層構造を表現できるフォーマットとしてはXMLも挙げられますが、JSONフォーマットはXMLよりも簡易的に記述できる、JavaScriptとの親和性が高い、といった特徴があります。
電文でのデータ通信で多く使われる印象があります。

以下では、JSONについて、フォーマットの簡単な説明と、JSONの生成・読込を行う簡単なサンプルコードを取り上げます。

【JSONのフォーマットの簡単な説明】

■データの開始と終了

開始は”{“、終了は”}”で示されます。

■データの構造

以下のように、変数名と値を”:”で区切って表記します。
変数名はダブルクォーテーションで囲います。
（値については後述します）

{ "height" : 170 }

1	{ "height" : 170 }

変数名と値のペアが複数ある場合は、ペアを”,”で区切って表記します。

{ "height" : 170, "weight" : 58.8 }

1	{ "height" : 170, "weight" : 58.8 }

人に読ませることを意識する場合、以下のように改行を入れてわかりやすくすることが多いです。

{
  "height" : 170,
  "weight" : 58.8
}

{

"height" : 170,

"weight" : 58.8

}

■値の種類

JSONでは以下の値を使用することができます。

・数値
数値を記述することで、数値としてみなされます。

{ "height" : 170 }
{ "weight" : 58.8 }

1 2	{ "height" : 170 } { "weight" : 58.8 }

・文字列
ダブルクォーテーションで囲うことで、文字列としてみなされます。

{ "str" : "hoge" }

1	{ "str" : "hoge" }

・true/false
trueと記述することで、真としてみなされます。
falseと記述することで、偽としてみなされます。

{ "flag1" : true }
{ "flag2" : false }

1 2	{ "flag1" : true } { "flag2" : false }

・null
nullと記述することで、nullとしてみなされます。

{ "flag3" : null }

1	{ "flag3" : null }

・オブジェクト
“{“と”}”で囲うことで、オブジェクトとしてみなされます。
これにより、階層構造の記述が可能になります。

{
  "name": {
    "firstName":"miku",
    "lastName":"hatsune"
  }
}

{

"name": {

"firstName":"miku",

"lastName":"hatsune"

}

・配列
“[“と”]”で囲うことで、配列としてみなされます。

{"numList": ［ 1, 2, 3 ］}

1	{"numList": ［ 1, 2, 3 ］}

■文字コード

文字コードはUTF-8（BOM無し）を使用します。

■その他詳細

（RFC8259）がJSONの正式な仕様となりますので、こちらをご参照ください。

【JSONの生成・読込を行うサンプルコード】

ここでは、JavaScript(Node.js)でのサンプルコードを提示します。
以下のように、JSONの生成・読込を行うための機能が用意されており、それを利用することで容易に生成・読込が可能になります。

■生成のサンプル

・コード（stringify.js）

let worker = {
  skill: "singing",
  name: {
    firstName: "miku",
    lastName : "hatsune"
  }
};
let json = JSON.stringify(worker)
console.log(json);

let worker = {

skill: "singing",

name: {

firstName: "miku",

lastName : "hatsune"

}

};

let json = JSON.stringify(worker)

console.log(json);

・実行結果

C:\tmp＞node stringify.js
{"skill":"singing","name":{"firstName":"miku","lastName":"hatsune"}}

C:\tmp＞

C:\tmp＞node stringify.js

{"skill":"singing","name":{"firstName":"miku","lastName":"hatsune"}}

C:\tmp＞

■読込のサンプル

・コード（parse.js）

let json = '{"skill":"singing","name":{"firstName":"miku","lastName":"hatsune"}}';
let worker = JSON.parse(json);
console.log("skill: " + worker.skill);
console.log("firstName: " + worker.name.firstName);
console.log("lastName: " + worker.name.lastName);

let json = '{"skill":"singing","name":{"firstName":"miku","lastName":"hatsune"}}';

let worker = JSON.parse(json);

console.log("skill: " + worker.skill);

console.log("firstName: " + worker.name.firstName);

console.log("lastName: " + worker.name.lastName);

・実行結果

C:\tmp＞node parse.js
skill: singing
firstName: miku
lastName: hatsune

C:\tmp＞

C:\tmp＞node parse.js

skill: singing

firstName: miku

lastName: hatsune

C:\tmp＞

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

JSONは、JavaScriptを使う場合はもちろんのこと、他システムとのやりとりでも使うことが少なくないので、使う言語によらず学んでおいて損はないと思います。

2021年2月11日

テレワークにおけるコミュニケーションのコツ

コロナ渦の影響で、テレワークが流行っています。
テレワークではコミュニケーションの取り方が変わるため、チャットでのやりとりに慣れていない技術者がコミュニケーションの取り方に悩むという姿を目にします。

先日、相談に乗る機会があったので、それを元にうまくコミュニケーションを取るコツを書いていきたいと思います。

１．姿が見えない環境であることを意識する

テレワークでは相手の姿を見ずにコミュニケーションを取ることが多いです。
そのため、表情やしぐさを読み取り円滑にやりとりするということができません。
友好的な態度、意欲的な態度、切迫した状況、等はチャット上で示す必要があります。

友好的な態度は、顔文字や絵文字を使い表情を豊かにすることで示すことができます。
例えば、Slackでは顔文字や絵文字が登録されています。
登録されている顔文字や絵文字であれば、使って問題無いと思います。

意欲的な態度は、文字で示すしかありません。
対面のコミュニケーションとは異なり、文字に起こさないと察してくれません。
仕事が欲しい場合は、手が空いたから仕事が欲しい、と明確に書く必要があります。
そこで作業が無いと言われた場合は、自分で作業を提案する必要があります。
（ドキュメントの改善、自分が携わるシステムの勉強、等）

切迫した状況を伝えるには、現在の状況や作業の期限を明確に書く必要があります。
音声でチャットしたい、と書くだけでも暗に急ぎであることを示すことができます。
音声チャットは、相手の時間を取らせる代わりに、早く要件を終わらせられます。

２．どれが自分の書き込みなのかを認識しやすいようにする

リアルのコミュニケーションでは顔や声で個人を認識できます。
しかし、文字だらけのチャットでは、すぐに個人を認識できない場合があります。
これはコミュニケーションを難しくさせ、時に認識齟齬の原因にもなり得ます。

そのため、チャットツールのアイコンやアバターを設定すると良いです。
アイコンやアバターにより、視覚的に個人を認識することができるようになります。

３．スルーされても気にしない

リアルのコミュニケーションでは、声をかければ何かしら反応が来ます。
しかし、テレワークでは、チャットに書き込んでも長時間反応がないことがあります。
これは不安に思うかもしれませんが、多くの場合は問題ありません。
システム開発は、作業の性質上、作業に没頭する時間が必要です。
作業に没頭している時はチャットに気付きにくくなります。
そのため、長時間反応がなければ、作業に没頭しているだけだと思いましょう。

本当に急ぎの時は、チャットとは別ルートで通話を申し込むと良いです。
逆に言うと、作業に没頭する時も、別ルートの申し込みはチェックするべきです。

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

チャットでは、リアルのコミュニケーションとは異なるコツが必要になります。
コロナ禍が収まった後もテレワークが実施され続ける可能性もあるので、これを機に慣れておくと良いと思います。
SNSや、プライベートの趣味のチャットと似通った部分もあるので、これらのことをついでに始めても良いかもしれません。

2021年2月5日

JavaScript：inputの入力可能文字を制限する

HTMLのinputタグ（テキストボックス）では、onInput属性により文字が入力される度にJavaScriptの処理を実行し、入力された文字を取得したり編集したりすることができます。
これを利用して、inputの入力可能文字を任意に制限することができます。

以下は、半角数値のみ入力可能とし、それ以外の文字が入力された場合にはテキストボックスに入力された文字を全て削除するサンプルです。

【サンプルコード】

・test.html

＜html＞
  ＜head＞
    ＜meta charset="utf-8"＞
    ＜title＞test＜/title＞
  ＜/head＞
  ＜body＞
    ＜script type="text/javascript"＞
      
      function textCheck($this)
      {
        let str=$this.value;
        // 文頭から文末まで全て0-9かチェック
        if(!str.match(/^［0-9］+$/)){
          // そうでなければ入力文字を空白に変換
          str="";
        }
        $this.value=str;
      }
      
      function buttonClick(){
        // 入力値取得
        let input = document.getElementById("text").value;
        let output = input;
        // 表示
        document.getElementById("html").innerHTML
          = output;
      }
            
    ＜/script＞
    ＜input type="text" id="text" name="text" value="" onInput="textCheck(this)" required maxlength="10" size="10"＞
    ＜input type="button" value="表示" onclick="buttonClick();"/＞
    ＜p id="html"＞＜/p＞
  ＜/body＞
＜/html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞test＜/title＞

＜/head＞

＜body＞

＜script type="text/javascript"＞

function textCheck($this)

{

let str=$this.value;

// 文頭から文末まで全て0-9かチェック

if(!str.match(/^［0-9］+$/)){

// そうでなければ入力文字を空白に変換

str="";

}

$this.value=str;

}

function buttonClick(){

// 入力値取得

let input = document.getElementById("text").value;

let output = input;

// 表示

document.getElementById("html").innerHTML

= output;

}

＜/script＞

＜input type="text" id="text" name="text" value="" onInput="textCheck(this)" required maxlength="10" size="10"＞

＜input type="button" value="表示" onclick="buttonClick();"/＞

＜p id="html"＞＜/p＞

＜/body＞

＜/html＞

【実行確認】

WindowsOS上でChromeバージョン86.0.4240.111で試しています。

0-9（半角数値）はこのように入力できます。

テキストボックスに入力した文字はこのように取得することができます。
（今回はボタン押下で取得し、そのまま表示）

しかし、許可されていない文字を入力しようとすると、テキストボックスの文字が削除され、入力できません。

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

入力チェックというと実装が面倒な印象がありますが、このように入力の時点で不正な文字の入力を防止すれば、入力チェックの実装が楽になります。
ちょっとしたページを作る時に便利な方法だと思います。

2021年2月4日

JavaScript：ブラウザからローカルのテキストファイルの入出力

JavaScriptをブラウザから使用する場合、セキュリティによりローカルへのテキストファイルへのアクセスは制限されています。
その制約の中で、下記の方法を使用すれば、ローカルのテキストファイルへの入出力が可能になります。

・入力

テキストファイルをJavaSctipt形式に変換し、変数として読み込む。

・出力

HTMLのaタグを使用してダウンロードさせる。
aタグの仕様上、ダウンロード先のパスは自ユーザーのDownloadsフォルダになる。
（ただし、aタグのdownload属性はIEでは使用不可）

以下、サンプルコードです。

【サンプルコード】

・test.html

＜html＞
  ＜head＞
    ＜meta charset="utf-8"＞
    ＜title＞test＜/title＞
  ＜/head＞
  ＜body＞
    ＜!-- js形式に変換したローカルファイルを読み込み --＞
    ＜!-- 更新があった場合はリロードが必要 --＞
    ＜script type="text/javascript" src="./test2.js"＞＜/script＞
    
    ＜script type="text/javascript"＞
      
      function buttonClick(){
        let str = "HelloWorld!\r\nこんにちは世界！\r\n"; // 出力文字列
        let ary = str.split(''); // 配列形式に変換（後述のBlobで全要素出力）
        let blob = new Blob(ary,{type:"text/plan"}); // テキスト形式でBlob定義
        let link = document.createElement('a'); // HTMLのaタグを作成
        link.href = URL.createObjectURL(blob); // aタグのhref属性を作成
        link.download = 'test.txt'; // aタグのdownload属性を作成
        link.click(); // 定義したaタグをクリック（実行）
      }
      
      function buttonClick2(){
        // 読み込んだ文字列を表示
        document.getElementById("html").innerHTML = str2;
      }
            
    ＜/script＞
    ＜input type="button" value="ファイル出力" onclick="buttonClick();"/＞
    ＜input type="button" value="ファイル入力" onclick="buttonClick2();"/＞
    ＜p id="html"＞＜/p＞
  ＜/body＞
＜/html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞test＜/title＞

＜/head＞

＜body＞

＜!-- js形式に変換したローカルファイルを読み込み --＞

＜!-- 更新があった場合はリロードが必要 --＞

＜script type="text/javascript" src="./test2.js"＞＜/script＞

＜script type="text/javascript"＞

function buttonClick(){

let str = "HelloWorld!\r\nこんにちは世界！\r\n"; // 出力文字列

let ary = str.split(''); // 配列形式に変換（後述のBlobで全要素出力）

let blob = new Blob(ary,{type:"text/plan"}); // テキスト形式でBlob定義

let link = document.createElement('a'); // HTMLのaタグを作成

link.href = URL.createObjectURL(blob); // aタグのhref属性を作成

link.download = 'test.txt'; // aタグのdownload属性を作成

link.click(); // 定義したaタグをクリック（実行）

}

function buttonClick2(){

// 読み込んだ文字列を表示

document.getElementById("html").innerHTML = str2;

}

＜/script＞

＜input type="button" value="ファイル出力" onclick="buttonClick();"/＞

＜input type="button" value="ファイル入力" onclick="buttonClick2();"/＞

＜p id="html"＞＜/p＞

＜/body＞

＜/html＞

・test2.js（テキストファイルを以下のようなjsファイルに変換するのが前提）

var str2 = "HelloWorld!＜br＞こんにちは世界！＜br＞";

1	var str2 = "HelloWorld!＜br＞こんにちは世界！＜br＞";

【実行結果】

・test.htmlを開く

・ファイル出力ボタン押下

以下のようなファイルが出力される。

・ファイル入力ボタン押下

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

ブラウザからローカルのテキストファイルへのアクセスが制限されているのは、インターネットを使う分にはありがたいことなのですが、ローカルでスタンドアローンな画面を使っている場合には逆に困ってしまいます。
そのような場合に、今回紹介したようなテクニックが使えるかもしれません。

月: 2021年2月

Jestを試してみた

【前提】

【インストール】

【実行準備】

【テスト対象のスクリプト作成】

【テストコード作成】

【実行】

JSONフォーマットとは

【JSONのフォーマットの簡単な説明】

■データの開始と終了

■データの構造

■値の種類

■文字コード

文字コードはUTF-8（BOM無し）を使用します。

■その他詳細

【JSONの生成・読込を行うサンプルコード】

■生成のサンプル

■読込のサンプル

テレワークにおけるコミュニケーションのコツ

１．姿が見えない環境であることを意識する

２．どれが自分の書き込みなのかを認識しやすいようにする

３．スルーされても気にしない

JavaScript：inputの入力可能文字を制限する

【サンプルコード】

・test.html

【実行確認】

JavaScript：ブラウザからローカルのテキストファイルの入出力

・入力

・出力

【サンプルコード】

・test.html

・test2.js（テキストファイルを以下のようなjsファイルに変換するのが前提）

【実行結果】

・test.htmlを開く

・ファイル出力ボタン押下

・ファイル入力ボタン押下