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
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
Search
sota ohara
January 24, 2018
Programming
9
5k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
WeAreJavaScripters@15th
https://wajs.connpass.com/event/76238/
sota ohara
January 24, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
270
Implement prerendering w/ puppeteer
sottar
1
290
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.6k
new version of context in React 16.3
sottar
3
1.7k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
Redux のディレクトリ構成を考える
sottar
2
15k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Software Architecture
hschwentner
6
2.3k
Developer Joy - The New Paradigm
hollycummins
1
370
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
480
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
CSC305 Lecture 10
javiergs
PRO
0
250
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
Cursorハンズオン実践!
eltociear
2
1.2k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Visualization
eitanlees
149
16k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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/