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
150
ツール比較しながら語るO/RマッパーとDBマイグレーション
nabedge
0
80
JavaでWebサービスを作り続けるための戦略と戦術
nabedge
0
50
Selenium再入門
nabedge
0
41
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
nabedge
0
42
テストゼロからイチに進むための戦略と戦術
nabedge
0
51
jOOQってなんて読むの?から始めるSpringBootとO/Rマッパーの世界
nabedge
0
84
あなたのプロジェクトが気軽にJavaをバージョンアップするために必要なこと
nabedge
0
35
Other Decks in Technology
See All in Technology
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
3
1k
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
300
MIMEと文字コードの闇
hirachan
2
1.5k
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
困難を「一般解」で解く
fujiwara3
7
1.7k
AIエージェント入門
minorun365
PRO
33
19k
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
250
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Music & Morning Musume
bryan
46
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
How GitHub (no longer) Works
holman
314
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Adopting Sorbet at Scale
ufuk
75
9.2k
Being A Developer After 40
akosma
89
590k
RailsConf 2023
tenderlove
29
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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 > 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
できた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 typescript@2.5 ts-loader npm install -D jquery@3.2.1 @types/jquery@3.2.5 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 typescript@2.5 ts-loader npm install -D jquery@3.2.1 @types/jquery@3.2.5 npm run build 40
使ったコマンド、作ったファイル package.json tsconfig.json webpack.config.json foo.scss app.ts SpringBoot(MVC)のコントローラクラス Thymeleafのhtmlテンプレート 41
「帰ったらやってみようかな」 という気持ちになってもらえたら 幸いです。 ありがとうございました。 42