目指せ！JavaScriptカスタマイズ中級者（１） 〜webpack編〜

はじめに

このシリーズではJavaScript開発に慣れてきた初級者のために、中級者になるためのステップアップ術を紹介します。

今回は第1弾として、webpack を kintone カスタマイズに導入してみましょう。

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

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

シリーズの記事一覧はこちら。

webpack を導入するメリット

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

1. JSのファイルを分割できる
   開発の規模が大きくなるにつれ JS ファイルも大きくなりますが、webpack を使うことでファイルを分割することができます。
2. 自作の関数を使い回せる
   webpack を使うことで別ファイルに定義した関数を使い回すことができるようになります。
3. アプリIDをどこかにまとめて定義したい 
   関数だけでなく、定数も同様にまとめて定義して別ファイルから読み込むことができるため、複数アプリの設計情報を１つのファイルで定義することが可能になります。
4. npm で公開されているライブラリを使用できる
   ライブラリ使用時は、ライブラリの JavaScript ファイルをダウンロードし、個別で kintone アプリに適用する必要がありますが、webpack を使用すれば個別の適用は不要になります。
5. asyncやawaitなど便利な新しい記述を利用できる
   ES6 以降の新しい記述で JavaScript を書いても Internet Explorer 11でも動作するバージョンにトランスパイル（変換）してくれます。

使用するエディタ

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

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

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

詳細は下記のページなどを参照ください。
https://www.atmarkit.co.jp/ait/articles/1507/10/news028.html

複数アプリのカスタマイズを扱う（環境整備編）

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

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

sample-kintone-webpack-for-intermediate

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

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

ディレクトリ構成

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

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

$ npm run build

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

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

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

複数アプリのカスタマイズを扱う（実践編）

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

1. JS ファイルを分割する

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

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

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

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

• common/validations.js内にvalidTel関数を用意し、exportする
  
• app側でimportして利用
  

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

import文 / export文

2. 自作関数を使いまわす

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

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

• common/validations.jsに郵便番号のバリデーションを追加
  
• app側で郵便番号のバリデーションも追加する
  

3. アプリID など、kintoneアプリの設計情報をまとめて定義する 

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

• app_ids.js
  
• app3.js
  

4. npm で公開されているライブラリを使用する

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

いつもならばjquery.min.jsなどのファイルを手動でダウンロードしkintoneにアップロードするか、Cybozu CDNなどCDNサービスで提供されるURLを設定する必要がありますが、
npmでライブラリをインストールする場合はその必要もなく、先程のようにimport文を使うことで利用できるようになります。

npmとは

jQueryのインストール

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

npm install jquery

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

5. asyncやawaitなど便利な新しい記述を利用できる

$ npm run build で作成された dist 配下の JavaScript ファイルは、ES6 以降の新しい記述でも Internet Explorer 11で動作するバージョンにトランスパイル（変換）されたファイルです。

別記事 JavaScriptの便利な書き方 に、モダンなJavaScript記述方法などをのせてますので参考にしてください。

おわりに

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

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

シリーズの記事一覧はこちら。

このTipsは、2020年2月版 kintoneで確認したものになります。