Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Radix UI & shadcn/uiのススメ

とすり
August 17, 2024

Radix UI & shadcn/uiのススメ

とすり

August 17, 2024
Tweet

More Decks by とすり

Other Decks in Programming

Transcript

  1. @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Λ಺෦తʹ࢖༻͍ͯ͠ΔͨΊɺ ΧελϜͷελΠϧ΍ΞχϝʔγϣϯͳͲΛ౷߹Ͱ͖Δ
  2. @tosuri13 ैདྷͷUIϥΠϒϥϦʹ͓͚Δ໰୊఺ ͜ΜͳʹศརͳΒɺͲͷWebαΠτ΋M a teri a l UI΍Ch a kr

    a UIͳͲΛ࢖࣮ͬͯ૷͢ Ε͹͍͍ͷͰ͸ʁͱࢥ͏͔΋͠Ε·ͤΜ͕ɺ͍͔ͭ͘໰୊఺͕͋Γ·͢ɻ ɹᶃ ॊೈੑ͕ߴ͍…ͱ͸ݴ͑ɺ݁ہΧελϚΠζͮ͠Β͍ʂ ɹɹˠ ΧϥʔϨΠΞ΢τ΍ࡉ͔͍ڍಈΛมߋ͠Α͏ͱ͢ΔͱɺૉͷJSX(TSX) + CSSΛॻ͘ͷͱ͋·Γେ͕ࠩͳ͍ ɹᶄ όϯυϧαΠζ͕σΧ͍ʂߋ৽͕ාͯ͘؅ཧͮ͠Β͍ʂ ɹɹˠ σϓϩΠ͢Δ࣌ͱ͔ʹࠔΔɻΞϓσͰલ·Ͱ࢖͑ͨProps͕ٸʹ࢖͑ͳ͘ͳΔͳͲͷϦεΫ͕͋Δ ※ όϯυϧαΠζ: ΞϓϦέʔγϣϯΛϏϧυͨ͠ޙͷ༰ྔͷ͜ͱΛࢦ͢
  3. @tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶃ R a dix UIͷίϯϙʔωϯτΛ࢖͏͜ͱͰɺσϑΥϧτͷڍಈ΍ΞΫηγϏϦςΟ

    ͳͲ͕࣮૷ࡁΈͷελΠϧ͕ͳ͍ίϯϙʔωϯτ͕࡞੒͞Ε·͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ ίϯϙʔωϯτͷػೳΛ ࣮૷͢Δඞཁ͸ͳ͍ʂ
  4. @tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶄ ޙ͸ͦͷ··CSSΛॻ͍ͨΓT a ilwind CSSͳͲΛ࢖ͬͯελΠϧΛ౰ͯΔ͚ͩ

    ͰɺΞΫηγϏϦςΟΛҙ͍͍ࣝͨ͠ײ͡ͷUIίϯϙʔωϯτΛ࡞੒͢Δ͜ͱ͕ Ͱ͖·͢ʂ T a ilwind CSSΛ࢖ͬͯ ελΠϧΛ౰ͯΔͱ͜Μͳײ͡ ↑ @r a dix-colorsͱͯ͠ެ։͞Ε͍ͯΔΧϥʔύϨοτΛ ࢖͏͜ͱͰ͍͍ײ͡ͷΧϥʔϨΠΞ΢τΛ࡞੒͢Δ͜ͱ΋Ͱ͖Δ
  5. @tosuri13 R a dix UIͷ͍͍ͱ͜Ζ ελΠϧΛࣗ෼Ͱ౰ͯΔඞཁ͸͋Γ·͕͢ɺσβΠϯͷίϯτϩʔϧ͸։ൃऀଆ Ͱࣗ༝ʹ੍ޚ͢Δ͜ͱ͕Ͱ͖·͢ʂ ·ͨɺR a dix

    UIʹ͸༨ܭͳґଘϥΠϒϥϦ͕ෆඞཁͰ͋Γɺඞཁͳίϯϙʔωϯ τͷΈΠϯετʔϧͯ͠࢖༻Ͱ͖ΔͨΊόϯυϧαΠζ΋࡟ݮ͞Ε·͢ʂ ↑ ཉ͍͠ίϯϙʔωϯτ͚ͩΠϯετʔϧͰ͖Δ
  6. @tosuri13 ͦ͜Ͱsh a dcn/uiͷొ৔ͩʂ ͜ͷ໰୊Λղܾͨ͠UIϥΠϒϥϦ͕sh a dcn/uiͰ͢ɻ sh a dcn/ui͸R

    a dix UIΛϕʔεʹͨ͠UIϥΠϒϥϦͰ͕͢ɺैདྷͷUIϥΠϒϥϦͱ ͸͔ͳΓҧͬͨΞϓϩʔνΛ࢖༻͠·͢ɻ
  7. @tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶃ sh a dcn/ui͸جຊతʹnpxΛ࢖༻ͯ͠ύοέʔδΛ࣮ߦ͢ΔܗͰઃఆ΍ίϯϙʔω ϯτͷ௥ՃͳͲΛߦ͍·͢ɻ εΫϦϓτΛ࣮ߦ͢Δͱίϯϙʔωϯτ΍ϢʔςΟϦςΟɺσβΠϯγεςϜΛ

    ૊ΈࠐΉͨΊͷઃఆͳͲ͕௚઀ϢʔβͷϓϩδΣΫτʹॻ͖ࠐ·Ε·͢ɻ ࢦఆͷσΟϨΫτϦ഑Լʹ ίϯϙʔωϯτ͕࡞੒͞ΕΔ ↑ npxͰ͜Μͳײ͡ͷίϚϯυΛ࣮ߦ͢Δ
  8. @tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶄ ௥Ճͨ͠ίϯϙʔωϯτ͸σϑΥϧτελΠϧͰ࢖༻͢Δ͜ͱ΋Ͱ͖·͢͠ɺؾ ʹೖΒͳ͚Ε͹௚઀ϑΝΠϧΛमਖ਼ͯ͠ɺσβΠϯͷมߋ΍V a ri a

    ntΛ௥Ճ͢ΔΑ ͏ͳ͜ͱ΋ՄೳͰ͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ twMergeͰCSSΛ ௚઀্ॻ͖͢Δ͜ͱ΋Ͱ͖Δ