カテゴリー内の他の記事

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

Index

はじめに

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

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

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

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

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

webpack を導入するメリット

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

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

使用するエディタ

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

vs-code_hero.jpg

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 を御覧ください。

ディレクトリ構成

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

devnet-webpack-Page-1__3_.png

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

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

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

Image_1.png

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

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

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

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

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

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

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

index_js___sample-kintone-webpack.png

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

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

  • common/validations.js内にvalidTel関数を用意し、exportする
    validations_js___sample-kintone-webpack.png
  • app側でimportして利用
    index_js___sample-kintone-webpack-1.png

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

import文 / export文

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

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

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

  • common/validations.jsに郵便番号のバリデーションを追加
    validations_js___sample-kintone-webpack-1.png
  • app側で郵便番号のバリデーションも追加する
    index_js___sample-kintone-webpack-2.png

 

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

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

  • app_ids.js
    app_ids_js___sample-kintone-webpack.png
  • app3.js
    index_js___sample-kintone-webpack-3.png

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

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

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

npmとは

jQueryのインストール

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

npm install jquery

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

index_js___sample-kintone-webpack-4.png

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

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

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

おわりに

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

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

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

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
r3_yamauchi

実践的な記事をありがとうございます。

「1. JS ファイルを分割する」の直後に表示されている画面キャプチャ app3/index.js https://developer.cybozu.io/hc/article_attachments/360050595392/index_js___sample-kintone-webpack-3.png は
「3. アプリID など、kintoneアプリの設計情報をまとめて定義する」の 2つ目の画面キャプチャ https://developer.cybozu.io/hc/article_attachments/360050706931/index_js___sample-kintone-webpack.png と
入れ替わってしまっているように思います。確認をお願いします。

 

Avatar
cybozu Development team

r3_yamauchi 様

ご指摘ありがとうございます。
ご指摘頂いた通り、app3/index.jsはindex_js___sample-kintone-webpack.pngと入れ替わってしまいました 。

ご迷惑をおかけし申し訳ありません。
ドキュメントの方修正させていただきました。

Avatar
kume@AISIC

手順に則って npm run build をやってみたのですが、下記の様なエラーが出力され上手く処理が進みません。
ご助言いただけませんでしょうか??
試行錯誤してみたのですが、中々上手く行きませんでした…。

ちなみに、WARNING部分に関しては、
package.json 内の
"build": "webpack",

"build": "webpack --mode production",
等にすると良いという事にはたどり着きました。

-------------------------------
当方の環境
win10
「lesson1」フォルダ内にgithubより取得したzipを解凍したファイル群をそのまま配置
Visual Studio Code内のターミナルでpowershellを使ってコマンドを実行
node v14.16.0
npm 6.14.11
webpack 4.44.2
-------------------------------
PS C:\xxxxx\devnet_lesson\lesson1> npm run build

> sample-kintone-webpack@1.0.0 build C:\xxxxx\devnet_lesson\lesson1
> webpack

Hash: ad83dbc6a51d3785db3c
Version: webpack 4.44.2
Time: 2993ms
Built at: 2021/03/03 23:08:20
1 asset
Entrypoint quote_ts = quote_ts.js
[0] ./src/apps/quote_ts/index.ts 371 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/apps/quote_ts/index.ts 4:5
Module parse failed: Unexpected token (4:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // 製品アプリの型を定義
> type SavedProduct = {
| $id: KintoneRecordField.ID;
| $revision: KintoneRecordField.Revision;
npm ERR! code ELIFECYCLE
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! sample-kintone-webpack@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sample-kintone-webpack@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jkume\AppData\Roaming\npm-cache\_logs\2021-03-03T14_08_20_660Z-debug.log
PS C:\xxxxx\devnet_lesson\lesson1>

 

kume@AISICにより編集されました
Avatar
kume@AISIC

連投失礼します。

webpack.config.jsの

const entries = glob.sync('**/index.ts', {cwd: basePath}).reduce(

const entries = glob.sync('**/index.js', {cwd: basePath}).reduce(

に変更することで、手順通りになりました!

ts ではなく js になっていると、初級者でも迷わないかと思いますので、webpack.config.js の修正をご検討いただけるとありがたいです。

Avatar
cybozu Development team

kume@AISIC 様

お世話になっております。cybozu developer network 運営でございます。

ご指摘ありがとうございます。
JavaScriptファイルでもTypeScriptファイルでも両方問題ないようにwebpack.config.jsの設定を変更いたしました。

Avatar
kume@AISIC

ありがとうございます!

js、tsのファイル生成、無事にできました!

サインインしてコメントを残してください。