サイゼントの技術ブログ

2021年10月19日

Vue.js：componentで独自タグを定義する

Vue.jsの重要な機能の一つとして、componentという機能が存在します。
これは部品化に役立ちます。

この機能を利用することで、独自にタグを定義できるようになり、冗長な記述を減らすことができます。
例えば、今回はサンプルコードとしてsample1.htmlとsample2.htmlを用意していますが、sample1.htmlでは同じようなdivタグの記述が続くのに対し、sample2.htmlはdivタグの記述を独自のmy-componentタグにまとめることで同じような記述が続くのを防ぐことができています。

【サンプルコード】

・sample1.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample1＜/title＞
  ＜style＞
  .my-button {
    background-color: #ccc;
    text-align: center;
    border: 3px solid #000;
  }
  ＜/style＞

＜/head＞
＜body＞

＜div id="app"＞
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞挨拶
  ＜/div＞
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞ハローワールド
  ＜/div＞
＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
// Vueオブジェクトの生成
var app = new Vue({
  el: "#app",
  methods: {
    func1: function() {
      alert('Hello World!')
    }
  }
});
＜/script＞
＜/body＞
＜/html＞

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

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

＜style＞

.my-button {

background-color: #ccc;

text-align: center;

border: 3px solid #000;

}

＜/style＞

＜/head＞

＜body＞

＜div id="app"＞

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞挨拶

＜/div＞

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞ハローワールド

＜/div＞

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

＜script＞

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

var app = new Vue({

el: "#app",

methods: {

func1: function() {

alert('Hello World!')

}

});

＜/script＞

＜/body＞

＜/html＞

・sample2.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
  ＜meta charset="UTF-8"＞
  ＜title＞Vue.js - sample2＜/title＞
  ＜style＞
  .my-button {
    background-color: #ccc;
    text-align: center;
    border: 3px solid #000;
  }
  ＜/style＞

＜/head＞
＜body＞

＜div id="app"＞
  ＜my-component＞挨拶＜/my-component＞
  ＜my-component＞ハローワールド＜/my-component＞
＜/div＞

＜script src="https://unpkg.com/vue"＞＜/script＞
＜script＞
// コンポーネント定義（"my-component"という独自タグを作成）
// templateのslotタグにはmy-componentタグで与えられた値が挿入される
Vue.component('my-component', {
  template: `
  ＜div class="my-button" v-on:click="func1"＞
    ＜strong＞機能：＜/strong＞
    ＜slot＞＜/slot＞
  ＜/div＞
  `,
  methods: {
    func1: function() {
      alert('Hello World!')
    }
  }
});

// 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＞

＜style＞

.my-button {

background-color: #ccc;

text-align: center;

border: 3px solid #000;

}

＜/style＞

＜/head＞

＜body＞

＜div id="app"＞

＜my-component＞挨拶＜/my-component＞

＜my-component＞ハローワールド＜/my-component＞

＜/div＞

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

＜script＞

// コンポーネント定義（"my-component"という独自タグを作成）

// templateのslotタグにはmy-componentタグで与えられた値が挿入される

Vue.component('my-component', {

template: `

＜div class="my-button" v-on:click="func1"＞

＜strong＞機能：＜/strong＞

＜slot＞＜/slot＞

＜/div＞

methods: {

func1: function() {

alert('Hello World!')

}

});

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

var app = new Vue({

el: "#app"

});

＜/script＞

＜/body＞

＜/html＞

【実行結果】

実行結果はsample1.htmlとsample2.htmlで同じです。
以下のように２つの部品が出てきます。

部品をクリックするとポップアップが表示されます。

この記事では紹介しませんが、componentの記述を外部ファイルに切り出すことも可能です。
外部ファイルに切り出すことで、同じ部品（component）を複数ファイルで利用することができるようになります。

なお、現在はhtmlファイルをChromeで開いて実行していますが、外部ファイルのimportを行う場合はこの方法での実行は困難です。
（セキュリティ対策のため）
外部ファイルのimportの実行を試すには、Vue CLIでサーバを立てる等の対応が必要になります。

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

componentの機能は冗長性を排除するために必要であり、実務での使用頻度も高いです。
Vue.jsを実務で使用するのであれば、早めに覚えておきたい機能の一つです。

2021年10月12日

Excel：ピボットテーブルの使い道と作り方（テストデータ付き）

ピボットテーブルとは、集計作業を行う機能のことです。
自力で集計用の表を作成して関数を書くことでも集計作業は可能ですが、ピボットテーブルを用いればマウス操作だけで簡単に集計作業を行うことができます。

今回の記事では、架空の体力測定結果を集計する例を挙げて、ピボットテーブルの使い方を説明します。
この例では、握力について、男女で差があるのか、測定月で差があるのかを、平均値を出すことで確認します。

なお、使用するデータは以下からダウンロードできます。手を動かしながら覚えたい方はダウンロードしてみてください。
https://cyzennt.co.jp/blog/wp-content/uploads/2021/10/f0baae9405ab2b4cf966538a631c041e.xlsx

【手順】

１．集計作業を行う表をドラッグで選択し、挿入＞ピボットテーブルを選択する。

２．ドラッグした範囲が自動的に選択されているので、OKボタンを押下する。

３．ピボットテーブルのシートが生成されるので、列に測定月、行に性別、値に握力(kg)をドラッグして選択する。

４．「合計 / 握力(kg)」の右にある矢印を選択し、値フィールドの設定を選択する。

５．デフォルトでは合計が選択されているので、平均を選択し、OKボタンを押下する。

６．性別ごと、また測定月ごとで、握力(kg)の平均値が算出される。

これで、男女では大きな差があるが、測定月では大きな差がないことが一目でわかるようになりました。

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

実務でも集計作業を行うことはあり、例えば性能試験の結果の分析で集計作業が必要になります。
そのような場合に、ピボットテーブルで作業を効率化することができるので、覚えておいて損はない機能だと思います。

2021年10月5日

ExcelでINSERT文を作成

Excelの機能を使うことで、簡単な手順で大量のSQLのINSERT文を作成することができます。
臨時の運用対応ではデータが公表されてから30分以内にDBに反映させなければならない等、限られた時間でのデータ補正が必要になるため、プログラムを事前に用意できない場合はExcelでの対応が有効になります。
運用対応だけでなく、開発時のテストデータ作成も効率的に行うことができます。

以下で、例を挙げて説明していきます。

【INSERT対象のテーブル定義】

create table 商品(
  商品ID INT PRIMARY KEY,
  商品名 CHAR(30),
  登録年月日時分秒 CHAR(14)
);

create table 商品(

商品ID INT PRIMARY KEY,

商品名 CHAR(30),

登録年月日時分秒 CHAR(14)

);

【INSERT文の作成】

①下記のように入力する。

G2セルについては、下記の式を入力する。

=A$2&”000000″

この式によりA2セルと文字列”000000″を結合する。

参照時には$マークをつけて絶対参照とする。

（後の手順でコピーする時に参照先がずれないようにするため）

②B2～H2セルを3～6行目にコピーする。

③C3セルに2を入力してから、C2～C3セルを選択し、4～6行目までオートフィルする。

④B2～H6セルをコピーし、サクラエディタ等のテキストエディタに張り付ける。

⑤セルを区切るtabを削除する。

サクラエディタの場合は、”\t”を””に置換することで削除できる。

【完成したINSERT文】

INSERT INTO 商品 VALUES(1,'hoge                          ',20180808000000);
INSERT INTO 商品 VALUES(2,'hoge                          ',20180808000000);
INSERT INTO 商品 VALUES(3,'hoge                          ',20180808000000);
INSERT INTO 商品 VALUES(4,'hoge                          ',20180808000000);
INSERT INTO 商品 VALUES(5,'hoge                          ',20180808000000);

INSERT INTO 商品 VALUES(1,'hoge ',20180808000000);

INSERT INTO 商品 VALUES(2,'hoge ',20180808000000);

INSERT INTO 商品 VALUES(3,'hoge ',20180808000000);

INSERT INTO 商品 VALUES(4,'hoge ',20180808000000);

INSERT INTO 商品 VALUES(5,'hoge ',20180808000000);

なお、UPDATE文やDELETE文等も、同じ要領で作成することができます。
また、今回は紹介していませんが、区切り位置、重複の排除、フィルタ等も使用頻度が高い機能であり、これらの機能を使えばフォーマット変換やデータ抽出等も可能になります。

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

今回紹介したようなテクニックは技術的には難しいことはしていませんが、実務で良く使う便利なテクニックです。
このようなテクニックはまた紹介していきたいと思います！

2021年9月29日

Excelで文字の一括置換を行う方法（外部プログラムからの操作）

Excelファイル（.xlsx）は複数のxmlファイルを圧縮して構成されています。
解凍することでxmlファイルの形式として開けるようになり、通常のテキストエディタで編集することが可能になります。
これを利用することで、全てのシートに対して、オブジェクト内（例えば吹き出し内）の文字も含めた文字の一括置換が可能になります。
（Excelの機能では、オブジェクト内の文字を検索したり置換したりすることができません）

以下、手順例です。

１．Excel形式のファイルを用意する

２．拡張子を「.xlsx」から「.zip」へ変更する

３．２のファイルをLhaplus等で解凍する

４．サクラエディタのgrep置換等の機能で文字の一括置換をかける

※本文中の文字は xl\sharedStrings.xml に定義されます。
※図形中の文字は xl\drawings\drawing*.xml に定義されます。
※drawing*.xml に関しては、半角文字と全角文字が入れ替わる箇所で、xmlファイル上で別々の定義になるので注意が必要です。例えば、「hogeほげ」という文字については、xmlファイル上で「hoge」と「ほげ」という文字に分割されます。

５．Lhaplus等で再度圧縮する

※１のファイル名のフォルダの直下で作業を行う必要があることに注意

６．圧縮されたファイルについて、拡張子を「.zip」から「.xlsx」へ変更する

７．６のファイルを開いて置換されたことを確認

※「～の一部の内容に問題が見つかりました。可能な限り内容を回復しますか？」と聞かれるかもしれませんが、「はい」で良いです。

なお、7-Zipを用いれば、解凍や圧縮をコマンドラインから行うことが可能になります。また、サクラエディタにはコマンドラインからマクロを読みこませる機能もあります。これらの機能を組み合わせれば、バッチファイルから複数のExcelファイルに対して一括置換を行うことも可能になります。

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

このように、xlsxファイルは複数のxmlファイルで構成されているため、解凍・再圧縮を行うことで外部プログラムからの操作が可能になり、作業を効率化できる可能性があります。
少々強引な方法にはなりますが、知っておくと使える場面があるかもしれません。

2021年9月21日

JavaScript：async・awaitの例外処理

JavaScriptのasync・awaitについては以前の記事で簡単に触れましたが、例外処理を行う場合には別途注意が必要であるため、続きの記事を書きます。

async・awaitで例外処理を行う場合、メソッドチェーンで受け取る方法と、try-catchで受け取る方法があります。
これらの方法について、紹介していこうと思います。

サンプルコードはNode.jsで実行しています。

awaitで呼び出される関数では、Promiseオブジェクトを返す必要があります。
通常はresolveで返しますが、例外処理を行う場合はrejectを返す必要があります。
これは、例外をメソッドチェーンで受け取る場合も、try-catchで受け取る場合も変わりません。

なお、rejectで返されたPromiseオブジェクトをメソッドチェーンでもtry-catchでも受け取らなかった場合は、UnhandledPromiseRejectionWarningが発生しプロセスが終了するので、注意が必要です。

rejectでPromiseオブジェクトを返された場合は、メソッドチェーン「.catch」で受け取ることが可能です。
「.catch」で受け取った場合は、「.catch」内の処理が実行され、戻り値は取得できません。
（戻り値はundefinedになります）
resolveで返された場合は、「.catch」内の処理が実行されません。

なお、メソッドチェーン「.catch」の前にメソッドチェーン「.then」を入れることで、resolveで返されたPromiseオブジェクトをこれで返すことができます。
「.then」で受け取った場合は、「.then」内の処理が実行され、戻り値は取得できません。
（戻り値はundefinedになります）
また、rejectで返された場合は、「.catch」の前に定義した「.then」内の処理が実行されません。

以下、サンプルコードです。

【サンプルコード】

・sample.js

function lightTask() {
  console.log("light");
}

function heavyTask() {
  // awaitで呼び出される関数ではpromiseオブジェクトを返す必要がある
  return new Promise((resolve, reject) =＞ {
    const procedure = () =＞ {
      console.log("heavy");
      // resolve(0);  // ①
      // reject(1);  // ②
    }
    setTimeout(procedure, 1000);
  });
}

// awaitを使用する関数にはasyncをつける
async function exection() {
  let result = await heavyTask()
  //               .then((code) =＞ { console.log("normal:" + code); }) // ③
  //               .catch((code) =＞ { console.error("error:" + code); }) // ④
                 ;
  console.log("code:"+result);
  lightTask();
}

exection();

function lightTask() {

console.log("light");

}

function heavyTask() {

// awaitで呼び出される関数ではpromiseオブジェクトを返す必要がある

return new Promise((resolve, reject) =＞ {

const procedure = () =＞ {

console.log("heavy");

// resolve(0); // ①

// reject(1); // ②

}

setTimeout(procedure, 1000);

});

}

// awaitを使用する関数にはasyncをつける

async function exection() {

let result = await heavyTask()

// .then((code) =＞ { console.log("normal:" + code); }) // ③

// .catch((code) =＞ { console.error("error:" + code); }) // ④

;

console.log("code:"+result);

lightTask();

}

exection();

【実行結果】

・①と③と④のコメントアウトを外した場合（resolveを.thenで受け取る）

C:\tmp＞node sample.js
heavy
normal:0
code:undefined
light

C:\tmp＞

C:\tmp＞node sample.js

heavy

normal:0

code:undefined

light

C:\tmp＞

・①と④のコメントアウトを外した場合（resolveを.thenで受け取らない）

C:\tmp＞node sample.js
heavy
code:0
light

C:\tmp＞

C:\tmp＞node sample.js

heavy

code:0

light

C:\tmp＞

・②と③と④のコメントアウトを外した場合（rejectを.catchで受け取る）

C:\tmp＞node sample.js
heavy
error:1
code:undefined
light

C:\tmp＞

C:\tmp＞node sample.js

heavy

error:1

code:undefined

light

C:\tmp＞

・参考：②と③のコメントアウトを外した場合（rejectを受け取らない）

C:\tmp＞node sample.js
heavy
(node:9180) UnhandledPromiseRejectionWarning: 1
(node:9180) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This
error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). To termina
te the node process on unhandled promise rejection, use the CLI flag `--unhandle
d-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejectio
ns_mode). (rejection id: 1)
(node:9180) ［DEP0018］ DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
 Node.js process with a non-zero exit code.

C:\tmp＞

C:\tmp＞node sample.js

heavy

(node:9180) UnhandledPromiseRejectionWarning: 1

(node:9180) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This

error originated either by throwing inside of an async function without a catch

block, or by rejecting a promise which was not handled with .catch(). To termina

te the node process on unhandled promise rejection, use the CLI flag `--unhandle

d-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejectio

ns_mode). (rejection id: 1)

(node:9180) ［DEP0018］ DeprecationWarning: Unhandled promise rejections are depre

cated. In the future, promise rejections that are not handled will terminate the

Node.js process with a non-zero exit code.

C:\tmp＞

rejectで返されたPromiseオブジェクトはtry-catchで受け取ることも可能です。
ただし、この場合、戻り値を参照しないように注意が必要で、参照してしまうとUnhandledPromiseRejectionWarningが発生しプロセスが終了してしまいます。

以下、サンプルコードです。

【サンプルコード】

・sample.js

function lightTask() {
  console.log("light");
}

function heavyTask() {
  // awaitで呼び出される関数ではpromiseオブジェクトを返す必要がある
  return new Promise((resolve, reject) =＞ {
    const procedure = () =＞ {
      console.log("heavy");
      reject(1);
    }
    setTimeout(procedure, 1000);
  });
}

// awaitを使用する関数にはasyncをつける
async function exection() {
  try {
    let result = await heavyTask();
    console.log("code:"+result);
  } catch (e) {
    console.error("error:"+e);
    // console.log("code:"+result); // ⑤
  }
  lightTask();
}

exection();

function lightTask() {

console.log("light");

}

function heavyTask() {

// awaitで呼び出される関数ではpromiseオブジェクトを返す必要がある

return new Promise((resolve, reject) =＞ {

const procedure = () =＞ {

console.log("heavy");

reject(1);

}

setTimeout(procedure, 1000);

});

}

// awaitを使用する関数にはasyncをつける

async function exection() {

try {

let result = await heavyTask();

console.log("code:"+result);

} catch (e) {

console.error("error:"+e);

// console.log("code:"+result); // ⑤

}

lightTask();

}

exection();

【実行結果】

・そのまま実行した場合（rejectをtry-catchで受け取る）

C:\tmp＞node sample.js
heavy
error:1
light

C:\tmp＞

C:\tmp＞node sample.js

heavy

error:1

light

C:\tmp＞

・参考：⑤のコメントアウトを外した場合（try-catchで受け取る際に戻り値参照）

C:\tmp＞node sample.js
heavy
error:1
(node:1600) UnhandledPromiseRejectionWarning: ReferenceError: result is not defi
ned
    at exection (C:\tmp\sample.js:23:25)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:1600) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This
error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). To termina
te the node process on unhandled promise rejection, use the CLI flag `--unhandle
d-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejectio
ns_mode). (rejection id: 1)
(node:1600) ［DEP0018］ DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
 Node.js process with a non-zero exit code.

C:\tmp＞

C:\tmp＞node sample.js

heavy

error:1

(node:1600) UnhandledPromiseRejectionWarning: ReferenceError: result is not defi

ned

at exection (C:\tmp\sample.js:23:25)

at processTicksAndRejections (internal/process/task_queues.js:97:5)

(node:1600) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This

error originated either by throwing inside of an async function without a catch

block, or by rejecting a promise which was not handled with .catch(). To termina

te the node process on unhandled promise rejection, use the CLI flag `--unhandle

d-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejectio

ns_mode). (rejection id: 1)

(node:1600) ［DEP0018］ DeprecationWarning: Unhandled promise rejections are depre

cated. In the future, promise rejections that are not handled will terminate the

Node.js process with a non-zero exit code.

C:\tmp＞

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

JavaScriptのasync・await、特に例外処理は文法に少し癖があり、誤った記述をしても異常終了しないことがあるので、実際のシステム開発でも障害になりやすい所です。
awaitで待っていないように見える、例外発生時にだけ予期せぬ事象が出る、といった場合は、async・awaitの書き方が正しいか疑ってみましょう。