サイゼントの技術ブログ – ページ 3

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

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は日本語の公式ドキュメントも充実しているため、その意味でもお勧めのフレームワークです。