Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS

Slide 1

Slide 1 text

6UJMJUZ fi STUͳ$44JO+4 ʙ5BJMXJOE$44ͱ$IBLSB6*Λఴ͑ͯʙ +91SFTT5FDI5BML

Slide 2

Slide 2 text

ࣗݾ঺հ w খּݪΈ͖ͭ!ZBNJU[LZ w औక໾$%0 w ೝఆεΫϥϜϚελʔ w ޷͖ͳ΋ͷ w 1ZUIPOɺ3FBDUɺΨύΦ

Slide 3

Slide 3 text

ࣗݾ঺հ झຯͰαʔόʔϨεͳ$.4Λ։ൃ ˞$IBLSB6*Λར༻

Slide 4

Slide 4 text

ࣗݾ঺հ ˞͍ͣΕ΋DTTJOKTΛར༻͠ɺεϐʔσΟʔʹ։ൃ +9ͷ3FBDU੡ϓϩδΣΫτ

Slide 5

Slide 5 text

ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4 ͷັྗΛଟ͘ͷਓʹ஌ͬͯ΄͍͠ʂ

Slide 6

Slide 6 text

ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

Slide 7

Slide 7 text

3FBDUʷελΠϧγʔτ 3FBDUͷΞϓϦέʔγϣϯɺ Ͳ͏΍ͬͯελΠϧద༻͢Δ͔ʁ

Slide 8

Slide 8 text

ύλʔϯ1: ී௨ͷ CSS Λॻ͘ 3FBDU $44

Slide 9

Slide 9 text

ૉͷ CSS ͷ໰୊఺ DMBTT໊͸άϩʔόϧͳఆٛ   ˠ໊લিಥͷةݥੑ هࣄͷUJUMF ϥϯΩϯάͷUJUMF ʺ ͔ͤͬ͘ίϯϙʔωϯτࢤ޲ͰΘ͚ͯ΋ʜ

Slide 10

Slide 10 text

༨ஊɿBEM ͳͲͷΞϓϩʔν άϩʔόϧͳ໊લۭؒʹ໋໊نଇΛ࣋ͪࠐΉ BSUJDMF@@UJUMF SBOLJOH@@UJUMF ʺ

Slide 11

Slide 11 text

ύλʔϯCSS Modules $44 3FBDU DTTΛίϯϙʔωϯτ͝ͱʹ3FBDU͔ΒJNQPSU

Slide 12

Slide 12 text

CSS Modulesͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- DMBTT໊͸ࣗಈͰϋογϡԽ͞Εɺিಥ͠ͳ͍

هࣄͷλΠτϧ

Slide 13

Slide 13 text

ɾྑ͘΋ѱ͘΋$44 ɾελΠϧఆٛ΍DMBTT໊͕ܕ҆શͰͳ͍ ɾ+454ͷม਺ΛຒΊࠐΊͳ͍ $44͸3FBDU5ZQF4DSJQUͰ͸ͳ͍ʂ CSS Modules ํࣜͷ໰୊఺ ˞ճආࡦ͸Ұ෦͋Δ ˠ$44Λ+454্Ͱఆ͍ٛͨ͠

Slide 14

Slide 14 text

ύλʔϯ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 = () => (

هࣄͷλΠτϧ {/* ... */}

)

Slide 15

Slide 15 text

$44JO+4ͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- $44.PEVMFTಉ༷ɺDMBTT໊͸ࣗಈͰϋογϡԽ ม਺౳΋ຒΊࠐ·ΕΔ .css-16qf5wg { font-weight: bold; font-size: 14px; color: #123456; }

هࣄͷλΠτϧ

Slide 16

Slide 16 text

̍ɽάϩʔόϧͳ$44Λॻ͘ ̎ɽ$44.PEVMFTͰJNQPSU͢Δ ̏ɽ$44JO+4 3FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏   ̏ͭ঺հ ͜͜·Ͱͷ·ͱΊ

Slide 17

Slide 17 text

ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

Slide 18

Slide 18 text

CSS ͋Δ͋Δ )5.- $44

هࣄͷλΠτϧ

12:23

.title { font-weight: bold; font-size: 14px; } .title-wrapper { display: flex; } ͪΐͬͱσβΠϯௐ੔͢ΔͨΊͷXSBQQFSര஀ʂ

Slide 19

Slide 19 text

CSS ͷ໰୊ ̍ɽDMBTT໊͕άϩʔόϧม਺Ͱিಥ͠΍͍͢ DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔ ˠDMBTT໊ม਺໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ

Slide 20

Slide 20 text

Tailwind CSS ʹΑΔελΠϦϯά ࣗલͰͷDMBTT໊ఆٛɺ$44ͳͲॻ͔ͣελΠϦϯά ˞ެࣜαΠτΑΓ

Slide 21

Slide 21 text

ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

Slide 22

Slide 22 text

Utility ͱ͸… $44Λॻ͔ͣʹελΠϧ͕ద༻Ͱ͖Δɺ $44ΑΓ΋ศརͳDMBTT໊΍ϓϩύςΟ .md:flex .text-gray-500 1$αΠζͷͱ͖ͷΈ fl FY Ϩεϙϯγϒ จࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ .shadow-md ΄Ͳ΄ͲαΠζͷӨ

Slide 23

Slide 23 text

ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

Slide 24

Slide 24 text

Utility- fi rst ͳϝϦοτ ɾDMBTT໊Λ͍͍ͪͪఆٛ͠ͳͯ͘ྑ͍ ɾϨεϙϯγϒ͕؆୯ʹ࣮ݱͰ͖Δ $44JO+4ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ Utility- fi rst ͳ CSS-in-JS ͷϝϦοτ ʮ྆ํʯͷϝϦοτ͕ڗडͰ͖Δʂ ʴ

Slide 25

Slide 25 text

Chakra UI ͷྫ // Article.tsx import { Box } from '@chakra-ui/react' export const Article = (props) => ( هࣄͷλΠτϧ ) • ελΠϧΛίϯϙʔωϯτͷpropͰఆٛՄೳ • prop໊΍৭໊ͳͲ͸ܕ҆શͰิ׬͕ޮ͘ • ৭΍αΠζͷςʔϚΛద༻Մೳ • Ϩεϙϯγϒ΋؆୯ʹఆٛ ※ ਌ʹ props Λશ෦౉͢ͱɺࣗલίϯϙʔωϯτ΋ Utility ࢖͑ͯΦεεϝ

Slide 26

Slide 26 text

ิ଍ 6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ fi STUDTTJOKT ˒L ˒L ˒L // Article.tsx import { x } from ‘@styled/emotion' export const Article = (props) => ( هࣄͷλΠτϧ ) // Article.tsx import { Box } from '@chakra-ui/react' export const Article = (props) => ( هࣄͷλΠτϧ ) *&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆 *&ඇରԠ❌ 6UJMJUZͷΈ 6*ϥΠϒϥϦ6UJMJUZ 6*ϥΠϒϥϦ6UJMJUZ // Article.tsx import { Box } from '@material-ui/core' export const Article = (props) => ( هࣄͷλΠτϧ )

Slide 27

Slide 27 text

༨ஊɿଞͷએݴత 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ͱಉ͡Α͏ͳॻ͖ํ

Slide 28

Slide 28 text

·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ ɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒ΋γϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ