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
17
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Yu Watanabe
July 25, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
JUnitテストをCI環境で並列で実行する方法とその速度, スケーラビリティ
nabedge
4
1.5k
クラウド時代だからSpring-Retryフレームワーク
nabedge
0
24
ツール比較しながら語るO/RマッパーとDBマイグレーション
nabedge
0
32
JavaでWebサービスを作り続けるための戦略と戦術
nabedge
0
17
Selenium再入門
nabedge
0
15
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
nabedge
0
16
テストゼロからイチに進むための戦略と戦術
nabedge
0
14
jOOQってなんて読むの?から始めるSpringBootとO/Rマッパーの世界
nabedge
0
21
あなたのプロジェクトが気軽にJavaをバージョンアップするために必要なこと
nabedge
0
9
Other Decks in Technology
See All in Technology
M5と自作基板をくっつけてみた〜M5 Japan Tour 2024 Spring 福冈 (Fukuoka|福岡)〜
keropiyo
1
260
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
810
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
2
120
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
9
2.4k
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
0
220
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
500
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
140
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.3k
Observabilityジャーニーを実現するためのAWSサービス:CloudWatch編
o11yfes2023
0
120
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
110
Shinagile 2024
kawaguti
PRO
1
110
M5stackで使用できるpHセンサの開発
shinrinakamura
1
300
Featured
See All Featured
Building Your Own Lightsaber
phodgson
100
5.7k
GitHub's CSS Performance
jonrohan
1025
450k
Ruby is Unlike a Banana
tanoku
96
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Statistics for Hackers
jakevdp
790
220k
Become a Pro
speakerdeck
PRO
13
4.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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