Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sota ohara
January 24, 2018
Programming
9
4.8k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
[email protected]
https://wajs.connpass.com/event/76238/
sota ohara
January 24, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Implement prerendering w/ puppeteer
sottar
1
130
create own CMS from scratch
sottar
2
8.3k
Let’s try to hack AST of JavaScript
sottar
1
1.3k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
17k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.3k
new version of context in React 16.3
sottar
3
1.2k
2ヶ月半でサービスをリリースした話し
sottar
2
1.9k
Redux のディレクトリ構成を考える
sottar
2
13k
Other Decks in Programming
See All in Programming
How to Fight Production Incidents?
asatarin
0
180
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
310
Cloudflare Workersと状態管理
chimame
3
480
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
220
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.3k
Form実装基本を学び直してみた
hyugatsukui
0
240
Listかもしれない
irof
1
220
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
400
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
420
Quarto Tips for Academic Presentation
nicetak
0
910
%q is for Quine
koic
0
400
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
220
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
89
4.2k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Debugging Ruby Performance
tmm1
67
11k
Designing with Data
zakiwarfel
91
4.2k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
What the flash - Photography Introduction
edds
64
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
GitHub's CSS Performance
jonrohan
1020
430k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Code Review Best Practice
trishagee
50
11k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Transcript
ϞμϯͳJavaScriptΞϓϦέʔγϣϯͰ ϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
վΊɻɻ
React ͰϞμϯʹελΠϦϯά͢Δํ๏ גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ େݪᆴଠ
େݪ ᆴଠ / sottar גࣜձࣾϝϧΧϦ ϑϩϯτΤϯυΤϯδχΞ mercari NOW, CSTool sottar_
About me sottar
React Ͱ CSSɺͲ͏ͬͯॻ͍ͯ·͔͢ʁ
ελΠϦϯά͢ΔࡍʹٻΊΔͷ
ελΠϦϯά͢ΔࡍʹٻΊΔͷ - component ͝ͱʹείʔϓΛΓ͍ͨ - ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Γ͍ͨ - CSS ͱ JS
ͰΛڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ͍͍ͨ - ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕ు͔Εͳ͍
ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘
ʢBEMͳͲͰʣ
ελΠϦϯάͷํ๏ - CSS Modules - CSS in JS - ී௨ʹCSSΛॻ͘
ʢBEMͳͲͰʣ
CSS in JS (template literal)
CSS in JS ͱ https://github.com/styled-components/styled-components
https://github.com/MicheleBertoli/css-in-js
https://github.com/MicheleBertoli/css-in-js
styled-components
styled-components
ελΠϦϯάʹٻΊΔͷ - component ͝ͱʹείʔϓΛΓ͍ͨ - ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Γ͍ͨ - CSS ͱ JS
ͰΛڞ༗͍ͨ͠ - ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ - ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ - stylelint ͍͍ͨ - ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕ు͔Εͳ͍
component ͝ͱʹείʔϓΛΓ͍ͨ
component ͝ͱʹείʔϓΛΓ͍ͨ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ ʢ = ؾܰʹελΠϧΛফ͍ͨ͠ʣ
ͦͷελΠϧ͕Ͳ͜ͰΘΕ͍ͯΔ͔Θ͔Γ͍ͨ
CSS ͱ JS ͰΛڞ༗͍ͨ͠
CSS ͱ JS ͰΛڞ༗͍ͨ͠
ΤσΟλͷγϯλοΫεϋΠϥΠτิػೳ͕͍͍ͨ
γϯλοΫεϋΠϥΠτิػೳ
ඪ४ͷCSSͱಉ͡γϯλοΫεͰॻ͖͍ͨ
ඪ४ͷCSSͱγϯλοΫε͕ဃͯ͠΄͘͠ͳ͍
stylelint ŧƂŧ
stylelint ŧƂŧ
ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕Ͱͳ͍
ಛఆͷπʔϧΛΘͳͯ͘ JS ͷΤϥʔ͕Ͱͳ͍ - CSS Modules ͷωοΫ - Webpack ͳͲͰઃఆΛॻ͔ͳ͍ͱ
JS ͷΤϥʔ͕ు͔Ε ͯ͠·͏͕ɺwebpack ʹґଘͨ͘͠ͳ͍ɻ
ͳͥ styled-components ͔
ͳͥ styled-components ͔ - template literal Λ༻͍͍ͯΔͳ͔ͰҰ൪ star ͕ଟ͘ɺ ։ൃ׆ൃʹߦΘΕ͍ͯΔ
- React ͔Β͍͍͢Α͏ʹ࡞ΒΕ͍ͯΔ - ಠཱͨ͠ελΠϧ༻ͷίϯϙʔωϯτΛ࡞͍ͬͯ͘ͱ͍͏ํ๏ - React ͷίϯϙʔωϯτઃܭʹ߹ΘͤͯελΠϧܧঝͰ͖Δ - ReactNative ʹରԠ͍ͯ͠Δ
Ͱɻɻɻ
Ͱɻɻɻ ͬͱॏཁͳͷ ʮ͖Ε͍ͳίϯϙʔωϯτઃܭʯ͕Ͱ͖Δ͔ɻ → Ͳ͏͢Ε៉ྷͳίϯϙʔωϯτׂ͕Ͱ͖Δͷ͔ɺ ʑΜͰ͓Γ·͢
https://www.mercari.com/jp/jobs/