伊東輝 – ページ 23 – サイゼントの技術ブログ

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年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でもオブジェクト指向をサポートしていることは知っておいて損はないと思います。