Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webpackを使ったワンランク上の
モダンJSカスタマイズ
クローバ株式会社
門屋 亮
Download me
goo.gl/
門屋 亮
クローバ株式会社設立
代表取締役
2007年 サイボウズ株式会社入社
2015年 クローバ株式会社創業
「つながる」ホームページ
このセッションで必要なもの
サービスアカウント
kintone環境(システム管理権限が必要)
パソコン
Node.js 4.3以上がインストールされていること
Windowsの場合は下記サイトからWindowsインストーラーでインストール
...
kintoneのJSカスタマイズある
ある
アップロードするファイルが
めっちゃある
共通ライブラリ作ろうとして
グローバル変数を汚染しまくる
複数のカスタマイズで
jQueryのバージョンがかぶる
kintone本体で使っている
Reactは使えない
カスタマイズで使う画像を置く場所がな
い
全部 kintone のせい?
webpackを使わないせいです
webpackを使うと
グローバル変数を汚染せず複数のファイルに分
割できる
→複数人で開発できる
新しいJavaScriptの機能が使える
Node.jsのライブラリが使える
→Reactも使える
ライブラリ含めてひとつのファイルにバ...
それ以外にも
CSSがバンドルできる
→Sassも使える!
画像をバンドルできたりもする
→画像を置く場所がない問題を解決!
コードの難読化ができる
Linterも使える
webpackを使うデメリット
ビルドする必要がある
→更新を監視して自動ビルドできます。
ファイルサイズが大きくなる
→kintoneは5MBまでアップロードできる
→必要に応じて分割もできる
どのみちkintoneにアップロードする必要...
セッションの内容
Webpackのインストール&ビルド
モジュールのimport/export
ファイルのkintoneへのアップロード
ES2015(ES6)の基礎
CSSをバンドルしてみよう
おまけ 画像をバンドルしてみよう
さっそくやってみましょう
webpackのインストール
mkdir webpack-kintone && cd webpack-kintone
npm init –y
npm install --save-dev webpack
./node_modules/.bin/...
課題1
webpackでビルドして
kintoneにアップロードしてみよう
とりあえず実行してみましょう
./node_modules/.bin/webpack
No configuration file found and no output filename
configured via CLI option.A ...
examplesフォルダにあるファイルを
まるっとコピーする
webpack-kintone
deploy/
ex1/
ex2/
ex3/
ex4/
node_modules/
package.json
webpack.config_ex1.j...
webpack.config_ex1.jsをwebpack.config.jsにリ
ネームして実行
./node_modules/.bin/webpack
Hash: 760be52e84b2e339ce01
Version: webpack ...
kintoneにアプリを作ります
ファイルをアップロードします
動きましたか?
手でアップロードするのが
めんどうくさい?
アップロードスクリプトを用意しました
npm install fs-extra request --save-dev
node deploy/deploy.js
deploy.jsの設定は適宜変更してください
コードを味わう
# コンパイルされたファイルも見てみましょう
const handlers = {
recordIndexShowHandler: (e) => {
alert(`レコードは${e.records.length}件です!`);
...
import/export
複数のファイルからなるライブラリの依存関
係を解決するしくみ
 グローバル変数を汚染しない
 use strict は不要(自動的にStrict Mode
になる)
ブラウザで動くコードです
代表的なES2015の機能
# アロー関数
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| は person オブジェクトを適切に参照します。...
代表的なES2015の機能
# let/const
function letTest() {
let x = 31;
if (true) {
let x = 71; // 異なる変数
console.log(x); // 71
}
consol...
代表的なES2015の機能
# テンプレート文字列
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} andnnot ${2 * a + b}.`);
// "Fifteen is ...
??
Babel
https://babeljs.io/learn-es2015/
webpack.config
14-22行目を有効に
./node_modules/.bin/webpack
ERROR in multi ./src/main.jsModule not found: Error: Can't resolve ...
課題2
外部ライブラリをimportしてみよう
Moment.jsを使って、アプリの一覧画面の
「期限」フィールドをカスタマイズしてください
やること
• Moment.jsのfromNow()関数を使って、〜日前、〜時間後というような
表示にする。
• 関数内のループをアロー関数に修正する...
解答
const handlers = {
recordIndexShowHandler: (e) => {
var elements = kintone.app.getFieldElements('LimitDay');
e.records....
課題3
CSSをバンドルしてみよう
スタイルシートを使って、対応状況が「未対応」のレコードに
色をつけてください
やること
• CSSを修正して、対応状況が「未対応」のレコードの背景を赤にする。
• style-loader, css-loader ライブラリをインストールする。...
解答
.status-new {
background-color: #ff0000;
}
npm install style-loader css-loader --save-dev
時間があまった人向け
課題4
画像をバンドルしてみよう!
Upcoming SlideShare
Loading in …5
×

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

3,825 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 画像をバンドルしてみよう!

×