webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
?Download as PPTX, PDF?
1 like?6,091 views
kintone devCamp 2017 E-5セッション資料。 「webpackを使ったワンランク上のモダンJSカスタマイズ ～kintoneのJSカスタマイズでReactが使える！ ES6が使える！ CSSや画像も1ファイルでバンドルできる！ いい事ずくめのいまどきな開発手法が90分で学べます。～」
![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]
今度は成功しましたね！](https://image.slidesharecdn.com/webpack-kintone-170714014923/85/webpack-JS-_-22-320.jpg)
![解答
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](https://image.slidesharecdn.com/webpack-kintone-170714014923/85/webpack-JS-_-39-320.jpg)
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
- 3. 門屋 亮 クローバ株式会社設立 代表取締役 2007年 サイボウズ株式会社入社 2015年 クローバ株式会社創業 「つながる」ホームページ
- 11. 全部 kintone のせい？
- 12. 飞别产辫补肠办を使わないせいです
- 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ユーザー向け
- 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というファイルが必要 らしい
- 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. 办颈苍迟辞苍别にアプリを作ります
- 24. ファイルをアップロードします
- 25. 动きましたか？
- 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. ？？
- 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 必要なライブラリもインストールしましょう
- 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
- 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