サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩Webエンジニア勉強会#03at ニュー新橋コワーキング2017-10-07
View Slide
WHO ?● わたなべ● (株)ビズリーチ● twitter: @nabedge● github: nabedge● http://www.slideshare.net/nabedge/presentations2
まずアンケートにお答えください● npmコマンドを日常的に使っている● package.jsonを自作したことがある● TypeScriptを書くことが普段よくある● 私はフロントエンドエンジニアである● 普段使っている開発言語 ?3
JavaScript CowboyBabelES5ES6webpackNode.jsnpmyarnbowergulp4
5
知人からのお便り6
それでも真正面から立ち向かうとこうなる。7
直近、ある事業をSPAからシンプルWebに3ヶ月かけて戻した結果、ひとつの改善チケットに必要なリソースが1/3〜1/4ほどに低下した。また、フロントエンドとサーバーサイドのタスクの割り振りも正常化し、財務視点から状況を見ると、明らかに改善した。技術者としてそれがよかったのか、感情的な部分ではもちろん悩ましいところはあるけれど（以下略）https://www.facebook.com/shin.takeuchi/posts/16559528111049348
本日の趣旨● 生産性悪いから、学習コスト高いから、やめとく○ 技術者が技術の進化に背を向けてどうする● 便利なものは便利なんだから、うまく使うほうがおトク。● 多少カッコ悪くても、入りやすい形からやってみてはどうだろう？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
curl -o-https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bashnvm install --lts=boronnode/npmコマンドのインストール 19
くわしくはnodebrewでもいいけど20
今ドキのCSSフレームワークを適当に探す 21
PICNIC キミに決めた！ 22
1. npm initpackage.jsonが自動生成される2. npm install -D picnicpackage.jsonにpicnicが書き込まれる3. npm install -g node-sassnode-sassの準備このCSSを直接使うのではなくここを使ってcssをビルドする23
package.jsonに細工する{ // （途中省略）"scripts": {"sass": "node-sass src/main/scss/foo.scsssrc/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.scsssrc/main/resources/static/dist/css/picnic-custom.css--output-style compressedRendering Complete, saving .css file...Wrote CSS to/Users/nabedge/tmp/foo/src/main/resources/static/dist/css/picnic-custom.css26
できたcssをthymleafのテンプレートにセット 27
ビフォーアフターマージン調整してないのはご愛嬌28
ここまでのまとめ1. React ? Angular ? Vue.js ? 悪くはないけど...2. 慣れたサーバーサイドに少しだけ付け加えるところから始めては？3. まずはCSSの管理にsassやnpmを導入することも立派なフロントエンド技術の導入。4. 見た目から入ってドヤ顔。モチベーション的に大切。29
作戦1. 慣れた基本構成（Java + SpringMVC + Thymeleaf）で普通にWebアプリケーション2. node-sassでCSSフレームワークをカスタムして見た目カッコよくドヤ顔3. TypeScriptを真面目に勉強できる状態に持ち込む4. jQueryを混ぜてもええやん30
31
TypeScript, WebPack, jQueryの導入準備npm install -g webpacknpm install -D webpack [email protected] ts-loadernpm install -D [email protected] @types/[email protected]32
tsconfig.json を作る 33
webpack.config.js を作る 34
“npm run build” だけでsassとTypeScriptコンパイルを同時に実行できるように 35
TypeScriptを書くTypeScriptなのに未だにjQueryなのぉ？とかいうJSカウボーイのマサカリは気にしない36
37
npm run build38
完成！ 39
使ったコマンド、作ったファイルcurl -o- https://長いので割愛/nvm/v0.33.4/install.sh | bashnvm install --lts=boronnpm initnpm install -D picnicnpm install -g node-sassnpm install -g webpacknpm install -D webpack [email protected] ts-loadernpm install -D [email protected] @types/[email protected]npm run build40
使ったコマンド、作ったファイルpackage.jsontsconfig.jsonwebpack.config.jsonfoo.scssapp.tsSpringBoot(MVC)のコントローラクラスThymeleafのhtmlテンプレート41
「帰ったらやってみようかな」という気持ちになってもらえたら幸いです。ありがとうございました。42
nabedge
pkshadeck
yuya4
sekido
dahatake
fujiwara3
miyakemito
mraible
nttcom
shunsukeono_am
wakamatsu_takumu
hanaseleb
el_stoffel
csswizardry
destraynor
scottboms
sonatard
chriscoyier
eileencodes
bryan
tmm1
garrettdimon
jeffersonlam
stephaniewalter
chrislema