はじめに
kintoneのカスタマイズ効率をあげよう5 – webpackのmodeオプションの続きです。
kintoneのJavaScriptカスタマイズでは即時関数の利用、Strictモードの利用「”use strict”;」を推奨しています。
(function() {
"use strict";
// ここに処理したい内容を書いていく
})();今回は即時関数の動作を確認しwebpackを利用している場合は即時関数が不要であること、同様にBabelを利用している場合はStrictモードの定義が不要であることを確認します。
即時関数の動作を確認
以下のコードをkintoneアプリに適用します。
const outerVariable = "即時関数外の変数";
(function () {
const innerVariable = "即時関数内の変数";
})();開発者コンソールからそれぞれの変数を参照できるか確認します。
outerVariableは参照できましたが、innerVariableは参照できませんでした。
即時関数内のコードは即時関数外に影響を与えません。これがkintoneのJavaScriptカスタマイズで即時関数の利用が推奨されている理由の1つです。
webpackの動作確認
同じことをwebpack –mode=developmentで試すと両方の変数が参照できません。
–mode=productionでは不要なコードが削除されるので空のindex.jsが生成されます。
index.jsを確認してみるとwebpackの出力自体が即時関数で囲まれています。
(function() { // webpackBootstrap
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("var outerVariable = \"即時関数外の変数\";\n\n(function () {\n var innerVariable = \"即時関数内の変数\";\n})();\n\n//# sourceURL=webpack://kintone-customize-template/./src/index.ts?");
/******/ })()
;つまり、webpackを利用する場合はkintoneのJavaScriptカスタマイズを即時関数で囲む必要はありません。即時関数を取り除くと以下のコードになります。
"use strict";
interface IndexEvent {
// 省略
}
interface DetailEvent {
// 省略
}
kintone.events.on("app.record.index.show", (event: IndexEvent) => {
console.log(Object.values(event));
});
kintone.events.on("app.record.detail.show", (event: DetailEvent) => {
console.log(Object.values(event));
});Strictモード（”use strict”;）の動作を確認
そもそもStrictモードがわからない人はこちらを参考にしてください。
developer.mozilla.org以下のコードをkintoneアプリに適用します。
variable = "変数";
console.log(variable);ESLintは’variable’ is not defined.というエラーを表示しますが、JavaScriptは問題なく動作します。
この動作は、例えば以下のようにタイポしてしまった場合にも正常に動作してしまいます。これをエラーにするのがStrictモードの機能の1つです。
let variable = "変数";
vairable = "書き換え後の変数";
console.log(variable); // 「変数」と出力されますStrictモードではエラー「Uncaught ReferenceError: vairable is not defined」が発生します。
"use strict";
let variable = "変数";
vairable = "書き換え後の変数";
console.log(variable);
Strictモードも不要
実はBabelでトランスパイルされたコードはデフォルトでStrictモードです（Babelによって「”use strict”;」が定義されます）。Babelをブラウザで試せるので試してみてください。先頭に「”use strict”;」が出力されるはずです。
つまり、最終的には以下のコードで良くなります。
interface IndexEvent {
// 省略
}
interface DetailEvent {
// 省略
}
kintone.events.on("app.record.index.show", (event: IndexEvent) => {
console.log(Object.values(event));
});
kintone.events.on("app.record.detail.show", (event: DetailEvent) => {
console.log(Object.values(event));
});本当にStrictモードになっているか念の為確認します。以下のコードでwebpackを実行してkintoneアプリに適用すると・・・
kintone.events.on("app.record.index.show", (event: IndexEvent) => {
variable = "test";
console.log(Object.values(event));
});しっかりエラーになりました！
ここまでの設定
ここまでの設定は以下にあります。
https://github.com/potaracom/kintone-customize-template5