サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩

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

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

• http://www.slideshare.net/nabedge/presentations

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

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

5

6 知人からのお便り

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

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

• https://www.facebook.com/shin.takeuchi/posts/1655952811104934

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

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

11 はじめよう

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

13

14

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

16

17

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

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

• https://raw.githubusercontent.com/creationix/nvm/v0.33.4/i

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

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

PICNIC キミに決めた！ 22

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

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

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

npmコマンドでcssを生成する $ npm run build > [email protected] 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

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

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

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

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

31

TypeScript, WebPack, jQueryの導入準備 npm install -g webpack npm install -D webpack [email protected] ts-loader npm install -D [email protected] @types/[email protected] 32

tsconfig.json を作る 33

webpack.config.js を作る 34

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

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

37

38 npm run build

完成！ 39

使ったコマンド、作ったファイル 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 [email protected] ts-loader npm install -D [email protected] @types/[email protected] npm run build 40

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

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