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
56
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
Yu Watanabe
July 25, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
JUnitテストをCI環境で並列で実行する方法とその速度, スケーラビリティ
nabedge
5
2.4k
クラウド時代だからSpring-Retryフレームワーク
nabedge
0
260
ツール比較しながら語るO/RマッパーとDBマイグレーション
nabedge
0
120
JavaでWebサービスを作り続けるための戦略と戦術
nabedge
0
65
Selenium再入門
nabedge
0
51
Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所
nabedge
0
55
テストゼロからイチに進むための戦略と戦術
nabedge
0
65
jOOQってなんて読むの?から始めるSpringBootとO/Rマッパーの世界
nabedge
0
100
あなたのプロジェクトが気軽にJavaをバージョンアップするために必要なこと
nabedge
0
44
Other Decks in Technology
See All in Technology
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
540
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
210
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
250
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why Our Code Smells
bkeepers
PRO
336
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Music & Morning Musume
bryan
46
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
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