新規モバイルアプリを React Native for Web で Web 対応した話

৽نϞόΠϧΞϓϦΛ 3FBDU/BUJWF GPS8FCͰ 8FCରԠͨ͠࿩ ,B[VOPCV,BXBOF 3FBDU/BUJWF.BUTVSJ

© JMDC Inc. ࣗݾ঺հ Kazunobu Kawane גࣜձࣾ +.%$ϢʔβʔϓϥοτϑΥʔϜ։ൃ෦ Accounts w
5XJUUFS!GMBU@ w (JU)VCLLBXBOF Favorites w ΧϨʔिͰ৯΂Δ 2

© JMDC Inc. ͓࿩͢͠Δ͜ͱ w 3FBDU/BUJWFGPS8FCʹ͍ͭͯ w 3FBDU/BUJWFGPS8FCΛ࠾༻ͨ͠ཧ༝ w 8FCͰ3FBDU/BUJWFΛ࢖͏ࡍʹ΍ͬͨ͜ͱ
4

© JMDC Inc. ର৅ऀ w 3FBDU/BUJWFΛ࢖ͬͯ6*։ൃΛ͍ͯ͠Δํ w 3FBDUΛ࢖ͬͨ6*։ൃΛ͍ͯ͠Δɺ3FBDU/BUJWFʹڵຯ͕͋Δํ w ΫϩεϓϥοτϑΥʔϜ։ൃʹڵຯ͕͋Δํ
5

© JMDC Inc. 3FBDU/BUJWFGPS8FCͱ͸ 3FBDU/BUJWFGPS8FCJTBDPNQBUJCJMJUZMBZFS CFUXFFO3FBDU%0.BOE3FBDU/BUJWF 3FBDU%0.Λ࢖༻ͯ͠ɺ3FBDU/BUJWFͷ+BWB4DSJQUίʔυΛ8FCϒϥ΢βͰϨϯ μϦϯά͢ΔͨΊͷϥΠϒϥϦ OPSNBMJ[FDTTͷ࡞ऀɺ/JDPMBT(BMMBHIFS࡞ 7

© JMDC Inc. )5.-ΑΓ௚ײతͳλά // Plane React   <div>  
<p>Hello World</p>   </div>     // React Native   <View>   <Text>Hello World</Text>   </View> 12

© JMDC Inc. BDDFTTJCJMJUZ3PMFͰηϚϯςΟοΫ)5.-ʹ΋ରԠ <View accessibilityRole="section">   <Text accessibilityRole="heading">heading</Text>  
<Text accessibilityRole="paragraph">This is an article</Text>   </View>     /*   <section>   <h1>title</h1>   <div role="paragraph">This is paragraph</div>   </section>   */ 13

© JMDC Inc. 4UZMF1SPQTʹΑΔϓϩύςΟʔͷ੍ݶ 7JFXʹ౰ͯΒΕΔ4UZMFͱ5FYUʹ౰ͯΒΕΔελΠϧ͕ɺ1SPQTʹΑΓ۠ผ͞Ε͍ͯΔ return (   <View style={styles.container}>
  <Text>Hello World</Text>   </View>   );     const styles = StyleSheet.create({   container: {   color: '#FF0000' // color͸ ViewStyleͷpropsʹఆٛ͞Ε͍ͯͳ͍ͷͰerrorʹ  },   }); ελΠϦϯάͷείʔϓ͕ߜΒΕΔͷͰίϯϙʔωϯτࢤ޲ͷ(6*։ൃͱ૬ੑྑ͠ 14

© JMDC Inc. 4UZMFΛ഑ྻͰϚʔδͰ͖Δ return (   <View style={[styles.container, {backgroundColor:
#FFF}]}>   <Text>Hello World</Text>   </View>   ); 15

© JMDC Inc. $PSF$PNQPOFOU͕༏ल w ཁૉΛғΉ͚ͩͰࢠཁૉ͕εΫϩʔϧ ίϯςϯπʹͳΔ4DSPMM7JFX w ғͬͨཁૉ΁ͷλονΛෆಁ໌౓ͷݮ গͰϑΟʔυόοΫͯ͘͠ΕΔ
5PVDIBCMF0QBDJUZ w ແݶεΫϩʔϧͰͷ௥ՃಡΈࠐΈ΍ QVMM5P3FGSFTIͷαϙʔτ͞ΕͨϦε τදࣔ༻6*'MBU-JTU 16

© JMDC Inc. ࢀߟࢿྉ (6*ͱͯ͠ͷ3FBDU/BUJWF͸ɺࡢ೥ͷࡇΓͷηογϣϯΛࢀߟʹʂʂ 3FBDU/BUJWFGPS8FCͷ͜Ε·Ͱ͔ΒಡΈղ͘3FBDU(6*ͷ͜Ε͔Β :VLJZB/BLBHBXB͞Μ IUUQTTQFBLFSEFDLDPNOL[OSFBDUOBUJWFGPSXFCGBMTFLPSFNBEFLBSBEVNJKJFLVSFBDUHVJGBMTFLPSFLBSB 8FCΦϯϦʔͷϓϩμΫτͰ΋3FBDU/BUJWFGPS8FC͸ً͘ TBXB[FO͞Μ
IUUQTTQFBLFSEFDLDPNTBXB@[FOSFBDUOBUJWFXFC 17

© JMDC Inc. ࠾༻ࣄྫ 5XJUUFS 6CFS .-4TPDDFSDPN TUBOEGN ٕज़ॻయ ͳͲͳͲ௒༗໊ͳαʔϏε΋
19

© JMDC Inc. ޓ׵ϥΠϒϥϦ w /BUJWF#BTF΍3FBDU/BUJWF1BQFSͳͲͷओཁͳ6*ϥΠϒϥϦ w 3FBDU/BUJWF޲͚ͷը໘ભҠϥΠϒϥϦɺ3FBDU/BWJHBUJPO͸࣮ݧత͕ͩαϙʔτ ͞Ε͍ͯΔʢࠓͷॴ໰୊͸֬ೝͰ͖͍ͯͳ͍ʣ w
3FBDU/BUJWF༻ͷϥΠϒϥϦΛҰཡͰ͖Δ3FBDU/BUJWF%JSFDUPSZͱ͍͏αΠτ Ͱɺ֤ϥΠϒϥϦͷ8FCରԠঢ়گΛ֬ೝͰ͖Δ 20

© JMDC Inc. ܦҢ ࡢ೥͔Β৽نϓϩμΫτ্ཱͪ͛ͷاըΛਐΊ͍ͯͨ ৽نϓϩμΫτ͸ɺΞϓϦέʔγϣϯͷಛੑͱࡢࠓͷϢʔβʔঢ়گΛؑΈɺϞόΠϧΞ ϓϦϑΝʔετͰਐΊΔܭըͱͳͬͨ w J04Ͱ͸ɺ)FBMUI,JUΛσʔλऔಘʹ׆༻͍ͨ͠ w
QVTI௨஌Λ׆༻͍ͨ͠ 24

© JMDC Inc. ΦϯϘʔσΟϯά࣌ͷ69͕伴 w ΞϓϦΛར༻Ͱ͖ΔΑ͏ʹͳΔલʹɺձһొ࿥ޙͷͦͦ͜͜௕͍Ξϯέʔτʹղ౴͢ Δ͜ͱ͕ඞਢͷαʔϏεઃܭ w ϦϦʔεޙͷॳظϑΣʔζͰ͸ɺΦϯϘʔσΟϯάͷෛՙΛద੾ʹௐ੔͠ɺϢʔβʔ͕ ແཧͳ͘Ξϯέʔτ΁ͷղ౴Λ׬ྃͰ͖ΔΑ͏ʹௐ੔͢Δඞཁ͕͋Δ
27

© JMDC Inc. ΞϓϦͰͷ69ݕূͷ໰୊఺ ΞϓϦͷϦϦʔεʹ͸ετΞͷ৹ࠪΛ଴ͭඞཁ͕͋Δ w &YQPͷ05"VQEBUF͸ʁ w ৹ࠪΛল͘͜ͱ͸Ͱ͖Δ͕ɺΠϯετʔϧ͔ͯ͠Βॳճͷىಈʹ͸05"VQEBUF ͕൓ө͞Εͳ͍ͷͰɺձһొ࿥ϑϩʔͷ࠷దԽͳͲॳظϢʔβʔ޲͚ͷԾઆݕূ
ʹ͸ෆ޲͖ ॳճϦϦʔε͔ΒετΞͷ৹ࠪج४Λຬͨ͢඼࣭ͷඞཁ w ྫʣୀձಈઢ͕ΞϓϦ಺ʹͳ͍ͱSFKFDU͞ΕΔͳͲʜ 28

© JMDC Inc. 3FBDU/BUJWFGPS8FCͰԾઆݕূ͢ΔϝϦοτ w ॳճϦϦʔε͕ 8FCͳͷͰݕূ։࢝·Ͱͷ࡞ۀ͕ܰ͘ࡁΉ w Ծઆݕূ࣌ͷΞοϓσʔτʹ৹ࠪΛ௨͢ඞཁ͕ͳ͍ w
8FC൛ϦϦʔε࣌ʹ࡞੒ͨ͠ 6*ίϯϙʔωϯτΛωΠςΟϒϦϦʔε࣌ʹྲྀ༻Ͱ͖ Δ 30

© JMDC Inc. ϥΠϒϥϦͷΠϯετʔϧ $ npm install react-dom react-native-web SFBDUOBUJWFXFCʹՃ͑ͯϨϯμϦϯάΛߦ͏SFBDUEPNͷΠϯετʔϧ͕ඞཁ
OQNʹ͋ΔSFBDUOBUJWFGPSXFC͸ผύοέʔδͳͷͰ஫ҙ 33

© JMDC Inc. 8FC༻ʹϏϧυ # Expo SDK 45 $ npx
expo export:web # ~Expo SDK 44 (Classic build) $ npx expo build:web Ҏ্ʂ &YQPΛ࢖༻͍ͯ͠Δ৔߹ɺ41"༻ͷ JOEFYIUNMͷ࡞੒΍ 8FCQBDLͷઃఆϑΝΠϧͷ ࡞੒͸ෆཁ 34

© JMDC Inc. ⚠ SFBDUOBUJWFΛ࢖༻ͯ͠ 6*ίϯϙʔωϯτΛ࡞੒͢Δ৔߹͸ɺ࢖༻͍ͯ͠Δपล πʔϧʹ SFBDUOBUJWFΛ SFBDUOBUJWFXFCͱͯ͠ղܾ͢ΔΑ͏ɺΤΠϦΞεઃఆΛ͢ Δඞཁ͋Γ
alias: {   'react-native$': 'react-native-web'   } 35

© JMDC Inc. ࣮ྫɿ4UPSZCPPLͷ৔߹ module.exports = {   webpackFinal: (config)
=> {   // WebpackͷAliasઃఆ  config.resolve.alias = {   "react-native$": "react-native-web",   };     // react-native-webʹม׵͢Δ͜ͱͰมߋ͞ΕΔ֦ுࢠΛղܾ͢Δ  config.resolve.extensions.unshift(".web.js");     return config;   },   }; 36

© JMDC Inc. ෦෼తʹ࣮૷Λ෼͚ͨ 3FBDU/BUJWFͰ͸ɺ1MBUGPSNϞδϡʔϧΛ࢖༻ͯ͠ϓϥοτϑΥʔϜݻ༗ͷίʔυΛ࣮૷Ͱ͖Δ import { Platform } from
'react-native'; --- লུ --- {Platform.OS === 'ios' && return <WebComponent /> } {Platform.OS === 'android' && return <NativeComponent /> } 38

© JMDC Inc. ͜ΕΛར༻ͯ͠8FCͱ/BUJWFͷ࣮૷Λ੾Γ෼͚ͨ import { Platform } from 'react-native';
--- লུ --- {Platform.OS === 'web' && return <WebComponent /> } {Platform.OS === 'native' && return <NativeComponent /> } ͪΐͬͱͨ͜͠ͱͳΒ͜ΕͰ0, 👌 40

© JMDC Inc. ࣮૷ΛϑΝΠϧ͝ͱ෼͚ͨ 3FBDU/BUJWFʹ͸ɺϩʔυ͢ΔϑΝΠϧͷ֦ுࢠΛݕग़͠ɺؔ࿈͢ΔϓϥοτϑΥʔϜ ͷϑΝΠϧΛϩʔυ͢Δػೳ͕͋Δ .ios.ts .android.ts .macos.ts .windows.ts
.web.ts .native.ts 41

© JMDC Inc. ྫ͑͹ԼهͷϑΝΠϧΛ LoginPage.web.tsx LoginPage.tsx ҎԼͷΑ͏ʹ֦ுࢠͳ͠Ͱϩʔυͯ͠ৼΓ෼͚Δ͜ͱ͕Ͱ͖Δ import LoginPage from
“./LoginPage"; 42

© JMDC Inc. ಺෦࣮૷ΛಡΜͰΈͨ • react-native-msal͕ wrap ͍ͯ͠ΔϥΠϒϥϦͷϙοϓΞοϓ΢Πϯυ΢Λ࢖ͬͨ ೝূϝιουʹ໰୊͕͋Γͦ͏ w
XSBQ͞Ε͍ͯΔϥΠϒϥϦʹ͸ϙοϓΞοϓ΢Πϯυ΢Λ࢖ͬͨೝূҎ֎ʹɺϝΠϯ ΢Πϯυ΢ΛϦμΠϨΫτͤ͞Δೝূϝιου΋ఆٛ͞Ε͍ͯΔΑ͏ 46

© JMDC Inc. 8FCϒϥ΢β༻ͷ࣮૷Λ੾Γ෼͚ͨ SFBDUOBUJWFNTBM͕ XSBQ͍ͯ͠ΔϥΠϒϥϦΛ௚઀࢖༻ͨ͠ XFC༻ͷ IPPLT • src/hooks/useAuthClient.ts
SFBDUOBUJWFNTBMΛ࢖༻ͨ͠ OBUJWF༻ͷ IPPLT • src/hooks/useAuthClient.native.ts ͜͏JNQPSU͢Ε͹ 0,👌 JNQPSU\VTF"VUI$MJFOU^GSPNl!IPPLTVTF"VUI$MJFOU 49

© JMDC Inc. ·ͱΊ w 3FBDU/BUJWFGPS8FC͸ɺ3FBDU/BUJWFޓ׵ͷ+BWBTDSJQUίʔυΛ࢖ͬͯ8FCϒϥ΢β ͷ6*Λ࡞੒Ͱ͖Δ w /BUJWF༝དྷͷ༏लͳ(6*ϥΠϒϥϦΛ࢖͑Δ w
8FCͱ/BUJWFͷ6*ίϯϙʔωϯτΛڞ௨ԽͰ͖Δ w 3FBDU/BUJWFGPS8FC͸ɺΞϓϦͷԾઆݕূΛ8FCͰΫΠοΫʹߦ͏खஈͱͯ͠΋͓͢͢Ί w 8FCͰ/BUJWF༻ͷϥΠϒϥϦΛ࢖͏৔߹͸ɺଟগπϥϛ͕͋Δ͕ͳΜͱ͔ͳΔʢ୯ʹΫϩεϓ ϥοτϑΥʔϜ։ൃͷπϥϛͰɺ8FCΦϯϦʔͰ3FBDU/BUJWFGPS8FCΛ࢖͏৔߹͸շదʣ 53

© JMDC Inc. 55 8&"3&)*3*/( શํҐͰੵۃ࠾༻த ΧδϡΞϧ໘ஊ΋͍ͯ͠ΔͷͰɺ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞ ͦͷଞͷΤϯδχΞ IUUQTISNPTDPQBHFTKNEDKPCT DBUFHPSZ
ϞόΠϧΞϓϦΤϯδχΞ IUUQTISNPTDPQBHFTKNED KPCT 55

© JMDC Inc. ࢀߟ 3FBDU/BUJWFGPS8FC IUUQTOFDPMBTHJUIVCJPSFBDUOBUJWFXFC 3FBDU/BUJWF IUUQTSFBDUOBUJWFEFW 3FBDU/BUJWF%JSFDUPSZ IUUQTSFBDUOBUJWFEJSFDUPSZ
&YQP IUUQTEPDTFYQPEFW 4UPSZCPPL IUUQTTUPSZCPPLKTPSH 3FBDU/BUJWF.4"- IUUQTHJUIVCDPNTUBTIFOFSHZSFBDUOBUJWFNTBM 57

新規モバイルアプリを React Native for Web で Web 対応した話

新規モバイルアプリを React Native for Web で Web 対応した話

Other Decks in Programming

Featured

Transcript