プログラミング – ページ 11 – サイゼントの技術ブログ

2021年2月18日

JSONフォーマットとは

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