Tweet
Tweet

Slide 1

Slide 1 text

WebΦϯϦʔͷϓϩμΫτͰ΋ React Na*ve for Web ͸ً͘ גࣜձࣾ Topotal CDO @sawa-zen @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 1

Slide 2

Slide 2 text

@sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰ • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷ ෺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 2

Slide 3

Slide 3 text

@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 3

Slide 4

Slide 4 text

React Na(ve for Web ࢖ͬͯ·͔͢ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 4

Slide 5

Slide 5 text

ࢲ͸ΊͪΌͪ͘Ό࢖ͬͯ·͢ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 5

Slide 6

Slide 6 text

ਖ਼௚͋·Γฉ͔ͳ͍Ͱ͢ΑͶʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 6

Slide 7

Slide 7 text

༗໊Ͳ͜Ζ͕࢖ͬͯ͸͍Δ͕ࣄྫ͕গͳ͍ Twi$er Uber Eats Orders @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 7

Slide 8

Slide 8 text

ͳͥ࢖ΘΕͳ͍ͷ͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 8

Slide 9

Slide 9 text

∵ React Na(ve ͱ Web ͷ ίʔυڞ௨Խπʔϧͱޡղ͞Ε͍ͯΔͨΊ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 9

Slide 10

Slide 10 text

ޡղ͔Βੜ·ΕΔωΨςΟϒͳҹ৅ • ͏ͪ͸ΞϓϦҰຊ͔ͩΒͳ͊... • iOS ͱ Android ͷڞ௨Խ͚ͩͰ΋େมͳͷʹ... ∴ ݟ޲͖΋͞Εͳ͍ ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10

Slide 11

Slide 11 text

ࢥ͍ग़ͯ͠ཉ͍͠ ⛔ Write once, run anywhere ✅ Learn Once, Write Anywhere @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11

Slide 12

Slide 12 text

@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 12

Slide 13

Slide 13 text

web-only Ͱ΋ྑ͍ΜͰ͢ʂ ! ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 13

Slide 14

Slide 14 text

Ͱ͸ݟํΛม͑ͯΈΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 14

Slide 15

Slide 15 text

React Na(ve for Web Λ ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠ ݟΔͱͲ͏͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15

Slide 16

Slide 16 text

Good points ϑϩϯτΤϯυࢹ఺Ͱݟͨྑ͔ͬͨ఺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 16

Slide 17

Slide 17 text

Good points ① ϛχϚϧͰચ࿅͞Εͨઃܭ • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞ • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍ • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17

Slide 18

Slide 18 text

Good points ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ • role Λઃఆ͢Ε͹ద੾ͳ DOM ʹม׵ͯ͘͠ΕΔ • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop Λޙ෇͚ͰରԠͰ͖Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18

Slide 19

Slide 19 text

Good points ③ ॏෳͨ͠ CSS ͷ࠷దԽ • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ CSS ͸࢖͍ճ͞ΕΔ 1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ 2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ • Tailwind ͱ͍ۙײ֮ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19

Slide 20

Slide 20 text

@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20

Slide 21

Slide 21 text

Good points ④ style ͷ্ॻ͖ͷ͠΍͢͞ • ഑ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞ • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ • clsx • classnames @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 21

Slide 22

Slide 22 text

ফ໣ points ϑϩϯτΤϯυࢹ఺ͰݟͨΊΜͲ͏ͩͬͨ఺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 22

Slide 23

Slide 23 text

ফ໣ points ① media query ͕ RN ʹແ͍ • react-responsive ͳͲΛ࢖͑͹͍ۙ͜ͱ͸Ͱ͖Δ • SSR ΍ SSG ͷॳճඳըͰ͸ը໘෯͕Θ͔Βͳ͍ • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞ΢τγϑτ͕ى͜Δ • LP ΍ ίʔϙϨʔταΠτʹ͸޲͍͍ͯͳ͍ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23

Slide 24

Slide 24 text

ফ໣ points ② ٙࣅΫϥε͕ RN ʹແ͍ • CSS ͷ :hover, :focus ͳͲ͕࢖͑ͳ͍ • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ Χϧ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24

Slide 25

Slide 25 text

ফ໣ points ② ͷղܾࡦ: ϋϯυϥΛ࢖͏ • ࣮͸ RN for Web ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ • onHoverIn, onHoverOut • onFocus, onBlur • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25

Slide 26

Slide 26 text

@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26

Slide 27

Slide 27 text

ফ໣ points ③ position: fixed; ͕ RN ʹແ͍ • ܕΤϥʔʹͳΔ • any ΍ as Ͱಀ͛ͨ͘ͳΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27

Slide 28

Slide 28 text

ফ໣ points ③ ͷղܾࡦ1: ઃܭΛݟ௚͢ ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏ 1. absolute ͡ΌͩΊͳͷ͔? 2. Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔? 3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔? @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28

Slide 29

Slide 29 text

ফ໣ points ③ ͷղܾࡦ2: ܕͷΦʔόʔϥΠυ import 'react-native' declare module 'react-native' { interface ViewStyle { position: 'relative' | 'absolute' | 'fixed' } } @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 29

Slide 30

Slide 30 text

ফ໣ points ④ linear-gradient ͕ RN ʹແ͍ • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍ • background: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30

Slide 31

Slide 31 text

ফ໣ points ④ ͷղܾࡦ: backgroundImage Λ࢖͏ • linear-gradient() ͸ͦ΋ͦ΋ը૾σʔλܕΒ͍͠ • url() ͱಉ༷ backgroundImage: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31

Slide 32

Slide 32 text

etc... @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32

Slide 33

Slide 33 text

ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋ • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏ • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞ ΕΔະདྷ͕͍͔ͭ͘Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33

Slide 34

Slide 34 text

RN ͱͷڞ௨ԽͷͨΊͷ෍ੴ React GUI ΁ͷ෍ੴ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 34

Slide 35

Slide 35 text

·ͱΊ • React Na(ve for Web ͸ web-only Ͱ΋ OK • Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ • ଟগͷফ໣͸൐͏͕ͳΜͱ͔ͳΓͦ͏ • React GUI ʹظ଴ " @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35