Radix UI & shadcn/uiのススメ

Transcript

1. R a dix UI & sh a dcn/uiͷεεϝ @tosuri13
2. @tosuri13 ࣗݾ঺հ ͱ͢Γ @tosuri13 MOTEXגࣜձࣾ ॴଐ 🐧 ΃Μ͗Μ͕޷͖Ͱ͢
3. UIϥΠϒϥϦʹ͍ͭͯͷ͓࿩Ͱ͢ʂ @tosuri13
4. @tosuri13 ݸਓͷWebαΠτ։ൃʹ͓͚Δ՝୊ ݸਓͰWebαΠτΛ։ൃ͠Α͏ͱͨ࣌͠ʹɺϘλϯ΍υϩοϓμ΢ϯͷσβΠϯ ΍ελΠϦϯάௐ੔ʹۤ࿑ͨ͜͠ͱ͸͋Γ·ͤΜ͔ʁ ΦγϟϨͳελΠϧΛߟ͑Δͷ͸େมͰ͢͠ɺCSSΛॻ͘ʹ΋Կ͔ͱ໘౗Ͱԯ߷ ʹͳΔ͜ͱ͕ଟ͍ͷͰ͸ͱࢥ͍·͢ɻ 🤗 ཧ૝ͷϘλϯ 😭 ݱ࣮ͷϘλϯ
5. @tosuri13 UIϥΠϒϥϦͱ͸ʁ UIϥΠϒϥϦ͸͜ͷΑ͏ͳ໰୊Λղܾ͢ΔͨΊͷϥΠϒϥϦͰ͢ʂ طʹελΠϧ͕ఆٛ͞ΕͨUI ίϯϙʔωϯτΛίʔυʹ૊ΈࠐΉ͚ͩͰɺͱͯ΋ ΦγϟϨͳίϯϙʔωϯτΛ؆୯ʹߏங͢Δ͜ͱ͕Ͱ͖·͢ʂ ៉ྷͳUIίϯϙʔωϯτ͕ ਺ߦͰߏஙͰ͖Δʂ
6. @tosuri13 ༗໊ͳUIϥΠϒϥϦͨͪ ɾM a teri a l UI ɾCh a kr a UI ɾGoogle͕ఏএ͍ͯ͠ΔʮM a teri a l Designʯʹج͍ͮͨ ίϯϙʔωϯτΛఏڙ͢ΔUIϥΠϒϥϦ ɾGoogle͕ఏڙ͍ͯ͠ΔαʔϏεͱͦͬ͘Γͷը໘͕ ࡞ΕΔΑ͏ʹͳΔ ɾγϯϓϧͰॊೈੑͷߴ͍ϞμϯͳίϯϙʔωϯτΛ ఏڙ͢ΔUIϥΠϒϥϦ ɾEmotion΍Fr a mer MotionΛ಺෦తʹ࢖༻͍ͯ͠ΔͨΊɺ ΧελϜͷελΠϧ΍ΞχϝʔγϣϯͳͲΛ౷߹Ͱ͖Δ
7. @tosuri13 ैདྷͷUIϥΠϒϥϦʹ͓͚Δ໰୊఺ ͜ΜͳʹศརͳΒɺͲͷWebαΠτ΋M a teri a l UI΍Ch a kr a UIͳͲΛ࢖࣮ͬͯ૷͢ Ε͹͍͍ͷͰ͸ʁͱࢥ͏͔΋͠Ε·ͤΜ͕ɺ͍͔ͭ͘໰୊఺͕͋Γ·͢ɻ ɹᶃ ॊೈੑ͕ߴ͍…ͱ͸ݴ͑ɺ݁ہΧελϚΠζͮ͠Β͍ʂ ɹɹˠ ΧϥʔϨΠΞ΢τ΍ࡉ͔͍ڍಈΛมߋ͠Α͏ͱ͢ΔͱɺૉͷJSX(TSX) + CSSΛॻ͘ͷͱ͋·Γେ͕ࠩͳ͍ ɹᶄ όϯυϧαΠζ͕σΧ͍ʂߋ৽͕ාͯ͘؅ཧͮ͠Β͍ʂ ɹɹˠ σϓϩΠ͢Δ࣌ͱ͔ʹࠔΔɻΞϓσͰલ·Ͱ࢖͑ͨProps͕ٸʹ࢖͑ͳ͘ͳΔͳͲͷϦεΫ͕͋Δ ※ όϯυϧαΠζ: ΞϓϦέʔγϣϯΛϏϧυͨ͠ޙͷ༰ྔͷ͜ͱΛࢦ͢
8. ໰୊ΛղܾͰ͖Δ৽͍͠UIϥΠϒϥϦ͕͋Δʂ @tosuri13
9. @tosuri13 ͦ͜ͰR a dix UIͷొ৔ͩʂ ͜ͷ໰୊఺Λղফ͢ΔͨΊʹੜ·Εͨ֓೦͕ϔουϨεUIͱ͍͏ߟ͑ํͰ͢ɻUI ίϯϙʔωϯτʹ͓͚Δʮݟͨ໨ʯ͸ఏڙͤͣʮৼΔ෣͍ʯͷΈΛఏڙ͠·͢ɻ ϔουϨεUIͱͯ͠୅දతͳUIϥΠϒϥϦ͕R a dix UIͰ͢ʂ
10. @tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶃ R a dix UIͷίϯϙʔωϯτΛ࢖͏͜ͱͰɺσϑΥϧτͷڍಈ΍ΞΫηγϏϦςΟ ͳͲ͕࣮૷ࡁΈͷελΠϧ͕ͳ͍ίϯϙʔωϯτ͕࡞੒͞Ε·͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ ίϯϙʔωϯτͷػೳΛ ࣮૷͢Δඞཁ͸ͳ͍ʂ
11. @tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶄ ޙ͸ͦͷ··CSSΛॻ͍ͨΓT a ilwind CSSͳͲΛ࢖ͬͯελΠϧΛ౰ͯΔ͚ͩ ͰɺΞΫηγϏϦςΟΛҙ͍͍ࣝͨ͠ײ͡ͷUIίϯϙʔωϯτΛ࡞੒͢Δ͜ͱ͕ Ͱ͖·͢ʂ T a ilwind CSSΛ࢖ͬͯ ελΠϧΛ౰ͯΔͱ͜Μͳײ͡ ↑ @r a dix-colorsͱͯ͠ެ։͞Ε͍ͯΔΧϥʔύϨοτΛ ࢖͏͜ͱͰ͍͍ײ͡ͷΧϥʔϨΠΞ΢τΛ࡞੒͢Δ͜ͱ΋Ͱ͖Δ
12. @tosuri13 R a dix UIͷ͍͍ͱ͜Ζ ελΠϧΛࣗ෼Ͱ౰ͯΔඞཁ͸͋Γ·͕͢ɺσβΠϯͷίϯτϩʔϧ͸։ൃऀଆ Ͱࣗ༝ʹ੍ޚ͢Δ͜ͱ͕Ͱ͖·͢ʂ ·ͨɺR a dix UIʹ͸༨ܭͳґଘϥΠϒϥϦ͕ෆඞཁͰ͋Γɺඞཁͳίϯϙʔωϯ τͷΈΠϯετʔϧͯ͠࢖༻Ͱ͖ΔͨΊόϯυϧαΠζ΋࡟ݮ͞Ε·͢ʂ ↑ ཉ͍͠ίϯϙʔωϯτ͚ͩΠϯετʔϧͰ͖Δ
13. @tosuri13 ݁ہελΠϧ౰ͯͳ͍ͱ͍͚ͳ͍ͷ͔… ͱ͸ݴ͑ɺ݁ہR a dix UIΛ࢖ͬͯ΋Ұ͔ΒCSSΛࣗ෼Ͱॻ͔ͳ͍ͱ͍͚ͳ͍ͷ ͔…ͱࢥͬͨํ͕͍Βͬ͠ΌΔ͔ͱࢥ͍·͢ɻ PropsͳͲͷAPIΛ௨ͯ͡ελΠϧΛఏڙ͢ΔҎ্ɺ࢓ํ͕ͳ͍ͷͰ͠ΐ͏͔… ← ࣮͸@r a dix-themeͱ͍͏طʹελΠϧ͕ ౰͍ͨͬͯΔίϯϙʔωϯτ΋༻ҙ͞Ε͍ͯΔ͕ PropsʹΑΔݶఆతͳ੍ޚʹͳΔͨΊඍົ
14. @tosuri13 ͦ͜Ͱsh a dcn/uiͷొ৔ͩʂ ͜ͷ໰୊Λղܾͨ͠UIϥΠϒϥϦ͕sh a dcn/uiͰ͢ɻ sh a dcn/ui͸R a dix UIΛϕʔεʹͨ͠UIϥΠϒϥϦͰ͕͢ɺैདྷͷUIϥΠϒϥϦͱ ͸͔ͳΓҧͬͨΞϓϩʔνΛ࢖༻͠·͢ɻ
15. @tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶃ sh a dcn/ui͸جຊతʹnpxΛ࢖༻ͯ͠ύοέʔδΛ࣮ߦ͢ΔܗͰઃఆ΍ίϯϙʔω ϯτͷ௥ՃͳͲΛߦ͍·͢ɻ εΫϦϓτΛ࣮ߦ͢Δͱίϯϙʔωϯτ΍ϢʔςΟϦςΟɺσβΠϯγεςϜΛ ૊ΈࠐΉͨΊͷઃఆͳͲ͕௚઀ϢʔβͷϓϩδΣΫτʹॻ͖ࠐ·Ε·͢ɻ ࢦఆͷσΟϨΫτϦ഑Լʹ ίϯϙʔωϯτ͕࡞੒͞ΕΔ ↑ npxͰ͜Μͳײ͡ͷίϚϯυΛ࣮ߦ͢Δ
16. @tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶄ ௥Ճͨ͠ίϯϙʔωϯτ͸σϑΥϧτελΠϧͰ࢖༻͢Δ͜ͱ΋Ͱ͖·͢͠ɺؾ ʹೖΒͳ͚Ε͹௚઀ϑΝΠϧΛमਖ਼ͯ͠ɺσβΠϯͷมߋ΍V a ri a ntΛ௥Ճ͢ΔΑ ͏ͳ͜ͱ΋ՄೳͰ͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ twMergeͰCSSΛ ௚઀্ॻ͖͢Δ͜ͱ΋Ͱ͖Δ
17. @tosuri13 sh a dcn/uiͷ͍͍ͱ͜Ζ R a dix UIͷྑ͍ͱ͜ΖΛ཈͑ͭͭɺσϑΥϧτͰͦͷ··࢖͑ΔΑ͏ʹͯ͠΄͠ ͍ʂͱ͍͏ϫΨϚϚͳཁ๬ʹ΋Ԡ͑Δ͜ͱ͕Ͱ͖·͢ɻ ͨͩɺϢʔβଆͷॊೈͳΧελϚΠζʹରԠ͢ΔͨΊɺT a ilwind CSSͷར༻͕ඞ ਢʹͳ͍ͬͯΔ఺͚ͩ஫ҙ͕ඞཁͰ͢ɻ
18. ·ͱΊ @tosuri13
19. @tosuri13 ·ͱΊ ࠓճ৭ʑͱUIϥΠϒϥϦΛ঺հ͖ͯ͠·͕ͨ͠ɺ݁ہԿΛબ΂͹ྑ͍ͷ͔͸ཁ݅ ʹ߹Θͤͯࣗ਎Ͱ൑அ͢Δඞཁ͕͋Γ·͢ʂ ϔουϨεUIͳUIϥΠϒϥϦΛ࢖༻ͨ͜͠ͱͷͳ͍ํ͕͍Ε͹ɺҰ౓R a dix UI΍ sh a dcn/uiΛ࢖ͬͯݟͯ΄͍͠Ͱ͢ʂ
20. @tosuri13 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!