Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS
Mitsuki Ogasahara
August 25, 2021
Technology
5
630
Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS
Mitsuki Ogasahara
August 25, 2021
Tweet
Share
More Decks by Mitsuki Ogasahara
See All by Mitsuki Ogasahara
今から始める型安全 Python / Start Python Type Hints
yamitzky
12
4.2k
技術が好きで好きで好きでたまらないエンジニアが「取締役」になって思う、マネジメントキャリアパス / My Manager's Path
yamitzky
2
500
Python 3.9 時代の型安全な Pythonの極め方 / Mastering Type Safety in Python 3.9 Era
yamitzky
33
20k
なぜサーバーレスとDockerなのか 〜 インフラ運用を最小化するサービス開発 〜 / Why We Choose Serverless AND Docker
yamitzky
0
3k
サーバーレスを活用して少数精鋭で開発するニュースアプリ #devsumi
yamitzky
4
2.3k
ここが辛いよサーバーレス だが私は乗り越えた #builderscon
yamitzky
14
7.1k
会社の開発合宿で Electron-vueで Slackクライアント作ってみた
yamitzky
0
2.1k
GitLabのSlack連携を魔改造して作る開発を楽しくする仕組み
yamitzky
1
1.9k
Dockerfileを素早く書くtips&ライブデモ
yamitzky
2
1.7k
Other Decks in Technology
See All in Technology
ドキュメントの翻訳に必要なこと
mayukosawai
0
160
Agile and Requirement : アジャイルな要件定義について考える
kawaguti
PRO
6
2.1k
JAWS-UG 朝会 #33 登壇資料
takakuni
0
400
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
11
7k
Learning from AWS Customer Security Incidents [2022]
ramimac
0
880
Oracle Cloud Infrastructure:2022年5月度サービス・アップデート
oracle4engineer
PRO
0
110
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
210
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
2
310
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
3.2k
⚡Lightdashを試してみた
k_data_analyst
0
210
220521_SFN_品質文化試論と『LEADING QUALITY』/220521_SFN_Essay_of_Quality_Culture_and_LEADING_QUALITY
mkwrd
0
220
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
3
470
Featured
See All Featured
BBQ
matthewcrist
74
7.9k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Building an army of robots
kneath
299
40k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Gamification - CAS2011
davidbonilla
75
3.9k
KATA
mclloyd
7
8.6k
Infographics Made Easy
chrislema
233
17k
Docker and Python
trallard
27
1.5k
A Tale of Four Properties
chriscoyier
149
20k
Transcript
6UJMJUZ fi STUͳ$44JO+4 ʙ5BJMXJOE$44ͱ$IBLSB6*Λఴ͑ͯʙ +91SFTT5FDI5BML
ࣗݾհ w খּݪΈ͖ͭ!ZBNJU[LZ w औక$%0 w ೝఆεΫϥϜϚελʔ w ͖ͳͷ w
1ZUIPOɺ3FBDUɺΨύΦ
ࣗݾհ झຯͰαʔόʔϨεͳ$.4Λ։ൃ ˞$IBLSB6*Λར༻
ࣗݾհ ˞͍ͣΕDTTJOKTΛར༻͠ɺεϐʔσΟʔʹ։ൃ +9ͷ3FBDUϓϩδΣΫτ
ຊͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4 ͷັྗΛଟ͘ͷਓʹͬͯ΄͍͠ʂ
ຊͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4
3FBDUʷελΠϧγʔτ 3FBDUͷΞϓϦέʔγϣϯɺ Ͳ͏ͬͯελΠϧద༻͢Δ͔ʁ
ύλʔϯ1: ී௨ͷ CSS Λॻ͘ 3FBDU $44
ૉͷ CSS ͷ DMBTT໊άϩʔόϧͳఆٛ ˠ໊લিಥͷةݥੑ هࣄͷUJUMF ϥϯΩϯάͷUJUMF ʺ ͔ͤͬ͘ίϯϙʔωϯτࢤͰΘ͚ͯʜ
༨ஊɿBEM ͳͲͷΞϓϩʔν άϩʔόϧͳ໊લۭؒʹ໋໊نଇΛ࣋ͪࠐΉ BSUJDMF@@UJUMF SBOLJOH@@UJUMF ʺ
ύλʔϯCSS Modules $44 3FBDU DTTΛίϯϙʔωϯτ͝ͱʹ3FBDU͔ΒJNQPSU
CSS Modulesͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- DMBTT໊ࣗಈͰϋογϡԽ͞Εɺিಥ͠ͳ͍ <div> <div class="css-16qf5wg">هࣄͷλΠτϧ</div> </div>
ɾྑ͘ѱ͘$44 ɾελΠϧఆٛDMBTT໊͕ܕ҆શͰͳ͍ ɾ+454ͷมΛຒΊࠐΊͳ͍ $443FBDU5ZQF4DSJQUͰͳ͍ʂ CSS Modules ํࣜͷ ˞ճආࡦҰ෦͋Δ ˠ$44Λ+454্Ͱఆ͍ٛͨ͠
ύλʔϯ3: CSS-in-JS • 1ϑΝΠϧͰఆٛՄೳ • styled.λά໊Ͱఆٛ • มຒΊࠐΈՄೳ // Article.tsx
import styled from '@emotion/styled' import theme from '...' const Title = styled.div({ fontWeight: 'bold', fontSize: 14, color: theme.colors.primary, }) export const Article: React.FC = () => ( <div> <Title>هࣄͷλΠτϧ</Title> {/* ... */} </div> )
$44JO+4ͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- $44.PEVMFTಉ༷ɺDMBTT໊ࣗಈͰϋογϡԽ มຒΊࠐ·ΕΔ <style> .css-16qf5wg { font-weight: bold;
font-size: 14px; color: #123456; } </style> <div> <div class="css-16qf5wg">هࣄͷλΠτϧ</div> </div>
̍ɽάϩʔόϧͳ$44Λॻ͘ ̎ɽ$44.PEVMFTͰJNQPSU͢Δ ̏ɽ$44JO+4 3FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏ ̏ͭհ ͜͜·Ͱͷ·ͱΊ
ຊͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4
CSS ͋Δ͋Δ )5.- $44 <div class="title-wrapper"> <div class="title">هࣄͷλΠτϧ</div> <div class="timestamp">12:23</div>
</div> .title { font-weight: bold; font-size: 14px; } .title-wrapper { display: flex; } ͪΐͬͱσβΠϯௐ͢ΔͨΊͷXSBQQFSരʂ
CSS ͷ ̍ɽDMBTT໊͕άϩʔόϧมͰিಥ͍͢͠ DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔ ˠDMBTT໊ม໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ
Tailwind CSS ʹΑΔελΠϦϯά ࣗલͰͷDMBTT໊ఆٛɺ$44ͳͲॻ͔ͣελΠϦϯά ˞ެࣜαΠτΑΓ
ຊͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4
Utility ͱ… $44Λॻ͔ͣʹελΠϧ͕ద༻Ͱ͖Δɺ $44ΑΓศརͳDMBTT໊ϓϩύςΟ .md:flex .text-gray-500 1$αΠζͷͱ͖ͷΈ fl FY Ϩεϙϯγϒ
จࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ .shadow-md ΄Ͳ΄ͲαΠζͷӨ
ຊͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4
Utility- fi rst ͳϝϦοτ ɾDMBTT໊Λ͍͍ͪͪఆٛ͠ͳͯ͘ྑ͍ ɾϨεϙϯγϒ͕؆୯ʹ࣮ݱͰ͖Δ $44JO+4ͷϝϦοτ ɾ5ZQF4DSJQUͷΈʹΔͷͰܕ҆શͰɺิ͕ޮ͘ ɾมͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ Utility-
fi rst ͳ CSS-in-JS ͷϝϦοτ ʮ྆ํʯͷϝϦοτ͕ڗडͰ͖Δʂ ʴ
Chakra UI ͷྫ // Article.tsx import { Box } from
'@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) • ελΠϧΛίϯϙʔωϯτͷpropͰఆٛՄೳ • prop໊৭໊ͳͲܕ҆શͰิ͕ޮ͘ • ৭αΠζͷςʔϚΛద༻Մೳ • Ϩεϙϯγϒ؆୯ʹఆٛ ※ ʹ props Λશ෦͢ͱɺࣗલίϯϙʔωϯτ Utility ͑ͯΦεεϝ
ิ 6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ fi STUDTTJOKT ˒L ˒L ˒L // Article.tsx
import { x } from ‘@styled/emotion' export const Article = (props) => ( <x.div {...props}> <x.div fontWeight=“bold" fontSize={{ _: 'md', md: 'lg' }} color=“gray-100" > هࣄͷλΠτϧ </x.div> </x.div> ) // Article.tsx import { Box } from '@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) *&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆 *&ඇରԠ❌ 6UJMJUZͷΈ 6*ϥΠϒϥϦ 6UJMJUZ 6*ϥΠϒϥϦ 6UJMJUZ // Article.tsx import { Box } from '@material-ui/core' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={{ xs: 'md', md: 'lg' }} color="text.primary" > هࣄͷλΠτϧ </Box> </Box> )
༨ஊɿଞͷએݴత UI ϑϨʔϜϫʔΫ @override Widget build(BuildContext context) { return Center(
child: Text( 'Click me!', style: TextStyle( fontSize: 60.0, fontWeight: FontWeight.bold, ), ), ); } 6UJMJUZ fi STUͳ$44JO+4ͱಉ͡Α͏ͳॻ͖ํ
·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS
ͷϝϦοτ ɾ5ZQF4DSJQUͷΈʹΔͷͰܕ҆શͰɺิ͕ޮ͘ ɾมͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ ɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒγϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ