6UJMJUZfiSTUͳ$44JO+4ʙ5BJMXJOE$44ͱ$IBLSB6*Λఴ͑ͯʙ+91SFTT5FDI5BML
View Slide
ࣗݾհw খּݪΈ͖ͭ!ZBNJU[LZw औక$%0w ೝఆεΫϥϜϚελʔw ͖ͳͷw 1ZUIPOɺ3FBDUɺΨύΦ
ࣗݾհझຯͰαʔόʔϨεͳ$.4Λ։ൃ˞$IBLSB6*Λར༻
ࣗݾհ˞͍ͣΕDTTJOKTΛར༻͠ɺεϐʔσΟʔʹ։ൃ+9ͷ3FBDUϓϩδΣΫτ
ຊͷςʔϚ6UJMJUZfiSTUͳ$44JO+4ͷັྗΛଟ͘ͷਓʹͬͯ΄͍͠ʂ
ຊͷςʔϚ6UJMJUZfiSTUͳ$44JO+4
3FBDUʷελΠϧγʔτ3FBDUͷΞϓϦέʔγϣϯɺͲ͏ͬͯελΠϧద༻͢Δ͔ʁ
ύλʔϯ1: ී௨ͷ CSS Λॻ͘3FBDU $44
ૉͷ CSS ͷDMBTT໊άϩʔόϧͳఆٛ ˠ໊લিಥͷةݥੑهࣄͷUJUMF ϥϯΩϯάͷUJUMFʺ͔ͤͬ͘ίϯϙʔωϯτࢤͰΘ͚ͯʜ
༨ஊɿBEM ͳͲͷΞϓϩʔνάϩʔόϧͳ໊લۭؒʹ໋໊نଇΛ࣋ͪࠐΉ[email protected]@UJUMF [email protected]@UJUMFʺ
ύλʔϯCSS Modules$44 3FBDUDTTΛίϯϙʔωϯτ͝ͱʹ3FBDU͔ΒJNQPSU
CSS Modulesͷग़ྗ݁ՌͷΠϝʔδ$44 )5.-DMBTT໊ࣗಈͰϋογϡԽ͞Εɺিಥ͠ͳ͍هࣄͷλΠτϧ
ɾྑ͘ѱ͘$44ɾελΠϧఆٛDMBTT໊͕ܕ҆શͰͳ͍ɾ+454ͷมΛຒΊࠐΊͳ͍$443FBDU5ZQF4DSJQUͰͳ͍ʂCSS Modules ํࣜͷ˞ճආࡦҰ෦͋Δˠ$44Λ+454্Ͱఆ͍ٛͨ͠
ύλʔϯ3: CSS-in-JS• 1ϑΝΠϧͰఆٛՄೳ• styled.λά໊Ͱఆٛ• มຒΊࠐΈՄೳ// Article.tsximport styled from '@emotion/styled'import theme from '...'const Title = styled.div({fontWeight: 'bold',fontSize: 14,color: theme.colors.primary,})export const Article: React.FC = () => (هࣄͷλΠτϧ{/* ... */})
$44JO+4ͷग़ྗ݁ՌͷΠϝʔδ$44 )5.-$44.PEVMFTಉ༷ɺDMBTT໊ࣗಈͰϋογϡԽมຒΊࠐ·ΕΔ<br/><br/><br/>.css-16qf5wg {<br/><br/><br/>font-weight: bold;<br/><br/><br/>font-size: 14px;<br/><br/><br/>color: #123456;<br/><br/><br/>}<br/><br/><br/>هࣄͷλΠτϧ
̍ɽάϩʔόϧͳ$44Λॻ̎͘ɽ$44.PEVMFTͰJNQPSU͢Δ̏ɽ$44JO+43FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏ ̏ͭհ͜͜·Ͱͷ·ͱΊ
CSS ͋Δ͋Δ)5.- $44هࣄͷλΠτϧ12:23.title {font-weight: bold;font-size: 14px;}.title-wrapper {display: flex;}ͪΐͬͱσβΠϯௐ͢ΔͨΊͷXSBQQFSരʂ
CSS ͷ̍ɽDMBTT໊͕άϩʔόϧมͰিಥ͍͢͠DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔˠDMBTT໊ม໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ
Tailwind CSS ʹΑΔελΠϦϯάࣗલͰͷDMBTT໊ఆٛɺ$44ͳͲॻ͔ͣελΠϦϯά˞ެࣜαΠτΑΓ
Utility ͱ…$44Λॻ͔ͣʹελΠϧ͕ద༻Ͱ͖Δɺ$44ΑΓศརͳDMBTT໊ϓϩύςΟ.md:flex.text-gray-5001$αΠζͷͱ͖ͷΈflFY Ϩεϙϯγϒจࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ.shadow-md΄Ͳ΄ͲαΠζͷӨ
Utility-first ͳϝϦοτɾDMBTT໊Λ͍͍ͪͪఆٛ͠ͳͯ͘ྑ͍ɾϨεϙϯγϒ͕؆୯ʹ࣮ݱͰ͖Δ$44JO+4ͷϝϦοτɾ5ZQF4DSJQUͷΈʹΔͷͰܕ҆શͰɺิ͕ޮ͘ɾมͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔUtility-first ͳ CSS-in-JS ͷϝϦοτʮ྆ํʯͷϝϦοτ͕ڗडͰ͖Δʂʴ
Chakra UI ͷྫ// Article.tsximport { Box } from '@chakra-ui/react'export const Article = (props) => (fontWeight="bold"fontSize={['md', 'lg']}color="gray.300">هࣄͷλΠτϧ)• ελΠϧΛίϯϙʔωϯτͷpropͰఆٛՄೳ• prop໊৭໊ͳͲܕ҆શͰิ͕ޮ͘• ৭αΠζͷςʔϚΛద༻Մೳ• Ϩεϙϯγϒ؆୯ʹఆٛ※ ʹ props Λશ෦͢ͱɺࣗલίϯϙʔωϯτ Utility ͑ͯΦεεϝ
ิ6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦIUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZfiSTUDTTJOKT˒L ˒L˒L// Article.tsximport { x } from ‘@styled/emotion'export const Article = (props) => (fontWeight=“bold"fontSize={{ _: 'md', md: 'lg' }}color=“gray-100">هࣄͷλΠτϧ)// Article.tsximport { Box } from '@chakra-ui/react'export const Article = (props) => (fontWeight="bold"fontSize={['md', 'lg']}color="gray.300">هࣄͷλΠτϧ)*&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆*&ඇରԠ❌6UJMJUZͷΈ 6*ϥΠϒϥϦ6UJMJUZ 6*ϥΠϒϥϦ6UJMJUZ// Article.tsximport { Box } from '@material-ui/core'export const Article = (props) => (fontWeight="bold"fontSize={{ xs: 'md', md: 'lg' }}color="text.primary">هࣄͷλΠτϧ)
༨ஊɿଞͷએݴత UI ϑϨʔϜϫʔΫ@overrideWidget build(BuildContext context) {return Center(child: Text('Click me!',style: TextStyle(fontSize: 60.0,fontWeight: FontWeight.bold,),),);}6UJMJUZfiSTUͳ$44JO+4ͱಉ͡Α͏ͳॻ͖ํ
·ͱΊ6UJMJUZfiSTUͳ$44JO+4Utility-first ͳϝϦοτ ʴ CSS-in-JS ͷϝϦοτɾ5ZQF4DSJQUͷΈʹΔͷͰܕ҆શͰɺิ͕ޮ͘ɾมͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒγϯϓϧʹ࣮ݱ→ ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ