このシリーズではJavaScriptによるコーディングが慣れてきた初級者向けに、中級者となるためのステップアップ術を紹介します。

今回は第1弾として、kintoneカスタマイズでwebpackを使う方法を紹介します。

webpack自体の導入は次の記事で紹介しているのでお試しください。
webpack 入門 ~Babel,Polyfill を使って快適 ES6 ライフ~

導入後、実際のkintone開発で使用する例を後述の5つの利点と合わせて紹介します。
先ほど紹介した記事で使用している設定を、より実践的に修正してwebpackを使用していきます。

目指せ中級者シリーズの記事一覧は以下を参照してください。
目指せ中級者シリーズ

webpackを入れると、いろんなことができます。

• JS のファイルを分割できる
  開発の規模が大きくなるにつれJSファイルも大きくなりますが、webpackを使うことでファイルを分割できます。
• 自作の関数を使い回せる
  webpackを使うことで別ファイルに定義した関数を使い回すことができます。
• アプリ ID をどこかにまとめて定義したい
  関数だけでなく、定数も同様にまとめて定義して別ファイルから読み込むことができるため、複数アプリの設計情報を1つのファイルで定義できます。
• npm で公開されているライブラリを使用できる
  ライブラリ使用時は、ライブラリのJavaScriptファイルをダウンロードし、個別でkintoneアプリに適用する必要がありますが、webpackを使用すれば個別の適用は不要になります。

このシリーズではMicrosoft社が提供している Visual Studio Code を利用します。

Visual Studio CodeはJavaScriptのコードの対応が手厚いのと、コマンドラインも表示できるので便利です。
webpackを動作させるためのコマンドもVisual Studio Codeのコマンドラインから実行しています。

メニュー > 表示 > 統合ターミナルでVisual Studio Code画面下部にターミナルが表示されますので、コマンドはその中で実行できます。

詳細は次のページなどを参照ください。
Visual Studio Code の使い方、基本の「キ」

冒頭で紹介したwebpackの記事はあくまで導入記事なので、この記事ではもう一歩実用に踏み込んで 複数のアプリをカスタマイズする場合 を考えてみます。

次のURLに複数のアプリをカスタマイズするためのwebpackの設定を用意したのでダウンロードして利用してください。

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

git cloneまたはリンク先右上の緑色のClone or downloadボタンからZipファイルをダウンロードして利用してください。
以降の導入方法は上記ページのReadmeを確認してください。

今回は以下のようなディレクトリー（フォルダー）構成になっています。

アプリごとのカスタマイズのディレクトリーをまとめる「apps」ディレクトリーを、「src」直下に配置します。
その下に「app1」「app2」など、アプリごとのカスタマイズファイル用を配置するディレクトリーを作成しています。
以下のコマンドを実行するとアプリごとにカスタマイズファイルがbuildされます。

1
2
3
4

npm run build --mode development # 開発時

# リリース時は次のコマンドで圧縮なども実施される
# npm run build --mode production

buildが完了すると下図のようにdistディレクトリーにapp1.js, app2.jsなどのファイル名でJavaScriptが出力されます。

出力されたファイルをkintoneの各アプリに適用することでカスタマイズが実装できます。

src直下のcommonディレクトリーには、共通の関数や定数を設置できます。
全体で何かを使いたい場合は必要に応じて用意してください。

このシリーズでは JavaScript の便利な書き方にて紹介されているアロー関数などES6で動くコードを書いていきます。

顧客リストの郵便番号、TEL、メールの入力をチェックするというTipsのように、入力された値に対してバリデーションをあているというサンプルで考えてみます。
今回は電話番号のみバリデーションをかけてみましょう。

コードは次のようなイメージになると思います。

今回は電話番号のみのチェックですが、Tipsのように郵便番号や電話番号もバリデーションする場合はファイルの内容自体が長くなってしまいそうです。

そこで、importとexport文を使ってバリデーションのみ別ファイルにモジュールとして書き、利用できます。

「common/validations.js」内にvalidTel関数を用意し、exportする

app 側でimportして利用する

上記のようにexportすると別ファイルでimportができます。
詳しくは次のリファレンスを参考ください。

• mdn web docs： import 文
• mdn web docs： export 文

前述のように一度exportしたものは、別のファイルでも使い回せるので便利です。
今回のバリデーション関数のように、汎用的なものはどのファイルでも使えるよう、共通で利用できるようにしておくといいですね。

次のようにバリデーションの種類を増やしていくようなことも可能です。

「common/validations.js」に郵便番号のバリデーションを追加する

app 側で郵便番号のバリデーションを利用する

前述の自作関数の定義に加え、各アプリのアプリIDなどを定数としてまとめることができます。
今回は「src/common/app_ids.js」というファイルに各アプリのIDを定義し、app側から参照してみましょう。
サンプルでapp3をそのようにしています。

「app_ids.js」でアプリ ID を定義する

「app3.js」で定義したアプリ ID を呼び出す

JavaScriptのライブラリは npm で多数公開されており、実現したいことはすでにライブラリとして用意されている場合もあります。
今回はサンプルとしてjQueryを利用してみます。

これまでのカスタマイズでは、次のどちらかの方法でライブラリを利用していたと思います。

• jQuery.min.jsなどのファイルを手動でダウンロードしkintoneにアップロードする。
• Cybozu CDNなどCDNサービスで提供されるURLを設定する。

npmでライブラリをインストールする場合はその必要もなく、さきほどのようにimport文を使うことで利用できます。

npmとは

下記をコマンドラインに入力し実行します。

1

npm install jquery

実行完了後、「app1.js」にあるようにjQueryをimportして利用できます。

kintone JavaScriptカスタマイズをさらにレベルアップさせるため、手始めに今回は開発環境を用意しました。
これで、複数アプリをワンソースで扱えますし、npmで公開されている便利なライブラリや、自分で定義する関数や定数も使い回せるようになりました。

次回以降も、kintoneカスタマイズにおけるJavaScriptファイルのアップロードやファイルの管理などのハウツーをお伝えします。

このTipsは、2020年2月版kintoneで動作を確認しています。