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
   $IBLSB6*Λ࢖ͬͯΈͯ
   

   View Slide

2. 3FBDU%FWFMPQFS3PBENBQʹ͋ͬͯؾʹͳͬͨ
   $IBLSB6*ʹ͍ͭͯ
   5BJMXJOE$44ͱ$IBLSB6*
   $IBLSB6*ͬͯԿ͕ྑ͍ͷʁʁ
   QVSFUZQFTDSJQUͰఆٛ͞ΕΔDPNQPOFOU
   4UZMF෇͖ͷίϯϙʔωϯτ͕ศར
   .PEBM౳ͷෳࡶͳίϯϙʔωϯτ)PPLT΋༻ҙ͞ΕͯΔ
   $44JO+4ͱͯ͠ͷػೳ
   ΧελϚΠζՄೳͳઃܭγεςϜ
   ΋΍ϙΠϯτ
   ऴΘΓʹ
   ໨࣍
   

   View Slide

3. IUUQTSPBENBQTISFBDU
   3FBDU%FWFMPQFS3PBENBQʹ͋ͬͯؾʹͳͬͨ
   

   View Slide

4. FNPUJPOʹґଘ͍ͯ͠Δ3FBDUͷ6*ίϯϙʔωϯτϥΠϒϥϦ
   γϯϓϧͰϞδϡʔϧԽ͞ΕͨΞΫηεՄೳͳίϯϙʔωϯτϥΠϒϥϦ
   Ͱɺ3FBDUΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹඞཁͳϏϧσΟϯάϒϩοΫ
   Λఏڙ͠·͢ɻ
   IUUQTDIBLSBVJDPN
   $IBLSB6*ͱ͸ʁ
   

   View Slide

5. $IBLSB6*Λ؆୯ʹݴ͏ͱ
   FNPUJPOʹ
   5BJMXJOE$44ͷ௚ײੑͱॊೈੑ଍͠߹Θͤͨ
   1VSFUZQFTDSJQUͳ#FTUQSBDUJDF3FBDUDPNQPOFOUू
   ࢀর͸Δ͞Ί͞Μ!TQSJOH@SBJOJOH
   $IBLSB6*ͱ͸ʁ
   

   View Slide

6. $IBLSB6*ͱ5BJMXJOE$44👀
   

   View Slide

7. ͦͷલʹྨࣅ఺
   6UJMJUZ
   fi
   STUͰ͋Δͱ͍͏఺
   5IFNFͷॊೈ͞
   

   View Slide

8. %FGBVMUUIFNF͸ࣅ͍ͯΔࢦఆͷ࢓ํ΋ಉ͡
   5BJMXJOE$44
   $IBLSB6*
   

   View Slide

9. ྫ5BJMXJOE$44
   

   View Slide

10. ҧ͍
    5BJMXJOE$44
    $IBLSB6*
    طଘQSK΁ಋೖ͠΍͍͢
    σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔω
    ϯτΛఏڙ͍ͯ͠ͳ͍
    5BJMXJOEͰ༻ҙ͞Ε͍ͯΔఆٛࡁΈͷΫϥ
    εΛֶͿඞཁ͕͋Δ
    طଘQSK΁ಋೖͮ͠Β͍
    σϑΥϧτͷελΠϧΛ࣋ͬͨίϯϙʔω
    ϯτΛఏڙ͍ͯ͠Δ
    4UZMF͚ͩͰͳ͘ɺDPNQPOFOUͷಈ࡞΋؆
    ୯ʹมߋՄɻ
    UZQFTDSJQUͰܕอޢ͞Ε͍ͯΔ
    

    View Slide

11. $IBLSB6*ͬͯԿ͕ྑ͍ͷʁ🤔
    

    View Slide

12. 1VSFUZQFTDSJQUͰDPNQPOFOU͕ఆٛ͞Ε͍ͯΔ
    74$PEF࢖༻࣌ʹ
    BUUSJCVUF͕
    TVHHFTUͯ͠΋Β
    ͑Δɻ
    ܕอޢ͞Ε͍ͯΔ
    

    View Slide

13. #VUUPO΍*OQVUɺ4MJEFSΈ͍ͨͳίϯϙʔωϯτ͕ἧ͍ͬͯΔͷͰ͙͢૊Έ
    ཱͯΕΔɻ
    4UZMF෇͖ͷίϯϙʔωϯτ͕ศར
    

    View Slide

14. ૉͰ࣮૷͢ΔͱׂͱखؒͩͬͨΓ͢Δίϯϙʔωϯτ͕ἧͬͯΔ
    .PEBM౳ͷෳࡶͳίϯϙʔωϯτ΋༻ҙ͞ΕͯΔ
    

    View Slide

15. VTF$MJQCPSE΍VTF#SFBL1PJOU7BMVFͱ͍ͬͨ)PPLT͕ఏڙ͞Ε͍ͯΔ
    )PPLT΋༻ҙ͞ΕͯΔ
    

    View Slide

16. TUZMFETZTUFNΛ಺แ͍ͯ͠ΔͷͰFNPUJPOॻ͍ͯͨਓͱ͔͸਌͠Έ͋Δ
    ͷͰ͸ɻଞͷ$44JO+4ϥΠΫͳॻ͖ํ͕Մೳɻ
    $44JO+4ͱͯ͠ͷػೳ
    

    View Slide

17. جຊతʹ͸1SPQTΛར༻ͨ͠4UZMFઃఆͰྑ͍Ͱ͕͢ɺ
    ίϯϙʔωϯτͷ࠶ར༻ͱ͍͏؍఺ͰςʔϚػೳΛ༻͍Δ͜ͱ͕Ͱ͖·͢ɻ
    ΧελϚΠζՄೳͳઃܭγεςϜ
    

    View Slide

18. 5IFNFશମʹӨڹ͕͋ΔͷͰ࢖༻͕೉͍͠ɻ
    WBSJBOUTΛ࡞੒͢Δ͜ͱͰ΋͏গ͠؇Ίʹ࡞ΕΔɻ
    ΧελϚΠζՄೳͳઃܭγεςϜ
    

    View Slide

19. ͦͷը໘BQQMJDBUJPOඪ४ͳςʔϚΛWBSJBOUͱͯ͠ઃఆ͠ɺ
    ৭΍GPOUɺαΠζ౳ΛςʔϚ͝ͱʹద༻Ͱ͖Δɻ
    ։ൃ଎౓্͕Γͦ͏ɻ
    ΧελϚΠζՄೳͳઃܭγεςϜ
    

    View Slide

20. $44ηϨΫλΛ࢖ͬͯෳࡶʹTUZMJOH͢Δ৔߹͸޲͍͍ͯͳ͍
    TUZMFE
    ͰͰ͖ͳ͘͸ͳ͍͚ͲTUZMFEΛ࢖͏ඞཁ͕ग़͖ͯͯ͠·͏఺
    
    ൚༻ίϯϙʔωϯτ͕ଟ͍ͷͰ͖ͪΜͱ࢖͓͏ͱ͢Δͱ࠷ॳίετ͕͔͔Δ
    4UZMF෇͖DPNQPOFOUͳͷ͕ٯʹݏͳ৔߹΋͋Δɻ
    FYUFOE5IFNF͸࡞Γ͖Ε͹ͦͷޙ͸ૣ͍͔΋͠Εͳ͍͕࡞੒ʹ͕͔͔࣌ؒΔɻ
    มߋൣғ͕૿͑ͦ͏ײɻ
    ΋΍ϙΠϯτ
    

    View Slide

21. ΋΍ϙΠϯτ΋͋Δɻ
    ࡞ΔΞϓϦέʔγϣϯʹΑͬͯ͸޲͖ෆ޲͖͕͋ΔͷͰ͸ɻ
    ϋϚΕ͹։ൃ଎౓্͕Γͦ͏Ͱྑ͖ɻ
    ݸਓతʹ5IBJMXJOE$44ΑΓ΋ֶशίετ௿Ίʹײ͡ΔͷͰ͙͢ಋೖͰ͖Δ
    ײ
    ऴΘΓʹ
    

    View Slide

22. IUUQTDIBLSBVJDPNEPDTHFUUJOHTUBSUFE
    !TQSJOH@SBJOJOH
    IUUQTSPBENBQTISFBDU
    IUUQT[FOOEFWUFSSJFSTDSJQUBSUJDMFTDIBLSBVJ
    DPNQPOFOUFYUFOET
    ࢀߟࢿྉ
    

    View Slide

23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠🤗
    

    View Slide