This is a document in which I presented my experience with ChakraUI and a brief explanation of it, including a comparison of ChakraUI and Tailwind CSS.
KIDPEFS!+@)BSE$PEFS$IBLSB6*ΛͬͯΈͯ
View Slide
3FBDU%FWFMPQFS3PBENBQʹ͋ͬͯؾʹͳͬͨ $IBLSB6*ʹ͍ͭͯ 5BJMXJOE$44ͱ$IBLSB6* $IBLSB6*ͬͯԿ͕ྑ͍ͷʁʁ QVSFUZQFTDSJQUͰఆٛ͞ΕΔDPNQPOFOU 4UZMF͖ͷίϯϙʔωϯτ͕ศར .PEBMͷෳࡶͳίϯϙʔωϯτ)PPLT༻ҙ͞ΕͯΔ $44JO+4ͱͯ͠ͷػೳ ΧελϚΠζՄೳͳઃܭγεςϜϙΠϯτऴΘΓʹ࣍
IUUQTSPBENBQTISFBDU3FBDU%FWFMPQFS3PBENBQʹ͋ͬͯؾʹͳͬͨ
FNPUJPOʹґଘ͍ͯ͠Δ3FBDUͷ6*ίϯϙʔωϯτϥΠϒϥϦγϯϓϧͰϞδϡʔϧԽ͞ΕͨΞΫηεՄೳͳίϯϙʔωϯτϥΠϒϥϦͰɺ3FBDUΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹඞཁͳϏϧσΟϯάϒϩοΫΛఏڙ͠·͢ɻIUUQTDIBLSBVJDPN$IBLSB6*ͱʁ
$IBLSB6*Λ؆୯ʹݴ͏ͱFNPUJPOʹ5BJMXJOE$44ͷײੑͱॊೈੑ͠߹Θͤͨ1VSFUZQFTDSJQUͳ#FTUQSBDUJDF3FBDUDPNQPOFOUूࢀরΔ͞Ί͞Μ!TQSJOH@SBJOJOH$IBLSB6*ͱʁ
$IBLSB6*ͱ5BJMXJOE$44👀
ͦͷલʹྨࣅ 6UJMJUZfiSTUͰ͋Δͱ͍͏5IFNFͷॊೈ͞
%FGBVMUUIFNFࣅ͍ͯΔࢦఆͷํಉ͡5BJMXJOE$44$IBLSB6*
ྫ5BJMXJOE$44
ҧ͍5BJMXJOE$44$IBLSB6* طଘQSKಋೖ͍͢͠ σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔωϯτΛఏڙ͍ͯ͠ͳ͍ 5BJMXJOEͰ༻ҙ͞Ε͍ͯΔఆٛࡁΈͷΫϥεΛֶͿඞཁ͕͋Δ طଘQSKಋೖͮ͠Β͍ σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔωϯτΛఏڙ͍ͯ͠Δ 4UZMF͚ͩͰͳ͘ɺDPNQPOFOUͷಈ࡞؆୯ʹมߋՄɻ UZQFTDSJQUͰܕอޢ͞Ε͍ͯΔ
$IBLSB6*ͬͯԿ͕ྑ͍ͷʁ🤔
1VSFUZQFTDSJQUͰDPNQPOFOU͕ఆٛ͞Ε͍ͯΔ 74$PEF༻࣌ʹBUUSJCVUF͕TVHHFTUͯ͠Β͑Δɻ ܕอޢ͞Ε͍ͯΔ
#VUUPO*OQVUɺ4MJEFSΈ͍ͨͳίϯϙʔωϯτ͕ἧ͍ͬͯΔͷͰ͙͢ΈཱͯΕΔɻ4UZMF͖ͷίϯϙʔωϯτ͕ศར
ૉͰ࣮͢ΔͱׂͱखؒͩͬͨΓ͢Δίϯϙʔωϯτ͕ἧͬͯΔ.PEBMͷෳࡶͳίϯϙʔωϯτ༻ҙ͞ΕͯΔ
VTF$MJQCPSEVTF#SFBL1PJOU7BMVFͱ͍ͬͨ)PPLT͕ఏڙ͞Ε͍ͯΔ)PPLT༻ҙ͞ΕͯΔ
TUZMFETZTUFNΛแ͍ͯ͠ΔͷͰFNPUJPOॻ͍ͯͨਓͱ͔͠Έ͋ΔͷͰɻଞͷ$44JO+4ϥΠΫͳॻ͖ํ͕Մೳɻ$44JO+4ͱͯ͠ͷػೳ
جຊతʹ1SPQTΛར༻ͨ͠4UZMFઃఆͰྑ͍Ͱ͕͢ɺίϯϙʔωϯτͷ࠶ར༻ͱ͍͏؍ͰςʔϚػೳΛ༻͍Δ͜ͱ͕Ͱ͖·͢ɻΧελϚΠζՄೳͳઃܭγεςϜ
5IFNFશମʹӨڹ͕͋ΔͷͰ༻͕͍͠ɻWBSJBOUTΛ࡞͢Δ͜ͱͰ͏গ͠؇Ίʹ࡞ΕΔɻΧελϚΠζՄೳͳઃܭγεςϜ
ͦͷը໘BQQMJDBUJPOඪ४ͳςʔϚΛWBSJBOUͱͯ͠ઃఆ͠ɺ৭GPOUɺαΠζΛςʔϚ͝ͱʹద༻Ͱ͖Δɻ։ൃ্͕Γͦ͏ɻΧελϚΠζՄೳͳઃܭγεςϜ
$44ηϨΫλΛͬͯෳࡶʹTUZMJOH͢Δ߹͍͍ͯͳ͍TUZMFE ͰͰ͖ͳ͘ͳ͍͚ͲTUZMFEΛ͏ඞཁ͕ग़͖ͯͯ͠·͏൚༻ίϯϙʔωϯτ͕ଟ͍ͷͰ͖ͪΜͱ͓͏ͱ͢Δͱ࠷ॳίετ͕͔͔Δ4UZMF͖DPNQPOFOUͳͷ͕ٯʹݏͳ߹͋ΔɻFYUFOE5IFNF࡞Γ͖Εͦͷޙૣ͍͔͠Εͳ͍͕࡞ʹ͕͔͔࣌ؒΔɻมߋൣғ͕૿͑ͦ͏ײɻϙΠϯτ
ϙΠϯτ͋Δɻ࡞ΔΞϓϦέʔγϣϯʹΑ͖ͬͯෆ͖͕͋ΔͷͰɻϋϚΕ։ൃ্͕Γͦ͏Ͱྑ͖ɻݸਓతʹ5IBJMXJOE$44ΑΓֶशίετΊʹײ͡ΔͷͰ͙͢ಋೖͰ͖ΔײऴΘΓʹ
IUUQTDIBLSBVJDPNEPDTHFUUJOHTUBSUFE !TQSJOH@SBJOJOH IUUQTSPBENBQTISFBDU IUUQT[FOOEFWUFSSJFSTDSJQUBSUJDMFTDIBLSBVJDPNQPOFOUFYUFOETࢀߟࢿྉ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠🤗