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
58
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Yu Watanabe
July 25, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
JUnitテストをCI環境で並列で実行する方法とその速度, スケーラビリティ
nabedge
5
2.5k
クラウド時代だからSpring-Retryフレームワーク
nabedge
0
260
ツール比較しながら語るO/RマッパーとDBマイグレーション
nabedge
0
120
JavaでWebサービスを作り続けるための戦略と戦術
nabedge
0
66
Selenium再入門
nabedge
0
51
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
nabedge
0
58
テストゼロからイチに進むための戦略と戦術
nabedge
0
67
jOOQってなんて読むの?から始めるSpringBootとO/Rマッパーの世界
nabedge
0
110
あなたのプロジェクトが気軽にJavaをバージョンアップするために必要なこと
nabedge
0
45
Other Decks in Technology
See All in Technology
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
100
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.8k
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
220
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
280
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
330
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
780
人と生成AIの協調意思決定/Co‑decision making by people and generative AI
moriyuya
0
200
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
600
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Documentation Writing (for coders)
carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Scaling GitHub
holman
461
140k
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