kintone devCamp 2017 E-5セッション資料。 「webpackを使ったワンランク上のモダンJSカスタマイズ 　～kintoneのJSカスタマイズでReactが使える！ ES6が使える！ CSSや画像も1ファイルでバンドルできる！ いい事ずくめのいまどきな開発手法が90分で学べます。～」

1. Webpackを使ったワンランク上の
モダンJSカスタマイズ
クローバ株式会社
門屋 亮

2. Download me
goo.gl/

3. 門屋 亮
クローバ株式会社設立
代表取締役
2007年 サイボウズ株式会社入社
2015年 クローバ株式会社創業
「つながる」ホームページ

4. このセッションで必要なもの
サービスアカウント
kintone環境（システム管理権限が必要）
パソコン
Node.js 4.3以上がインストールされていること
Windowsの場合は下記サイトからWindowsインストーラーでインストール
してください。
https://nodejs.org/en/
Macの方はHomebrew等でインストールしてください。
Chromeブラウザ
テキストエディタ

5. kintoneのJSカスタマイズある
ある

6. アップロードするファイルが
めっちゃある

7. 共通ライブラリ作ろうとして
グローバル変数を汚染しまくる

8. 複数のカスタマイズで
jQueryのバージョンがかぶる

9. kintone本体で使っている
Reactは使えない

10. カスタマイズで使う画像を置く場所がな
い

11. 全部 kintone のせい？

12. webpackを使わないせいです

13. webpackを使うと
グローバル変数を汚染せず複数のファイルに分
割できる
→複数人で開発できる
新しいJavaScriptの機能が使える
Node.jsのライブラリが使える
→Reactも使える
ライブラリ含めてひとつのファイルにバンドルでき
る

14. それ以外にも
CSSがバンドルできる
→Sassも使える！
画像をバンドルできたりもする
→画像を置く場所がない問題を解決！
コードの難読化ができる
Linterも使える

15. webpackを使うデメリット
ビルドする必要がある
→更新を監視して自動ビルドできます。
ファイルサイズが大きくなる
→kintoneは5MBまでアップロードできる
→必要に応じて分割もできる
どのみちkintoneにアップロードする必要があるので手間は
同じ
アップローダーに組み込みましょう！

16. セッションの内容
Webpackのインストール＆ビルド
モジュールのimport/export
ファイルのkintoneへのアップロード
ES2015(ES6)の基礎
CSSをバンドルしてみよう
おまけ 画像をバンドルしてみよう

17. さっそくやってみましょう

18. webpackのインストール
mkdir webpack-kintone && cd webpack-kintone
npm init –y
npm install --save-dev webpack
./node_modules/.bin/webpack --help
# Mac/Linuxユーザー向け
.node_modules.binwebpack --help
# Windowsユーザー向け

19. 課題１
webpackでビルドして
kintoneにアップロードしてみよう

20. とりあえず実行してみましょう
./node_modules/.bin/webpack
No configuration file found and no output filename
configured via CLI option.A configuration file could be
named 'webpack.config.js' in the current directory.Use --
help to display the CLI options.
webpack.config.jsというファイルが必要
らしい

21. examplesフォルダにあるファイルを
まるっとコピーする
webpack-kintone
deploy/
ex1/
ex2/
ex3/
ex4/
node_modules/
package.json
webpack.config_ex1.js
webpack.config_ex2.js
webpack.config_ex3.js
webpack.config_ex4.js

22. webpack.config_ex1.jsをwebpack.config.jsにリ
ネームして実行
./node_modules/.bin/webpack
Hash: 760be52e84b2e339ce01
Version: webpack 3.0.0
Time: 64ms
Asset Size Chunks Chunk Names
bundle.js 3.23 kB 0 [emitted] main
[0] multi ./ex1/js/main.js 28 bytes {0} [built]
[1] ./ex1/js/main.js 133 bytes {0} [built]
[2] ./ex1/js/handlers.js 130 bytes {0} [built]
今度は成功しましたね！

23. kintoneにアプリを作ります

24. ファイルをアップロードします

25. 動きましたか？

26. 手でアップロードするのが
めんどうくさい？

27. アップロードスクリプトを用意しました
npm install fs-extra request --save-dev
node deploy/deploy.js
deploy.jsの設定は適宜変更してください

28. コードを味わう
# コンパイルされたファイルも見てみましょう
const handlers = {
recordIndexShowHandler: (e) => {
alert(`レコードは${e.records.length}件です！`);
}
};
module.exports = handlers;
handler.js
import handlers from './handlers.js';
kintone.events.on("app.record.index.show", (e) => {
handlers.recordIndexShowHandler(e);
});
main.js

29. import/export
複数のファイルからなるライブラリの依存関
係を解決するしくみ
 グローバル変数を汚染しない
 use strict は不要（自動的にStrict Mode
になる）

30. ブラウザで動くコードです

31. 代表的なES2015の機能
# アロー関数
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| は person オブジェクトを適切に参照します。
}, 1000);
}
var p = new Person();
アロー関数内部のthisは関数定義時に決定
（レキシカルなthis）

32. 代表的なES2015の機能
# let/const
function letTest() {
let x = 31;
if (true) {
let x = 71; // 異なる変数
console.log(x); // 71
}
console.log(x); // 31
}
// MY_FAV 定数を定義して、7 を値にする
const MY_FAV = 7;
// エラーになる
MY_FAV = 20;

33. 代表的なES2015の機能
# テンプレート文字列
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} andnnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

34. ？？

35. Babel
https://babeljs.io/learn-es2015/

36. webpack.config
14-22行目を有効に
./node_modules/.bin/webpack
ERROR in multi ./src/main.jsModule not found: Error: Can't resolve 'babel-
loader' in '/Users/ryo/sample' @ multi ./src/main.js
npm install babel-core babel-loader babel-preset-es2015 --save-dev
必要なライブラリもインストールしましょう

37. 課題２
外部ライブラリをimportしてみよう

38. Moment.jsを使って、アプリの一覧画面の
「期限」フィールドをカスタマイズしてください
やること
• Moment.jsのfromNow()関数を使って、〜日前、〜時間後というような
表示にする。
• 関数内のループをアロー関数に修正する。
• jquery, moment ライブラリをインストールする。
手順
1. webpack.config_ex2.jsをコピーする
2. ex2/js/handler.js を編集する
3. npmライブラリをインストールする
4. ビルドしてkintoneにアップロードする

39. 解答
const handlers = {
recordIndexShowHandler: (e) => {
var elements = kintone.app.getFieldElements('LimitDay');
e.records.forEach((record, i) => {
var date = record['LimitDay'].value;
$('span', elements[i]).text(moment(date).fromNow());
});
}
};
npm install jquery moment --save-dev

40. 課題３
CSSをバンドルしてみよう

41. スタイルシートを使って、対応状況が「未対応」のレコードに
色をつけてください
やること
• CSSを修正して、対応状況が「未対応」のレコードの背景を赤にする。
• style-loader, css-loader ライブラリをインストールする。
手順
1. webpack.config_ex3.jsをコピーする
2. ex3/css/main.css を編集する
3. npmライブラリをインストールする
4. ビルドしてkintoneにアップロードする

42. 解答
.status-new {
background-color: #ff0000;
}
npm install style-loader css-loader --save-dev

43. 時間があまった人向け
課題４
画像をバンドルしてみよう！