Tweet
Tweet

Slide 1

Slide 1 text

R a dix UI & sh a dcn/uiͷεεϝ @tosuri13

Slide 2

Slide 2 text

@tosuri13 ࣗݾ঺հ ͱ͢Γ @tosuri13 MOTEXגࣜձࣾ ॴଐ 🐧 ΃Μ͗Μ͕޷͖Ͱ͢

Slide 3

Slide 3 text

UIϥΠϒϥϦʹ͍ͭͯͷ͓࿩Ͱ͢ʂ @tosuri13

Slide 4

Slide 4 text

@tosuri13 ݸਓͷWebαΠτ։ൃʹ͓͚Δ՝୊ ݸਓͰWebαΠτΛ։ൃ͠Α͏ͱͨ࣌͠ʹɺϘλϯ΍υϩοϓμ΢ϯͷσβΠϯ ΍ελΠϦϯάௐ੔ʹۤ࿑ͨ͜͠ͱ͸͋Γ·ͤΜ͔ʁ ΦγϟϨͳελΠϧΛߟ͑Δͷ͸େมͰ͢͠ɺCSSΛॻ͘ʹ΋Կ͔ͱ໘౗Ͱԯ߷ ʹͳΔ͜ͱ͕ଟ͍ͷͰ͸ͱࢥ͍·͢ɻ 🤗 ཧ૝ͷϘλϯ 😭 ݱ࣮ͷϘλϯ

Slide 5

Slide 5 text

@tosuri13 UIϥΠϒϥϦͱ͸ʁ UIϥΠϒϥϦ͸͜ͷΑ͏ͳ໰୊Λղܾ͢ΔͨΊͷϥΠϒϥϦͰ͢ʂ طʹελΠϧ͕ఆٛ͞ΕͨUI ίϯϙʔωϯτΛίʔυʹ૊ΈࠐΉ͚ͩͰɺͱͯ΋ ΦγϟϨͳίϯϙʔωϯτΛ؆୯ʹߏங͢Δ͜ͱ͕Ͱ͖·͢ʂ ៉ྷͳUIίϯϙʔωϯτ͕ ਺ߦͰߏஙͰ͖Δʂ

Slide 6

Slide 6 text

@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Λ಺෦తʹ࢖༻͍ͯ͠ΔͨΊɺ ΧελϜͷελΠϧ΍ΞχϝʔγϣϯͳͲΛ౷߹Ͱ͖Δ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

໰୊ΛղܾͰ͖Δ৽͍͠UIϥΠϒϥϦ͕͋Δʂ @tosuri13

Slide 9

Slide 9 text

@tosuri13 ͦ͜ͰR a dix UIͷొ৔ͩʂ ͜ͷ໰୊఺Λղফ͢ΔͨΊʹੜ·Εͨ֓೦͕ϔουϨεUIͱ͍͏ߟ͑ํͰ͢ɻUI ίϯϙʔωϯτʹ͓͚Δʮݟͨ໨ʯ͸ఏڙͤͣʮৼΔ෣͍ʯͷΈΛఏڙ͠·͢ɻ ϔουϨεUIͱͯ͠୅දతͳUIϥΠϒϥϦ͕R a dix UIͰ͢ʂ

Slide 10

Slide 10 text

@tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶃ R a dix UIͷίϯϙʔωϯτΛ࢖͏͜ͱͰɺσϑΥϧτͷڍಈ΍ΞΫηγϏϦςΟ ͳͲ͕࣮૷ࡁΈͷελΠϧ͕ͳ͍ίϯϙʔωϯτ͕࡞੒͞Ε·͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ ίϯϙʔωϯτͷػೳΛ ࣮૷͢Δඞཁ͸ͳ͍ʂ

Slide 11

Slide 11 text

@tosuri13 R a dix UIͷ࢖͍ํ ͦͷᶄ ޙ͸ͦͷ··CSSΛॻ͍ͨΓT a ilwind CSSͳͲΛ࢖ͬͯελΠϧΛ౰ͯΔ͚ͩ ͰɺΞΫηγϏϦςΟΛҙ͍͍ࣝͨ͠ײ͡ͷUIίϯϙʔωϯτΛ࡞੒͢Δ͜ͱ͕ Ͱ͖·͢ʂ T a ilwind CSSΛ࢖ͬͯ ελΠϧΛ౰ͯΔͱ͜Μͳײ͡ ↑ @r a dix-colorsͱͯ͠ެ։͞Ε͍ͯΔΧϥʔύϨοτΛ ࢖͏͜ͱͰ͍͍ײ͡ͷΧϥʔϨΠΞ΢τΛ࡞੒͢Δ͜ͱ΋Ͱ͖Δ

Slide 12

Slide 12 text

@tosuri13 R a dix UIͷ͍͍ͱ͜Ζ ελΠϧΛࣗ෼Ͱ౰ͯΔඞཁ͸͋Γ·͕͢ɺσβΠϯͷίϯτϩʔϧ͸։ൃऀଆ Ͱࣗ༝ʹ੍ޚ͢Δ͜ͱ͕Ͱ͖·͢ʂ ·ͨɺR a dix UIʹ͸༨ܭͳґଘϥΠϒϥϦ͕ෆඞཁͰ͋Γɺඞཁͳίϯϙʔωϯ τͷΈΠϯετʔϧͯ͠࢖༻Ͱ͖ΔͨΊόϯυϧαΠζ΋࡟ݮ͞Ε·͢ʂ ↑ ཉ͍͠ίϯϙʔωϯτ͚ͩΠϯετʔϧͰ͖Δ

Slide 13

Slide 13 text

@tosuri13 ݁ہελΠϧ౰ͯͳ͍ͱ͍͚ͳ͍ͷ͔… ͱ͸ݴ͑ɺ݁ہR a dix UIΛ࢖ͬͯ΋Ұ͔ΒCSSΛࣗ෼Ͱॻ͔ͳ͍ͱ͍͚ͳ͍ͷ ͔…ͱࢥͬͨํ͕͍Βͬ͠ΌΔ͔ͱࢥ͍·͢ɻ PropsͳͲͷAPIΛ௨ͯ͡ελΠϧΛఏڙ͢ΔҎ্ɺ࢓ํ͕ͳ͍ͷͰ͠ΐ͏͔… ← ࣮͸@r a dix-themeͱ͍͏طʹελΠϧ͕ ౰͍ͨͬͯΔίϯϙʔωϯτ΋༻ҙ͞Ε͍ͯΔ͕ PropsʹΑΔݶఆతͳ੍ޚʹͳΔͨΊඍົ

Slide 14

Slide 14 text

@tosuri13 ͦ͜Ͱsh a dcn/uiͷొ৔ͩʂ ͜ͷ໰୊Λղܾͨ͠UIϥΠϒϥϦ͕sh a dcn/uiͰ͢ɻ sh a dcn/ui͸R a dix UIΛϕʔεʹͨ͠UIϥΠϒϥϦͰ͕͢ɺैདྷͷUIϥΠϒϥϦͱ ͸͔ͳΓҧͬͨΞϓϩʔνΛ࢖༻͠·͢ɻ

Slide 15

Slide 15 text

@tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶃ sh a dcn/ui͸جຊతʹnpxΛ࢖༻ͯ͠ύοέʔδΛ࣮ߦ͢ΔܗͰઃఆ΍ίϯϙʔω ϯτͷ௥ՃͳͲΛߦ͍·͢ɻ εΫϦϓτΛ࣮ߦ͢Δͱίϯϙʔωϯτ΍ϢʔςΟϦςΟɺσβΠϯγεςϜΛ ૊ΈࠐΉͨΊͷઃఆͳͲ͕௚઀ϢʔβͷϓϩδΣΫτʹॻ͖ࠐ·Ε·͢ɻ ࢦఆͷσΟϨΫτϦ഑Լʹ ίϯϙʔωϯτ͕࡞੒͞ΕΔ ↑ npxͰ͜Μͳײ͡ͷίϚϯυΛ࣮ߦ͢Δ

Slide 16

Slide 16 text

@tosuri13 sh a dcn/uiͷ࢖͍ํ ͦͷᶄ ௥Ճͨ͠ίϯϙʔωϯτ͸σϑΥϧτελΠϧͰ࢖༻͢Δ͜ͱ΋Ͱ͖·͢͠ɺؾ ʹೖΒͳ͚Ε͹௚઀ϑΝΠϧΛमਖ਼ͯ͠ɺσβΠϯͷมߋ΍V a ri a ntΛ௥Ճ͢ΔΑ ͏ͳ͜ͱ΋ՄೳͰ͢ɻ νΣοΫ͞Εͯͳ͍ঢ়ଶ νΣοΫ͞Ε͍ͯΔঢ়ଶ twMergeͰCSSΛ ௚઀্ॻ͖͢Δ͜ͱ΋Ͱ͖Δ

Slide 17

Slide 17 text

@tosuri13 sh a dcn/uiͷ͍͍ͱ͜Ζ R a dix UIͷྑ͍ͱ͜ΖΛ཈͑ͭͭɺσϑΥϧτͰͦͷ··࢖͑ΔΑ͏ʹͯ͠΄͠ ͍ʂͱ͍͏ϫΨϚϚͳཁ๬ʹ΋Ԡ͑Δ͜ͱ͕Ͱ͖·͢ɻ ͨͩɺϢʔβଆͷॊೈͳΧελϚΠζʹରԠ͢ΔͨΊɺT a ilwind CSSͷར༻͕ඞ ਢʹͳ͍ͬͯΔ఺͚ͩ஫ҙ͕ඞཁͰ͢ɻ

Slide 18

Slide 18 text

·ͱΊ @tosuri13

Slide 19

Slide 19 text

@tosuri13 ·ͱΊ ࠓճ৭ʑͱUIϥΠϒϥϦΛ঺հ͖ͯ͠·͕ͨ͠ɺ݁ہԿΛબ΂͹ྑ͍ͷ͔͸ཁ݅ ʹ߹Θͤͯࣗ਎Ͱ൑அ͢Δඞཁ͕͋Γ·͢ʂ ϔουϨεUIͳUIϥΠϒϥϦΛ࢖༻ͨ͜͠ͱͷͳ͍ํ͕͍Ε͹ɺҰ౓R a dix UI΍ sh a dcn/uiΛ࢖ͬͯݟͯ΄͍͠Ͱ͢ʂ

Slide 20

Slide 20 text

@tosuri13 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!