サイゼントの技術ブログ

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での実行確認の方法は早めに覚えておきたいです。

2021年10月26日

Vue.js：componentでpropsを使って属性を受け取る

Vue.jsでは、componentを使用して独自タグを定義することができます。
これは部品化に役立ちます。

独自タグではslotタグにより値を受け取ることができますが、propsプロパティを用いて属性値を受け取ることもできます。
属性値はテンプレート構文で使用できるため、dataプロパティ等と組み合わせて柔軟なDOM操作が可能になるメリットがあります。
また、今回は紹介しませんが、propsプロパティでは必須チェックやデフォルト値設定やバリデーションも実装できるので、それらの機能を実装してより便利に使うこともできます。

以下、サンプルコードです。
propsプロパティを用いることで、テンプレート構文での使用が可能になっていること（{{ }}で囲った箇所への埋め込みが可能になっていること）に注目してください。

【サンプルコード】

・sample1.html（propsプロパティを使わない例）

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample1＜/title＞
＜/head＞
＜body＞

＜h1＞タイトル表示テスト＜/h1＞
＜div id="app"＞
  ＜my-component＞hoge＜/my-component＞
  ＜my-component＞fuga＜/my-component＞
  ＜my-component＞piyo＜/my-component＞
＜/div＞
＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
Vue.component('my-component', {
  // バッククォートで囲ってHTMLを直接記述。slotの箇所に値埋め込み。
  template: `＜h3＞タイトル：＜slot＞＜/slot＞＜/h3＞`
});

// Vueオブジェクトの生成
var app = new Vue({
  el: "#app"
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample1＜/title＞

＜/head＞

＜body＞

＜h1＞タイトル表示テスト＜/h1＞

＜div id="app"＞

＜my-component＞hoge＜/my-component＞

＜my-component＞fuga＜/my-component＞

＜my-component＞piyo＜/my-component＞

＜/div＞

＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

Vue.component('my-component', {

// バッククォートで囲ってHTMLを直接記述。slotの箇所に値埋め込み。

template: `＜h3＞タイトル：＜slot＞＜/slot＞＜/h3＞`

});

// Vueオブジェクトの生成

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

・sample2.html（propsプロパティを使う例）

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample2＜/title＞
＜/head＞
＜body＞

＜h1＞タイトル表示テスト＜/h1＞
＜div id="app"＞
  ＜my-component title="hoge"＞＜/my-component＞
  ＜my-component title="fuga"＞＜/my-component＞
  ＜my-component title="piyo"＞＜/my-component＞
＜/div＞
＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
Vue.component('my-component', {
  // シングルクォートで囲ってテンプレート構文を記述。属性値を受け取る。
  data: function () {
    return {
      titleHeader: "タイトル："
    }
  },
  props: ［'title'］,
  template: '＜h3＞{{ titleHeader }}{{ title }}＜/h3＞'
});

// Vueオブジェクトの生成
var app = new Vue({
  el: "#app"
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞Vue.js - sample2＜/title＞

＜/head＞

＜body＞

＜h1＞タイトル表示テスト＜/h1＞

＜div id="app"＞

＜my-component title="hoge"＞＜/my-component＞

＜my-component title="fuga"＞＜/my-component＞

＜my-component title="piyo"＞＜/my-component＞

＜/div＞

＜h5＞※これらのタイトルはVue.jsで出力しています＜/h5＞

＜script src="https://unpkg.com/vue"＞＜/script＞

＜script＞

Vue.component('my-component', {

// シングルクォートで囲ってテンプレート構文を記述。属性値を受け取る。

data: function () {

return {

titleHeader: "タイトル："

}

props: ［'title'］,

template: '＜h3＞{{ titleHeader }}{{ title }}＜/h3＞'

});

// Vueオブジェクトの生成

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

【実行結果】

sample1.html、sample2.html共に、以下のように表示されます。

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

componentについては前回の記事で触れましたが、実務でcomponentを使うのであればpropsもほぼセットで覚える必要があります。
前回の記事ではcomponentを使わない場合と使う場合、今回の記事ではpropsを使わない場合と使う場合をなるべく簡単な例で比較していますので、理解の助けになれば幸いです。