Successfully reported this slideshow.
Your SlideShare is downloading. ×

webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 43 Ad

webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏 (20)

Advertisement

More from kintone papers (20)

Recently uploaded (20)

Advertisement

webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏

  1. 1. Webpackを使ったワンランク上の モダンJSカスタマイズ クローバ株式会社 門屋 亮
  2. 2. Download me goo.gl/
  3. 3. 門屋 亮 クローバ株式会社設立 代表取締役 2007年 サイボウズ株式会社入社 2015年 クローバ株式会社創業 「つながる」ホームページ
  4. 4. このセッションで必要なもの サービスアカウント kintone環境(システム管理権限が必要) パソコン Node.js 4.3以上がインストールされていること Windowsの場合は下記サイトからWindowsインストーラーでインストール してください。 https://nodejs.org/en/ Macの方はHomebrew等でインストールしてください。 Chromeブラウザ テキストエディタ
  5. 5. kintoneのJSカスタマイズある ある
  6. 6. アップロードするファイルが めっちゃある
  7. 7. 共通ライブラリ作ろうとして グローバル変数を汚染しまくる
  8. 8. 複数のカスタマイズで jQueryのバージョンがかぶる
  9. 9. kintone本体で使っている Reactは使えない
  10. 10. カスタマイズで使う画像を置く場所がな い
  11. 11. 全部 kintone のせい?
  12. 12. webpackを使わないせいです
  13. 13. webpackを使うと グローバル変数を汚染せず複数のファイルに分 割できる →複数人で開発できる 新しいJavaScriptの機能が使える Node.jsのライブラリが使える →Reactも使える ライブラリ含めてひとつのファイルにバンドルでき る
  14. 14. それ以外にも CSSがバンドルできる →Sassも使える! 画像をバンドルできたりもする →画像を置く場所がない問題を解決! コードの難読化ができる Linterも使える
  15. 15. webpackを使うデメリット ビルドする必要がある →更新を監視して自動ビルドできます。 ファイルサイズが大きくなる →kintoneは5MBまでアップロードできる →必要に応じて分割もできる どのみちkintoneにアップロードする必要があるので手間は 同じ アップローダーに組み込みましょう!
  16. 16. セッションの内容 Webpackのインストール&ビルド モジュールのimport/export ファイルのkintoneへのアップロード ES2015(ES6)の基礎 CSSをバンドルしてみよう おまけ 画像をバンドルしてみよう
  17. 17. さっそくやってみましょう
  18. 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. 19. 課題1 webpackでビルドして kintoneにアップロードしてみよう
  20. 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. 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. 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. 23. kintoneにアプリを作ります
  24. 24. ファイルをアップロードします
  25. 25. 動きましたか?
  26. 26. 手でアップロードするのが めんどうくさい?
  27. 27. アップロードスクリプトを用意しました npm install fs-extra request --save-dev node deploy/deploy.js deploy.jsの設定は適宜変更してください
  28. 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. 29. import/export 複数のファイルからなるライブラリの依存関 係を解決するしくみ  グローバル変数を汚染しない  use strict は不要(自動的にStrict Mode になる)
  30. 30. ブラウザで動くコードです
  31. 31. 代表的なES2015の機能 # アロー関数 function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| は person オブジェクトを適切に参照します。 }, 1000); } var p = new Person(); アロー関数内部のthisは関数定義時に決定 (レキシカルなthis)
  32. 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. 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. 34. ??
  35. 35. Babel https://babeljs.io/learn-es2015/
  36. 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. 37. 課題2 外部ライブラリをimportしてみよう
  38. 38. Moment.jsを使って、アプリの一覧画面の 「期限」フィールドをカスタマイズしてください やること • Moment.jsのfromNow()関数を使って、〜日前、〜時間後というような 表示にする。 • 関数内のループをアロー関数に修正する。 • jquery, moment ライブラリをインストールする。 手順 1. webpack.config_ex2.jsをコピーする 2. ex2/js/handler.js を編集する 3. npmライブラリをインストールする 4. ビルドしてkintoneにアップロードする
  39. 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. 40. 課題3 CSSをバンドルしてみよう
  41. 41. スタイルシートを使って、対応状況が「未対応」のレコードに 色をつけてください やること • CSSを修正して、対応状況が「未対応」のレコードの背景を赤にする。 • style-loader, css-loader ライブラリをインストールする。 手順 1. webpack.config_ex3.jsをコピーする 2. ex3/css/main.css を編集する 3. npmライブラリをインストールする 4. ビルドしてkintoneにアップロードする
  42. 42. 解答 .status-new { background-color: #ff0000; } npm install style-loader css-loader --save-dev
  43. 43. 時間があまった人向け 課題4 画像をバンドルしてみよう!

×