More Related Content
Similar to サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩 (20)
More from Y Watanabe (19)
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
- 2. WHO ?
● わたなべ
● (株)ビズリーチ
● twitter: @nabedge
● github: nabedge
● http://www.slideshare.net/nabedg
e/presentations
2
- 10. 作戦
1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
普通にWebアプリケーション
2. node-sassでCSSフレームワークを
カスタムして見た目カッコよくドヤァ
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
10
- 12. 作戦
1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
普通にWebアプリケーション
2. node-sassでCSSフレームワークをカスタムして
見た目カッコよくドヤ顔
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
12
- 18. 作戦
1. 慣れた基本構成(Java + SpringMVC + Thymeleaf)で
普通にWebアプリケーション
2. node-sassでCSSフレームワークをカスタムして
見た目カッコよくドヤ顔
3. TypeScriptを真面目に勉強できる状態に持ち込む
4. jQueryを混ぜてもええやん。
18
- 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
- 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
- 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