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
4.9k
モダンな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
160
Implement prerendering w/ puppeteer
sottar
1
200
create own CMS from scratch
sottar
2
8.8k
Let’s try to hack AST of JavaScript
sottar
1
1.6k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.4k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
Other Decks in Programming
See All in Programming
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
小さな開発会社を作った理由
polidog
0
1.9k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
CSC307 Lecture 09
javiergs
PRO
1
500
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 06
javiergs
PRO
0
360
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Activities at Cairo Library
cairolibrary720
0
1.2k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Writing Fast Ruby
sferik
623
60k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Web Components: a chance to create the future
zenorocha
307
41k
The Language of Interfaces
destraynor
151
23k
Typedesign – Prime Four
hannesfritz
37
2.2k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Raft: Consensus for Rubyists
vanstee
134
6.5k
4 Signs Your Business is Dying
shpigford
178
21k
Visualization
eitanlees
139
14k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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/