Try Using Chakra UI

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.

Transcript

1. KIDPEFS
   
   !+@)BSE$PEFS $IBLSB
   6*
   Λ࢖ͬͯΈͯ
2.  3FBDU
   %FWFMPQFS
   3PBENBQʹ͋ͬͯؾʹͳͬͨ
    $IBLSB
   6*
   ʹ͍ͭͯ
    5BJMXJOE
   $44
   ͱ
   $IBLSB
   6*
    $IBLSB
   6*
   ͬͯԿ͕ྑ͍ͷʁʁ
    QVSFUZQFTDSJQUͰఆٛ͞ΕΔDPNQPOFOU
    4UZMF෇͖ͷίϯϙʔωϯτ͕ศར
    .PEBM౳ͷෳࡶͳίϯϙʔωϯτ)PPLT΋༻ҙ͞ΕͯΔ
    $44
   JO
   +4
   ͱͯ͠ͷػೳ
    ΧελϚΠζՄೳͳઃܭγεςϜ
   
   ΋΍ϙΠϯτ
   
   ऴΘΓʹ ໨࣍
3. IUUQTSPBENBQTISFBDU 3FBDU
   %FWFMPQFS
   3PBENBQʹ͋ͬͯؾʹͳͬͨ
4. FNPUJPOʹґଘ͍ͯ͠Δ3FBDU
   ͷ6*ίϯϙʔωϯτϥΠϒϥϦ
   γϯϓϧͰϞδϡʔϧԽ͞ΕͨΞΫηεՄೳͳίϯϙʔωϯτϥΠϒϥϦ Ͱɺ3FBDUΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹඞཁͳϏϧσΟϯάϒϩοΫ Λఏڙ͠·͢ɻ
   IUUQTDIBLSBVJDPN $IBLSB
   6*
   ͱ͸ʁ
5. $IBLSB
   6*Λ؆୯ʹݴ͏ͱ
   FNPUJPOʹ
   5BJMXJOE
   $44
   ͷ௚ײੑͱॊೈੑ଍͠߹Θͤͨ
   1VSF
   UZQFTDSJQU
   ͳ
   #FTU
   QSBDUJDF
   3FBDU
   DPNQPOFOUू
   ࢀর
   ͸Δ͞Ί͞Μ
   !TQSJOH@SBJOJOH $IBLSB
   6*
   ͱ͸ʁ
6. $IBLSB
   6*ͱ
   5BJMXJOE
   $44
   👀
7. ͦͷલʹྨࣅ఺  6UJMJUZ
   fi STU
   Ͱ͋Δͱ͍͏఺
   
   5IFNFͷॊೈ͞
8. %FGBVMU
   UIFNF
   ͸ࣅ͍ͯΔ
   
   ࢦఆͷ࢓ํ΋ಉ͡ 5BJMXJOE
   $44 $IBLSB
   6*
9. ྫ
   5BJMXJOE
   $44
10. ҧ͍ 5BJMXJOE
    $44 $IBLSB
    6*  طଘQSK΁ಋೖ͠΍͍͢
     σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔω ϯτΛఏڙ͍ͯ͠ͳ͍
     5BJMXJOEͰ༻ҙ͞Ε͍ͯΔఆٛࡁΈͷΫϥ εΛֶͿඞཁ͕͋Δ  طଘQSK΁ಋೖͮ͠Β͍
     σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔω ϯτΛఏڙ͍ͯ͠Δ
     4UZMF͚ͩͰͳ͘ɺDPNQPOFOUͷಈ࡞΋؆ ୯ʹมߋՄɻ
     UZQFTDSJQUͰܕอޢ͞Ε͍ͯΔ
11. $IBLSB
    6*ͬͯԿ͕ྑ͍ͷʁ🤔
12. 1VSF
    UZQFTDSJQUͰDPNQPOFOU͕ఆٛ͞Ε͍ͯΔ  74$PEF࢖༻࣌ʹ BUUSJCVUF͕ TVHHFTUͯ͠΋Β ͑Δɻ
     ܕอޢ͞Ε͍ͯΔ
13. #VUUPO΍*OQVUɺ4MJEFSΈ͍ͨͳίϯϙʔωϯτ͕ἧ͍ͬͯΔͷͰ͙͢૊Έ ཱͯΕΔɻ 4UZMF෇͖ͷίϯϙʔωϯτ͕ศར
14. ૉͰ࣮૷͢ΔͱׂͱखؒͩͬͨΓ͢Δίϯϙʔωϯτ͕ἧͬͯΔ .PEBM౳ͷෳࡶͳίϯϙʔωϯτ΋༻ҙ͞ΕͯΔ
15. VTF$MJQCPSE΍VTF#SFBL1PJOU7BMVFͱ͍ͬͨ)PPLT͕ఏڙ͞Ε͍ͯΔ )PPLT΋༻ҙ͞ΕͯΔ
16. TUZMFE
    TZTUFNΛ಺แ͍ͯ͠ΔͷͰFNPUJPO
    ॻ͍ͯͨਓͱ͔͸਌͠Έ͋Δ ͷͰ͸ɻଞͷ$44
    JO
    +4
    ϥΠΫͳॻ͖ํ͕Մೳɻ $44
    JO
    +4
    ͱͯ͠ͷػೳ
17. جຊతʹ͸1SPQTΛར༻ͨ͠4UZMFઃఆͰྑ͍Ͱ͕͢ɺ
    ίϯϙʔωϯτͷ࠶ར༻ͱ͍͏؍఺ͰςʔϚػೳΛ༻͍Δ͜ͱ͕Ͱ͖·͢ɻ ΧελϚΠζՄೳͳઃܭγεςϜ
18. 5IFNFશମʹӨڹ͕͋ΔͷͰ࢖༻͕೉͍͠ɻ
    WBSJBOUTΛ࡞੒͢Δ͜ͱͰ΋͏গ͠؇Ίʹ࡞ΕΔɻ ΧελϚΠζՄೳͳઃܭγεςϜ
19. ͦͷ
    ը໘BQQMJDBUJPO
    ඪ४ͳςʔϚΛ
    WBSJBOUͱͯ͠ઃఆ͠ɺ
    ৭΍GPOUɺαΠζ౳ΛςʔϚ͝ͱʹద༻Ͱ͖Δɻ
    
    ։ൃ଎౓্͕Γͦ͏ɻ ΧελϚΠζՄೳͳઃܭγεςϜ
20. 
    $44ηϨΫλΛ࢖ͬͯෳࡶʹTUZMJOH͢Δ৔߹͸޲͍͍ͯͳ͍
    TUZMFE ͰͰ͖ͳ͘͸ͳ͍͚ͲTUZMFEΛ࢖͏ඞཁ͕ग़͖ͯͯ͠·͏఺
    
    ൚༻ίϯϙʔωϯτ͕ଟ͍ͷͰ͖ͪΜͱ࢖͓͏ͱ͢Δͱ࠷ॳίετ͕͔͔Δ
    
    4UZMF෇͖DPNQPOFOUͳͷ͕ٯʹݏͳ৔߹΋͋Δɻ
    
    FYUFOE5IFNF͸࡞Γ͖Ε͹ͦͷޙ͸ૣ͍͔΋͠Εͳ͍͕࡞੒ʹ͕͔͔࣌ؒΔɻ มߋൣғ͕૿͑ͦ͏ײɻ
    ΋΍ϙΠϯτ
21. ΋΍ϙΠϯτ΋͋Δɻ
    ࡞ΔΞϓϦέʔγϣϯʹΑͬͯ͸޲͖ෆ޲͖͕͋ΔͷͰ͸ɻ
    ϋϚΕ͹։ൃ଎౓্͕Γͦ͏Ͱྑ͖ɻ
    ݸਓతʹ5IBJMXJOE
    $44ΑΓ΋ֶशίετ௿Ίʹײ͡ΔͷͰ͙͢ಋೖͰ͖Δ ײ ऴΘΓʹ
22.  IUUQTDIBLSBVJDPNEPDTHFUUJOHTUBSUFE
     !TQSJOH@SBJOJOH
     IUUQTSPBENBQTISFBDU
     IUUQT[FOOEFWUFSSJFSTDSJQUBSUJDMFTDIBLSBVJ DPNQPOFOUFYUFOET ࢀߟࢿྉ
23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠🤗