$30 off During Our Annual Pro Sale. View Details »

Try Using Chakra UI

jhcoder
September 25, 2021

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.

jhcoder

September 25, 2021
Tweet

More Decks by jhcoder

Other Decks in Programming

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