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

Transcript

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
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
15. コントローラクラスとそのテンプレートを一つ作る 15
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
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
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