サイゼントの技術ブログ – Just another WordPress site

2021年11月30日

JavaScript：未宣言・var・letの変数の挙動の違い

JavaScriptにおける変数の宣言方法は、constを除くと以下の４つがあります。

・未宣言

var1 = "var1";

1	var1 = "var1";

のように、値が代入された時点で変数が宣言されたものとみなされる。

・var

var var1;

var var1;

のように、var句により変数を宣言する。

・var（巻き上げ）

var1 = "var1";
var var1;

1 2	var1 = "var1"; var var1;

のように値が代入された後にvarにより変数が宣言された場合、変数が宣言された後に値が代入されたものとみなされる。
この例では、以下と同価とみなされる。

var var1;
var1 = "var1";

1 2	var var1; var1 = "var1";

・let

let var1;

let var1;

のように、var句により変数を宣言する。
ES6のバージョン以降でサポートされている。

これらの宣言方法の違いにより、非Strictモードの場合に以下の挙動の違いが生じます。
（varの巻き上げについては、巻き上げしなかった場合と同じです）

なお、Strictモードの場合は、varやletやconstを用いて宣言をせずに変数に値を代入した場合にReferenceErrorで異常終了するようになります。

以下、挙動を確認するためのサンプルコードです。
（Node.jsで確認します）

それぞれの変数で以下を確認します。

・var1

ブロック外で宣言した変数をブロック内でも宣言。
ブロック内の変更がブロック外に影響するなら、ブロックを出た時点で変数が書き変わる。

・var2

ブロック内でのみ変数を宣言。
ブロック内の変更がブロック外に影響するなら、ブロックを出た時点で参照不可になる。

・var3

関数内でのみ変数を宣言。関数内の変更が関数外に影響するなら、関数を出た時点で参照不可になる。

【テストコード（未宣言）】

・test.js

var1 = "var1";
console.log("before change  :" + var1);

if (true) {
    var1 = "var1mod"
    var2 = "var2";
    console.log("in block       :" + var2);
}
console.log("after change   :" + var1);
console.log("out of block   :" + var2);

function func() {
    var3 = "var3";
    console.log("in function    :" + var3);
    return var3;
}
func();
console.log("out of function:" + var3);

var1 = "var1";

console.log("before change :" + var1);

if (true) {

var1 = "var1mod"

var2 = "var2";

console.log("in block :" + var2);

}

console.log("after change :" + var1);

console.log("out of block :" + var2);

function func() {

var3 = "var3";

console.log("in function :" + var3);

return var3;

}

func();

console.log("out of function:" + var3);

【実行結果（未宣言）】

c:\tmp＞node test.js
before change  :var1
in block       :var2
after change   :var1mod
out of block   :var2
in function    :var3
out of function:var3

c:\tmp＞

c:\tmp＞node test.js

before change :var1

in block :var2

after change :var1mod

out of block :var2

in function :var3

out of function:var3

c:\tmp＞

【テストコード（var）】

・test.js

var var1 = "var1";
console.log("before change  :" + var1);

if (true) {
    var var1 = "var1mod"
    var var2 = "var2";
    console.log("in block       :" + var2);
}
console.log("after change   :" + var1);
console.log("out of block   :" + var2);

function func() {
    var var3 = "var3";
    console.log("in function    :" + var3);
    return var3;
}
func();
// console.log("out of function:" + var3); // ReferenceError

var var1 = "var1";

console.log("before change :" + var1);

if (true) {

var var1 = "var1mod"

var var2 = "var2";

console.log("in block :" + var2);

}

console.log("after change :" + var1);

console.log("out of block :" + var2);

function func() {

var var3 = "var3";

console.log("in function :" + var3);

return var3;

}

func();

// console.log("out of function:" + var3); // ReferenceError

【実行結果（var）】

c:\tmp＞node test.js
before change  :var1
in block       :var2
after change   :var1mod
out of block   :var2
in function    :var3

c:\tmp＞

c:\tmp＞node test.js

before change :var1

in block :var2

after change :var1mod

out of block :var2

in function :var3

c:\tmp＞

【テストコード（var巻き上げ）】

・test.js

var1 = "var1";
var var1;
console.log("before change  :" + var1);

if (true) {
    var1 = "var1mod"
    var var1;
    var2 = "var2";
    var var2;
    console.log("in block       :" + var2);
}
console.log("after change   :" + var1);
console.log("out of block   :" + var2);

function func() {
    var3 = "var3";
    var var3;
    console.log("in function    :" + var3);
    return var3;
}
func();
// console.log("out of function:" + var3); // ReferenceError

var1 = "var1";

var var1;

console.log("before change :" + var1);

if (true) {

var1 = "var1mod"

var var1;

var2 = "var2";

var var2;

console.log("in block :" + var2);

}

console.log("after change :" + var1);

console.log("out of block :" + var2);

function func() {

var3 = "var3";

var var3;

console.log("in function :" + var3);

return var3;

}

func();

// console.log("out of function:" + var3); // ReferenceError

【実行結果（var巻き上げ）】

c:\tmp＞node test.js
before change  :var1
in block       :var2
after change   :var1mod
out of block   :var2
in function    :var3

c:\tmp＞

c:\tmp＞node test.js

before change :var1

in block :var2

after change :var1mod

out of block :var2

in function :var3

c:\tmp＞

【テストコード（let）】

・test.js

let var1 = "var1";
console.log("before change  :" + var1);

if (true) {
    let var1 = "var1mod"
    let var2 = "var2";
    console.log("in block       :" + var2);
}
console.log("after change   :" + var1);
// console.log("out of block   :" + var2); // ReferenceError

function func() {
    let var3 = "var3";
    console.log("in function    :" + var3);
    return var3;
}
func();
// console.log("out of function:" + var3); // ReferenceError

let var1 = "var1";

console.log("before change :" + var1);

if (true) {

let var1 = "var1mod"

let var2 = "var2";

console.log("in block :" + var2);

}

console.log("after change :" + var1);

// console.log("out of block :" + var2); // ReferenceError

function func() {

let var3 = "var3";

console.log("in function :" + var3);

return var3;

}

func();

// console.log("out of function:" + var3); // ReferenceError

【実行結果（let）】

c:\tmp＞node test.js
before change  :var1
in block       :var2
after change   :var1
in function    :var3

c:\tmp＞

c:\tmp＞node test.js

before change :var1

in block :var2

after change :var1

in function :var3

c:\tmp＞

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

この記事では、JavaScriptの変数宣言の違いによる挙動の違いをまとめてみました。
色々と書きましたが、現在の実務ではletを使うのが無難です。
letであれば、Javaの変数と同じような感覚で使うことができます。

2021年11月24日

JavaScript：String型かNumber型かわからない変数をNumber型に置き換えるコード

JavaScriptは動的型付けを採用した言語であるため、実行するまで変数の型が分からない状態になります。
この特徴により、数値計算を行う時を以下のような問題を引き起こすことがあります。

・加算を行うつもりが文字列結合になってしまう

（例えば、100 + “100” は “100100”になる）

・計算結果がNaNになってしまう

（例えば、カンマ等を含むString型をNumber()でNumber型に変換しようとした場合）

・桁が途中で落ちてしまう

（例えば、カンマ等を含むString型をparseInt()でNumber型に変換しようとした場合）

これらの問題は、計算に使おうと思っていた変数がString型であり、そのString型を正しくNumber型に変換できていないことに起因します。

これらの問題は、以下のようなコードにより変数をNumber型に正しく変換することで、回避することができます。

【コード】

Number(input.toString().replace(/［^0-9\.］/g, ''));

1	Number(input.toString().replace(/［^0-9\.］/g, ''));

【サンプルの実行結果】

・inputが整数のNumber型

var input = 1234;
var output = Number(input.toString().replace(/［^0-9\.］/g, ''));
console.log(output); // 1234

var input = 1234;

var output = Number(input.toString().replace(/［^0-9\.］/g, ''));

console.log(output); // 1234

・inputが小数のNumber型

var input = 1234.5;
var output = Number(input.toString().replace(/［^0-9\.］/g, ''));
console.log(output); // 1234.5

var input = 1234.5;

var output = Number(input.toString().replace(/［^0-9\.］/g, ''));

console.log(output); // 1234.5

・inputが整数のString型

var input = "1234";
var output = Number(input.toString().replace(/［^0-9.］/g, ''));
console.log(output); // 1234

var input = "1234";

var output = Number(input.toString().replace(/［^0-9.］/g, ''));

console.log(output); // 1234

・inputが小数のString型

var input = "1234.5";
var output = Number(input.toString().replace(/［^0-9\.］/g, ''));
console.log(output); // 1234.5

var input = "1234.5";

var output = Number(input.toString().replace(/［^0-9\.］/g, ''));

console.log(output); // 1234.5

・inputがカンマを含むのString型

var input = "1,234";
var output = Number(input.toString().replace(/［^0-9\.］/g, ''));
console.log(output); // 1234

var input = "1,234";

var output = Number(input.toString().replace(/［^0-9\.］/g, ''));

console.log(output); // 1234

【解説】

・Number型に含まれる文字は”0-9″と”.”のみなので、それ以外の文字はreplace関数により削除する。
・replace関数は変数がString型でないと使用できないので、変数を事前にtoString関数によりString型に変換する（変換する代わりに型を判定する分岐を入れて処理を分けても良い）。

今回も、実務の中で問題になったケースを記事にしました。
JavaScriptは動的型付けを採用した言語であるがゆえに、Javaのような静的型付けでは気を付ける必要がない点にも気を付けてコーディングする必要があります。

2021年11月17日

JavaScript：二次元配列（多次元配列）になる場合の長さの判定

JavaScriptで多次元配列を作るためにはpushを使用します。
また、配列の長さを調べるにはArray.lengthを使用します。

ここで、pushの方法により、Array.lengthの使い方が異なってくるので、注意が必要です。
（使い方を間違えると、undefinedが出力されます）

正しい使い方は下記の画像の通りです。

１回目のpushでは、二次元目の配列をそのままpushしています。
この場合、二次元目の配列には名前が無いので、「array1[0].length」とする必要があります。

２回目のpushでは、二次元目の配列をオブジェクト化した上でpushしています。
この場合、二次元目の配列は、「array2」という名前のオブジェクトの要素にぶら下がっているような形になるので、「array1[1].array2.length」とする必要があります。

今回は、実務の中で混乱したことを記事にしてみました。
言われてみれば何てことのないことですが、JavaScriptは動的型付けを採用している言語であり、実行前に型の相違を見つけることが困難であるため、想定した型と異なることによるundefinedに悩まされやすいです。

2021年11月9日

JSONを整形するNode.jsのサンプルコード

JSONフォーマットはプログラムで読み込むことができるデータ構造であり、人間が読むのにも適しています。
しかし、人間が読む場合、適切にインデントが入っていないと読みにくいです。

そこで、JSONフォーマットを整形するサンプルコードを紹介します。
このサンプルコードはNode.jsを入れることで動かすことができます。
サンプルコードと同じディレクトリに”hoge.json”のファイル名でJSONファイル(UTF-8)を格納し、サンプルコードを実行すると、同じディレクトリに”hoge_shaped.json”の名前で整形済みJSONファイルが出力されます。
（JSONフォーマットの詳細については、以前の記事を参照して下さい）

【サンプルコード】

・json_shaping.js

const fs = require('fs');
const jsonObject = JSON.parse(fs.readFileSync('./hoge.json', 'utf8'));
fs.writeFileSync('./hoge_shaped.json', JSON.stringify(jsonObject,null,4));

const fs = require('fs');

const jsonObject = JSON.parse(fs.readFileSync('./hoge.json', 'utf8'));

fs.writeFileSync('./hoge_shaped.json', JSON.stringify(jsonObject,null,4));

【サンプル実行結果】

・hoge.json

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

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

・実行コマンド

C:\tmp＞node json_shaping.js

1	C:\tmp＞node json_shaping.js

・hoge_shaped.json

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

{

"skill": "singing",

"name": {

"firstName": "miku",

"lastName": "hatsune"

}

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

このようなコードは元々趣味で使っていたのですが、実務でも使う機会が出てきたので、記事として公開してみました。
何かの助けになれば幸いです。

2021年11月2日

ChromeからJavaScriptを実行する

Chromeのデベロッパーツールの機能の一つであるConsoleでは、任意のJavaScriptを実行することができます。
コマンドプロンプトでDOSコマンドを実行するような感覚でJavaScriptを実行することができるので、JavaScriptの仕様のちょっとした確認を行いたい場合に便利です。

【手順】

１．Chromeを立ち上げる。

２．F12でデベロッパーツールを立ち上げる。

（「その他ツール」→「デベロッパーツール」、Ctrl+Shift+Iでも可）

３．「Console」タブをクリックする。

４．任意のJavaScriptを記述し、実行する。

（Shift+Enterで改行、Enterで実行）

また、Consoleで実行するJavaScriptにより、現在開いているページに影響を与えることもできます。
例えば、MDNのJavaScriptチュートリアルのトップページにアクセスし、下記コードを実行すると、ページの文字列置換（’JavaScript’を’［JavaScript］’に置換）を行うことができます。

document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');

1	document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');

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

JavaScriptの動作は予想が難しいものが少なくないため、Consoleでの実行確認の使用頻度は高いです。
JavaScriptでの業務を行うのであれば、Consoleでの実行確認の方法は早めに覚えておきたいです。