ES6,Node.js,npm,sass,typescript,angular,react...フロントエンドはあまりにもめまぐるしく、JavaScriptカウボーイですら暴れ馬から振り落とされ気味です。この勉強会では、フロントエンド技術の良し悪しではなくとにかく便利なものは使ってみようという視点から、src/main/java, src/main/resources のようなソースコードツリーにフロントエンド技術を取り入れる足がかりについて、ハンズオン形式でお送りします。

1. サーバーサイドな人が
フロントエンド技術と仲良くする
はじめの一歩
Webエンジニア勉強会#03
at ニュー新橋コワーキング
2017-10-07

2. WHO ?
● わたなべ
● (株)ビズリーチ
● twitter: @nabedge
● github: nabedge
● http://www.slideshare.net/nabedg
e/presentations
2

3. まずアンケートにお答えください
● npmコマンドを日常的に使っている
● package.jsonを自作したことがある
● TypeScriptを書くことが普段よくある
● 私はフロントエンドエンジニアである
● 普段使っている開発言語 ?
3

4. JavaScript Cowboy
Babel
ES5
ES6
webpack
Node.js
npm
yarn
bower
gulp
4

5. 5

6. 知人からのお便り
6

7. それでも真正面から
立ち向かうと
こうなる。
7

8. 直近、ある事業をSPAからシンプルWebに
3ヶ月かけて戻した結果、ひとつの改善チケット
に必要なリソースが1/3〜1/4ほどに低下した。
また、フロントエンドとサーバーサイドのタスクの
割り振りも正常化し、財務視点から状況を見る
と、明らかに改善した。技術者としてそれがよ
かったのか、感情的な部分ではもちろん悩まし
いところはあるけれど（以下略）
https://www.facebook.com/shin.takeuchi/posts/1655952811104934
8

9. 本日の趣旨
● 生産性悪いから、学習コスト高いから、やめとく
○ 技術者が技術の進化に背を向けてどうする
● 便利なものは便利なんだから、うまく使うほうがおトク。
● 多少カッコ悪くても、入りやすい形からやってみてはどうだろ
う？
9

10. 作戦
1. 慣れた基本構成（Java + SpringMVC + Thymeleaf）で
普通にWebアプリケーション
2. node-sassでCSSフレームワークを
カスタムして見た目カッコよくドヤァ
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
10

11. はじめよう
11

12. 作戦
1. 慣れた基本構成（Java + SpringMVC + Thymeleaf）で
普通にWebアプリケーション
2. node-sassでCSSフレームワークをカスタムして
見た目カッコよくドヤ顔
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
12

13. 13

14. 14

15. コントローラクラスとそのテンプレートを一つ作る 15

16. 16

17. 17

18. 作戦
1. 慣れた基本構成（Java + SpringMVC + Thymeleaf）で
普通にWebアプリケーション
2. node-sassでCSSフレームワークをカスタムして
見た目カッコよくドヤ顔
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
18

19. curl -o-
https://raw.githubusercontent.com/creationix/nvm/v0.33.4/i
nstall.sh | bash
nvm install --lts=boron
node/npmコマンドのインストール 19

20. くわしくは
nodebrewでもいいけど
20

21. 今ドキのCSSフレームワークを適当に探す 21

22. PICNIC キミに決めた！ 22

23. 1. npm init
package.jsonが
自動生成される
2. npm install -D picnic
package.jsonに
picnicが書き込まれる
3. npm install -g node-sass
node-sassの準備
このCSSを直接
使うのではなく
ここを使ってcssを
ビルドする
23

24. package.jsonに細工する
{ // （途中省略）
"scripts": {
"sass": "node-sass src/main/scss/foo.scss
src/main/resources/static/dist/css/picnic-custom.css
--output-style compressed",
"build": "npm run sass"
},
"devDependencies": {
"picnic": "^6.4.0"
}
}
24

25. カスタマイズ用のsassファイルを作っておく 25

26. npmコマンドでcssを生成する
$ npm run build
> foo@1.0.0 sass /Users/nabedge/tmp/foo
> node-sass src/main/scss/foo.scss
src/main/resources/static/dist/css/picnic-custom.css
--output-style compressed
Rendering Complete, saving .css file...
Wrote CSS to
/Users/nabedge/tmp/foo/src/main/resources/static/dist/css/pic
nic-custom.css
26

27. できたcssをthymleafのテンプレートにセット 27

28. ビフォーアフター
マージン調整してないのはご愛嬌
28

29. ここまでのまとめ
1. React ? Angular ? Vue.js ? 悪くはないけど...
2. 慣れたサーバーサイドに少しだけ付け加えるところから
始めては？
3. まずはCSSの管理にsassやnpmを導入することも
立派なフロントエンド技術の導入。
4. 見た目から入ってドヤ顔。モチベーション的に大切。
29

30. 作戦
1. 慣れた基本構成（Java + SpringMVC + Thymeleaf）で
普通にWebアプリケーション
2. node-sassでCSSフレームワークをカスタムして
見た目カッコよくドヤ顔
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん
30

31. 31

32. TypeScript, WebPack, jQueryの導入準備
npm install -g webpack
npm install -D webpack typescript@2.5 ts-loader
npm install -D jquery@3.2.1 @types/jquery@3.2.5
32

33. tsconfig.json を作る 33

34. webpack.config.js を作る 34

35. “npm run build” だけでsassとTypeScriptコンパイルを同時に実行できるように 35

36. TypeScriptを書く
TypeScriptなのに未だに
jQueryなのぉ？
とかいうJSカウボーイの
マサカリは気にしない
36

37. 37

38. npm run build
38

39. 完成！ 39

40. 使ったコマンド、作ったファイル
curl -o- https://長いので割愛/nvm/v0.33.4/install.sh | bash
nvm install --lts=boron
npm init
npm install -D picnic
npm install -g node-sass
npm install -g webpack
npm install -D webpack typescript@2.5 ts-loader
npm install -D jquery@3.2.1 @types/jquery@3.2.5
npm run build
40

41. 使ったコマンド、作ったファイル
package.json
tsconfig.json
webpack.config.json
foo.scss
app.ts
SpringBoot(MVC)のコントローラクラス
Thymeleafのhtmlテンプレート
41

42. 「帰ったらやってみようかな」
という気持ちになってもらえたら
幸いです。
ありがとうございました。
42