Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Search
Yu Watanabe
July 25, 2017
Technology
0
43
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Yu Watanabe
July 25, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
JUnitテストをCI環境で並列で実行する方法とその速度, スケーラビリティ
nabedge
5
2.2k
クラウド時代だからSpring-Retryフレームワーク
nabedge
0
140
ツール比較しながら語るO/RマッパーとDBマイグレーション
nabedge
0
79
JavaでWebサービスを作り続けるための戦略と戦術
nabedge
0
49
Selenium再入門
nabedge
0
40
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
nabedge
0
42
テストゼロからイチに進むための戦略と戦術
nabedge
0
50
jOOQってなんて読むの?から始めるSpringBootとO/Rマッパーの世界
nabedge
0
83
あなたのプロジェクトが気軽にJavaをバージョンアップするために必要なこと
nabedge
0
35
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
190
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.2k
Share my, our lessons from the road to re:Invent
naospon
0
150
クラウド食堂とは?
hiyanger
0
120
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
250
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
260
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
120
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Invisible Side of Design
smashingmag
299
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
GitHub's CSS Performance
jonrohan
1030
460k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
サーバーサイドな人が フロントエンド技術と仲良くする はじめの一歩 Webエンジニア勉強会#03 at ニュー新橋コワーキング 2017-10-07
WHO ? • わたなべ • (株)ビズリーチ • twitter: @nabedge •
github: nabedge • http://www.slideshare.net/nabedg e/presentations 2
まずアンケートにお答えください • npmコマンドを日常的に使っている • package.jsonを自作したことがある • TypeScriptを書くことが普段よくある • 私はフロントエンドエンジニアである •
普段使っている開発言語 ? 3
JavaScript Cowboy Babel ES5 ES6 webpack Node.js npm yarn bower
gulp 4
5
知人からのお便り 6
それでも真正面から 立ち向かうと こうなる。 7
直近、ある事業をSPAからシンプルWebに 3ヶ月かけて戻した結果、ひとつの改善チケット に必要なリソースが1/3〜1/4ほどに低下した。 また、フロントエンドとサーバーサイドのタスクの 割り振りも正常化し、財務視点から状況を見る と、明らかに改善した。技術者としてそれがよ かったのか、感情的な部分ではもちろん悩まし いところはあるけれど(以下略) https://www.facebook.com/shin.takeuchi/posts/1655952811104934 8
本日の趣旨 • 生産性悪いから、学習コスト高いから、やめとく ◦ 技術者が技術の進化に背を向けてどうする • 便利なものは便利なんだから、うまく使うほうがおトク。 • 多少カッコ悪くても、入りやすい形からやってみてはどうだろ う?
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/i nstall.sh | bash nvm install --lts=boron node/npmコマンドのインストール
19
くわしくは nodebrewでもいいけど 20
今ドキのCSSフレームワークを適当に探す 21
PICNIC キミに決めた! 22
1. npm init package.jsonが 自動生成される 2. npm install -D picnic
package.jsonに picnicが書き込まれる 3. npm install -g node-sass node-sassの準備 このCSSを直接 使うのではなく ここを使ってcssを ビルドする 23
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
ここまでのまとめ 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 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
TypeScriptを書く TypeScriptなのに未だに jQueryなのぉ? とかいうJSカウボーイの マサカリは気にしない 36
37
npm run build 38
完成! 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