Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

© JMDC Inc. +.%$ʹ͍ͭͯ JMDC 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

© JMDC Inc. 3FBDU/BUJWFGPS8FCʹ͍ͭͯ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

© JMDC Inc. ϓϨʔϯͳ3FBDU$PNQPOFOUͷ8FCϒϥ΢β΁ͷϨϯμϦϯά 8

Slide 9

Slide 9 text

© JMDC Inc. 3FBDU/BUJWF$PNQPOFOUͷ8FCϒϥ΢β΁ͷϨϯμϦϯά 9

Slide 10

Slide 10 text

© JMDC Inc. ൺֱ 10

Slide 11

Slide 11 text

© JMDC Inc. ͭͷେ͖ͳར఺ 3FBDU/BUJWFͷ(6*ϥΠϒϥϦΛ࢖ͬͯ8FCΞϓϦΛ։ൃͰ͖Δ )5.-λάΑΓ௚ײతͳΠϯλʔϑΣΠεͱɺωΠςΟϒ༝དྷͷඪ४6* ωΠςΟϒΞϓϦͱ8FCΞϓϦͷίʔυΛڞ௨ԽͰ͖Δ 3FBDU/BUJWFͰ࡞੒ͨ͠ίʔυ͸ɺ౰વJ04ɾ"OESPJEʹྲྀ༻Ͱ͖Δ 11

Slide 12

Slide 12 text

© JMDC Inc. )5.-ΑΓ௚ײతͳλά // Plane React 


Hello World


 
 // React Native 
 
 Hello World 
 12

Slide 13

Slide 13 text

© JMDC Inc. BDDFTTJCJMJUZ3PMFͰηϚϯςΟοΫ)5.-ʹ΋ରԠ 
 heading 
 This is an article 
 
 
 /* 
 


title

This is paragraph

 
 */ 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

© JMDC Inc. 4UZMFΛ഑ྻͰϚʔδͰ͖Δ return ( 
 
 Hello World 
 
 ); 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

© JMDC Inc. 8FCͱ/BUJWFͷ6*ίϯϙʔωϯτΛڞ௨Խ 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

© JMDC Inc. 21

Slide 22

Slide 22 text

© JMDC Inc. ωΠςΟϒΞϓϦ༝དྷͷ(6*Λ8FCΞϓϦ։ൃʹ࣋ͪࠐΊɺωΠςΟϒΞϓϦͱ 8FCΞϓϦͷ6*ίϯϙʔωϯτΛڞ௨ԽͰ͖Δ˕ 22

Slide 23

Slide 23 text

© JMDC Inc. 3FBDU/BUJWFGPS8FCΛ࠾༻ͨ͠ཧ༝

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

© JMDC Inc. 3FBDU/BUJWFͷຊ൪ӡ༻ࣄྫ ࣗ෦ॺͰ͸ 1FQVQͱ͍͏αʔϏεͷ 3FBDU/BUJWF੡ΞϓϦΛɺຊ൪ӡ༻ ͍ͯ͠Δ 25

Slide 26

Slide 26 text

© JMDC Inc. ͋ͱඞཁͳͷ͸ʁ w νʔϜʹ3FBDU/BUJWFͰͷ։ൃ஌ݟ͸͋Δ w ϚωλΠζͷݟཱͯ΋ཱͯΒΕΔ ͋ͱඞཁͳͷ͸Ϣʔβʔʹ࢖ͬͯ΋Β͑Δ͔Ͳ͏͔ΛԾઆݕূ͢Δ͜ͱ 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

© JMDC Inc. ͦ͏ͩɺ8FCͰԾઆݕূ͠Α͏ 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

© JMDC Inc. 8FCͰ 3FBDU/BUJWFΛ࢖͏ࡍʹ΍ͬͨ͜ͱ

Slide 32

Slide 32 text

© JMDC Inc. ·ͣ͸ಋೖ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

© 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

Slide 37

Slide 37 text

© JMDC Inc. 8FCରԠ͍ͯ͠ͳ͍ϥΠϒϥϦʹରॲ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

© JMDC Inc. 1MBUGPSNϞδϡʔϧʹ͸Լهͷ 045ZQF͕ఆٛ͞Ε͍ͯΔ export type PlatformOSType = 
 | "ios" 
 | "android" 
 | "macos" 
 | "windows" 
 | "web" 
 | “native"; 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

© JMDC Inc. ࣮ྫɿೝূϥΠϒϥϦΛ࢖༻͢Δ$VTUPNIPPLΛ෼͚ͨ 3FBDU/BUJWF༻ͷ .JDSPTPGU"VUIFOUJGJDBUJPOϥΠϒϥϦɺreact-native-msal ͕ɺ8FCͰ૝ఆ௨Γಈ͔ͳ͔ͬͨ ϙοϓΞοϓ΢Πϯυ΢಺Ͱ֎෦ೝূޙɺϙοϓΞοϓ΢Πϯυ΢಺ʹϦμΠϨΫτ͠ ͯ͠·͏😇 43

Slide 44

Slide 44 text

© JMDC Inc. 44

Slide 45

Slide 45 text

© JMDC Inc. 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

© JMDC Inc. 47

Slide 48

Slide 48 text

© JMDC Inc. ͔͠͠ SFBDUOBUJWFNTBM͔ΒϦμΠϨΫτ༻ͷϝιουΛݺͿखஈ͕ͳ͍ʜ ͔͠΋ϥΠϒϥϦ͸ archive ͞Ε͍ͯͯɺ௚Δؾ഑͕ͳ͍😇 48

Slide 49

Slide 49 text

© 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

Slide 50

Slide 50 text

© JMDC Inc. 50

Slide 51

Slide 51 text

© JMDC Inc. 51

Slide 52

Slide 52 text

© JMDC Inc. Ͳ͜·ͰίʔυΛڞ௨Խ͠ɺͲ͔͜Βग़͠෼͚Δ͔͸೰ΈͲ͜Ζ 52

Slide 53

Slide 53 text

© 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

Slide 54

Slide 54 text

© JMDC Inc. 🥰ΈΜͳ3FBDU/BUJWFGPS8FCΛ࢖͓͏ʂ🥰 54

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

© JMDC Inc. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 57

Slide 57 text

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