webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~ – cybozu developer network

はじめに

kintoneのJavaScriptカスタマイズを開発しているときに、誰しも"IE11で動かない！"ことを体験したことがあると思います。

こういった特定のブラウザでプログラムが動作しない問題を解決するためにBabel, Polyfill, webpackというツールを利用するのがスタンダードな解決策になっています。

本記事ではこの3つのツールをkintoneカスタマイズで利用する方法を紹介します。

チュートリアルで扱うnode,npm,npxコマンドは https://nodejs.org/ でインストーラーをダウンロードしてnode.jsをインストールすると自動的にインストールされます。

インストール方法、node, npm, npx コマンドが何を意味しているかは本記事では取り扱いません。

BabelとPolyfillについて

JavaScriptには日々進化しており、ES5, ES6(ES2015), ES2016といったバージョンがあることはご存知でしょうか？

JavaScriptの進化には2つの側面があります。

1つはプログラミング言語の拡張、もう1つは標準ライブラリの拡張です。

しかし、各ブラウザ間でサポートされる機能が異なってしまいます。参考: ES6のブラウザ間の実装状況

プログラミング言語の拡張

たとえば ES6のJavaScriptではテンプレート文字列という文法を利用できます。

文字列の中で変数を展開できるだけでなく、文字列中に改行が含まれても大丈夫になります:

プログラムが簡潔にかけて気持ちいいですね！しかし、このテンプレート文字列はIE11では動作せず、JavaScriptを解釈する時点でエラーになってしまいます。

こういった問題を解決するのがBabelです。ES6のコードをES5で動作するようにコードを変換してくれます。

コード変換の様子はBabelの公式サイトで確認することができます。

標準ライブラリの拡張

文法の進化だけでなく、JavaScriptのビルトインオブジェクトライブラリも進化しています。

例えばES6にはObject.valuesという便利メソッドが追加されています。

ですがこれもIE11では未実装のため動作しません。こういったブラウザごとの実装・未実装を埋めてくれるのがPolyfillです。

Polyfillは未実装のメソッドを見つけると、Polyfillライブラリが読み込まれた時点で実装を追加してくれます。

そのため、IE11などの環境でもObject.valuesを利用できるようになります。

polyfill.ioというサービスがCDNとして公開されていますので、こちらを利用することもできます。

webpackについて

webpackはJavaScriptのビルドツールです。JavaScriptをブラウザで動かすために必要なライブラリをバンドルしたり、プログラミング言語の変換を行ってくれます。

webpackはES6で導入されたimport,exportを解釈して、必要なライブラリやモジュールをバンドルしてくれます。

本記事ではwebpackの中にBabelとPolyfillを組み込んで動作する例を解説します。

これで最低限のツールの知識は説明し終えたのでチュートリアルにトライしてみましょう。

チュートリアル

お題: ES6の文法を使ってkintoneカスタマイズの実装をしてみましょう

1. npmを使ってプロジェクトを初期化する

以後の作業はプロジェクト・ディレクトリで作業するものとします。

2. webpack,Babelなどのツールをインストールする

webpack ... webpackの本体
webpack-cli ... コマンドラインからwebpackを利用するためのツール
webpack-dev-server ... 開発中プログラムをローカルホスト上でホスティングしてくれる開発ツール
babel-loader ... Babelのwebpackプラグイン
@babel/core ... Babelの本体です
@babel/preset-env ... BabelのJavaScriptの変換ツール
core-js ... JavaScriptの標準ライブラリが定義されておりPolyfillを組み込んで利用することができる

3. webpack.config.jsを配置する

npm initしたのと同じディレクトリにwebpack.config.jsを配置します。

webpack.config.jsの設定項目:

entry:

JavaScriptのエントリーポイントを指定します。kintoneカスタマイズの場合、kintone.events.on メソッドが書いてあるプログラムになります。

entryにはオブジェクトを設定することが可能です。

サンプルプログラムだと、kintone-create-edit-showのエントリーポイントを作っています。

target:

ビルド後のファイルがどの環境に向けたファイルかを指定します。指定しない場合、デフォルトで ['web']が設定されています（参照：target）

ただし、webpack 5 でビルドした場合、IE に対応していない構文が出力されます。webpack 5 で IE に対応する場合には、['web', 'es5'] を指定します（上記サンプルのコメントを外してください）。

module:

JavaScriptの変換ルールを書きます。testの中で指定されている正規表現にマッチした場合に、Babelの変換プログラムが動作します。

今回の場合は、.js,mjsにマッチするファイルが読み込まれた場合、Babelによる自動変換の対象として設定しています。

output:

ビルドしたJavaScriptを出力するディレクトリを設定します。pathは出力先のディレクトリ、filenameはファイル名です。

pathがわかりにくいですが、package.jsonが配置されているのと同じディレクトリにdistというディレクトリが作られて、その下にビルドしたJavaScriptが配置されることになります。

filenameの[name]ですが、entryで指定したキー名をファイル名として文字列を自動的に設定してくれます。

externals:

kintoneのJSカスタマイズではアップロードできるファイルの大きさに制限があります。

一方で、webpackは利用しているライブラリを一つのファイルにまとめます。このため、webpackでビルドしたファイルは大きくなりやすい特徴があるため注意が必要です。

jQueryなどグローバル変数を定義するタイプのライブラリなどをexternalsに設定しておくと、webpackはjQueryがソースコードでimportされていても無視してくれます。

kintoneでカスタマイズする上で最低限知っておくと良さそうな設定項目を紹介しました。もっと複雑なこともできますが、webpackのドキュメントを参照してください

4. ES6を使ってJSカスタマイズを書いてみよう！

サンプルプログラムではES6で導入された文法やライブラリを使った簡単なプログラムを書いています。

作業フォルダ内に「src」フォルダを用意し、「kintone-create-edit-show.js」というファイル名で保存してください。
※webpack.config.js の entryポイントと合わせます。

5. ビルドしてみよう！

次のコマンドを実行するとwebpackがJavaScriptをビルドしてくれます

--mode developmentとproductionが指定可能です。開発中はdevelopmentを指定します

ビルドが完了するとdistディレクトリにkintone-create-edit-show.jsが作成されているので、アップロードして動作確認してみましょう。

※ webpack-dev-serverというツールもあります。これは別記事で解説させていただきます。

6. アップロードしてみよう

ビルドしたプログラムをkintoneにアップロードしてみましょう。

kintone-create-edit-show.jsをアップロードします。jQuery（今回は https://js.cybozu.com/jquery/3.4.1/jquery.min.js）を別途カスタマイズに登録するのを忘れないようにしてください。

IEでも動作を確認すると動作するのがわかると思います。

Chromeブラウザのコンソールでwebpackでビルドしたプログラムを確認してみましょう。

テンプレート文字列が変換されているのを確認できると思います。

7. import、exportを体験してみよう

全角半角を変換するオープンソースライブラリをnpm installでインストールしてimport,exportを使って実装してみます。

全角半角を変換する実装を作成、exportしてみます。（src/hankaku.js）

kintone.events.onを書くファイルでimportします。（src/kintone-create-edit-submit.js）

webpack.config.jsを修正する必要があります。サンプルコードのリポジトリ(後述)にあるので割愛します。

再度ビルドすると2つのファイルが作成されます。

新規レコード、レコード修正画面を開いたときのファイル
追加・更新時のイベント処理用ファイル

全角を半角に変換するメソッドは利用しているライブラリと一緒にイベント処理用のファイルの中にバンドルされています。

チュートリアルは以上です。お疲れ様でした。

サンプルコード: https://github.com/cybozudevnet/sample-kintone-webpack-for-beginner/tree/master

注意点: Proxyだけには注意しましょう

Babelの制限事項として次のようなものがあります。Babelの公式サイトから引用です

Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled. See support in various JavaScript engines.

ES5から使えるProxyだけは制限事項になっています。このためIE11ではProxyを利用していると原因でエラーになってしまいます。
webpackを使うことでオープンソースのライブラリを使いやすくなりますが、ライブラリを利用する際は、サポートブラウザは念のために一度確認してから使うようにしましょう。

おまけ:最近はこんな書き方ができるようになってます！

モダンなJavaScriptからお気に入り機能を紹介して終わりたいと思います。

const, let

ブロックスコープ内でconstで宣言された変数は書き換えるとエラーになります
ブロックスコープ内でletで宣言された変数は書き換えることができます

ブロックスコープを外れるとその変数は参照することができなくなります。

テンプレート文字列

改行や変数の埋め込みをしやすい文法が使えるようになっています。

import, export

モジュール機能を実現するために導入された文法です。JavaScriptでモジュール機能が使えるようになります。

グローバルにメソッド定義するのを避けつつモジュール機能を利用することができるようになります

kintoneカスタマイズの場合はwebpackを使ってビルドするようにしましょう。

分割代入

配列もしくはオブジェクトのプロパティの一部の値を簡単に取り出せるようになりました。

オブジェクト初期化子

今まではオブジェクトのキー名を必ず渡す必要がありましたが、変数をそのままオブジェクトのリテラルの中にわたすと、そのままオブジェクトのプロパティとして適用してくれます。

アロー関数

関数を簡潔に書けるようになりました。

おわりに

お疲れ様でした。

webpack,Babel,Polyfillを活用してJavaScript開発の面倒なところを避けつつ、快適なJavaScriptライフをお過ごしください！

このチュートリアルでは毎回ビルドしていますが更新されたJavaScriptを検知して自動的に再ビルドしてくれる仕組みもあります。
開発中はこちらを使うとJavaScript更新の手間が省けます。
こちらの記事も執筆予定です。次回作にご期待下さい！

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