目指せ!JavaScript カスタマイズ中級者(1)〜webpack 編〜

目次

はじめに

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

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

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

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

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

webpack を導入するメリット

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

使用するエディタ

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

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

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

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

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

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

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

sample-kintone-webpack-for-intermediate

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate (External link)

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 で動くコードで書いていきます。

JS ファイルを分割する

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

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

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

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

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

app 側で import して利用する

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

自作関数を使いまわす

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

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

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

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

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

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

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

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

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

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

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

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

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

npmとは (External link)

jQueryのインストール

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

1
npm install jquery

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

おわりに

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

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

information

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