shadcn/uiを使ってReactでの開発を加速させよう！

「Reactなんでも発表会」の発表資料です！

Reactなんでも発表会 - connpass
https://connpass.com/event/340079/

スライドで紹介した謎のアプリはこちら↓

MindfulDo
https://mindfuldo.pages.dev/

---

lef237 (LEF) · GitHub
https://github.com/lef237

Transcript

1. -&'ʢ!MFG
   ɾ TIBEDOVJΛ࢖ͬͯ3FBDUͰͷ։ൃΛՃ଎ͤ͞Α͏ʂ 3FBDUͳΜͰ΋ൃදձ
2. w -&'ʢϨϑʣͱݴ͍·͢
   w ϓϩάϥϛϯάεϐʔνձͷձ ௕Λ͍ͯ͠·͢
   w ࠷ۙ͸5ISFFKTʹϋϚ͍ͬͯ·͢ ࣗݾ঺հ
3. TIBEDOVJ
   Λ஌͍ͬͯ·͔͢ʁ
4. TIBEDOVJͱ͸ ಛ௃ w /FYUKT΍"TUSPͳͲͷϑϨʔϜϫʔΫͰ࢖͑Δɺ࠶ར༻Մೳͳ6*ίϯϙ ʔωϯτͷίϨΫγϣϯ
   w ඞཁͳίϯϙʔωϯτͷίʔυΛ௚઀ϓϩδΣΫτʹίϐʔͯ͠࢖༻Ͱ ͖Δ
   w ֤ίϯϙʔωϯτͷίʔυΛॴ༗͠ɺࣗ༝ʹΧελϚΠζͰ͖Δ
5. w ίϯϙʔωϯτϥΠϒϥϦͰ͸ͳ͍
   w OQNͷґଘؔ܎ʹʢجຊతʹ͸ʣӨڹ͞Εͳ͍ Կ͕خ͍͔͠ʁ ͜Ε͕લड़ͷίϐʔˍϖʔετͷҙຯ
   ͭ·Γɺ͍͟ͱͳͬͨΒࣗ෼ͰΧελϚΠζɾϝϯςφϯεͰ͖Δʂ ࢀরɿIUUQTVJTIBEDODPNEPDT ίϯϙʔωϯτϥΠϒϥϦͰ͸ͳ͍ͬͯͲ͏͍͏͜ͱʁ ґଘؔ܎ͱͯ͠Πϯετʔϧ͢ΔΘ͚Ͱ͸͋Γ·ͤΜɻOQN
   ܦ༝Ͱ͸ར༻·ͨ͸഑෍͞Ε·ͤΜɻ
6. TIBEDOVJͷ࢓૊Έ  $-*͕ϨδετϦ͔ΒίϯϙʔωϯτΛऔಘ
    DPNQPOFOUTKTPOΛಡΈࠐΈϓϩδΣΫτݻ༗ͷ
   ઃఆ΍ߏ੒Λ֬ೝ
    ϓϩδΣΫτʹ߹ΘͤͯɺίʔυΛม׵ͯ͠഑ஔ ࢀরɿIUUQTYDPNTIBEDOTUBUVT ̍ͭͷίϚϯυͰ΍ͬͯ͘ΕΔ
7. ॳظઃఆ /FYUKTͷ৔߹ OQY
   TIBEDO!MBUFTU
   JOJU ͚ͩͰ0,ʂ ͢ΔͱɺDPNQPOFOUTKTPOΛઃఆ͢ΔͨΊͷબ୒ࢶ͕දࣔ͞Ε·͢ɻ ͓޷ΈͷॳظઃఆΛબΜͩΒʜʜ४උ׬ྃʂ
8. ίϯϙʔωϯτͷೖΕํ ྫʣ#VUUPOΛೖΕΔͱ͖  TIBEDOVJͷυΩϡϝϯτ͔Β#VUUPOͷϖʔδΛ ݟ͚ͭΔ
    *OTUBMMBUJPOΛࢀߟʹ$-*ίϚϯυΛ࣮ߦ
    DPNQPOFOUTVJ
   ʹϑΝΠϧ͕௥Ճ͞ΕΔ
    ͜ͷϑΝΠϧΛJNQPSU͢Δ͚ͩͰɺ
   #VUUPOΛදࣔͰ͖Δ Ҏ্ʂ
9. ΧελϚΠζํ๏ WBSJBOU
   TJ[F
   DMBTT/BNF w WBSJBOUΛ࢖͏ͱେ·͔ͳσβΠϯ Λબ୒Ͱ͖Δ
   w TJ[FΛ࢖͏ͱେ·͔ͳαΠζΛબ୒ Ͱ͖Δ
   w ࡉ͔͘ௐ੔͍ͨ͠ͱ͖͸ DMBTT/BNFΛ࢖͓͏ʂ ˞΋ͪΖΜɺCVUUPOUTYϑΝΠϧ಺ͷίʔυΛॻ͖׵͑ͯ΋0,👌
10. -&'ͷʢݸਓ։ൃͰͷʣ׆༻ྫ
11. ׆༻ྫ ͦͷ̍ɿ-&'ʢࣗ෼ʣͷϗʔϜϖʔδ
12. ˠ $MJDL
    NFΛԡ͢ͱ 5PBTUදࣔ͞ΕΔΑʂ
13. ׆༻ྫ ͦͷ̎ɿ.JOEGVM%P w ٕज़ελοΫ
    w 3FBDU
    
    w /FYUKT
    ʢ"QQ
    3PVUFSʣ
    w 5ISFFKT
    w #JPNF ͓ਖ਼݄ʹ։ൃͨ͠ṖͷΞϓϦ
14. ͚̍ͭͩʹϚ΢εΧʔιϧΛ౰ͯΔͱʜʜ ϗόʔΧʔυ͕දࣔ͞ΕΔʂ
15. ҰॠͰಋೖͰ͖·ͨ͠🤩
16. τϨʔυΦϑΛҙࣝͯ͠ར༻͠Α͏ʂ ൺֱͱ஫ҙ఺ 
    ࣗ࡞͢Δ
    
    
    
    
    ϝϦοτɹɿίʔυΛ׬શʹཧղͰ͖Δ
    
    
    
    
    σϝϦοτɿ࣮૷ʹखֻ͕͔ؒΔ৔߹΋͋Δ
    
    TIBEDOVJ
    
    
    
    
    ϝϦοτɹɿૉૣ࣮͘૷Ͱ͖Δɻࣗ෼Ͱϝϯςφϯε΋Մೳ
    
    
    
    
    σϝϦοτɿTIBEDOVJͷίʔυΛಡΈղ͘ͷ͕ͪΐͬͱେม
17. ·ͱΊ w ϥΠϒϥϦґଘΛͳΔ΂͘཈͑ͭͭɺ3FBDUͰߴ଎ʹ։ൃ͢ΔͷΛॿ͚ͯ͘ΕΔ
    w σβΠϯ΍ελΠϦϯάΛ౷Ұ͠ͳ͕Βɺ6*ίϯϙʔωϯτΛར༻Ͱ͖Δ
    w खݩʹίʔυ͕ஔ͔ΕΔͨΊɺࣗ෼ͰϝϯςφϯεɺΧελϚΠζ͕Ͱ͖Δ Λ࢖ͬͯ Ͱͷ։ൃΛՃ଎ͤ͞Α͏ʂ
18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
19. ͓·͚
20. ࡉ͔ͳ5JQT /FX
    :PSLͱ%FGBVMUͷҧ͍ 8IBU
    JT
    UIF
    EJ ff FSFODF
    CFUXFFO
    %FGBVMU
    BOE
    /FX
    :PSL
    TUZMF
    JO
    TIBEDOVJ
    IUUQTXXXTIBEDOEFTJHODPNCMPHEJ ff FSFODFCFUXFFOEFGBVMUBOEOFXZPSLTUZMFJOTIBEDOVJ େ͖ͳҧ͍ͱͯ͠͸ʜʜ
    ɾ/FX
    :PSL
    ˠ
    Θ͔ͣʹӨ͕͋Δ
    ɾ%FGBVMU
    ˠ
    Ө͕ͳ͍ ଞʹ΋ࡉ͔ͳҧ͍͋Γɻ
    ࣗ෼͸ͻͱ·ͣެ͕ࣜਪ͍ͯ͠Δʢʁʣ/FX
    :PSLΛબ୒͍ͯ͠·͢ɻ ͦͷଞͷҧ͍ બ୒ࢶͰҰ൪໎͏ͱ͜Ζ