React NativeでCross Platform対応を頑張る話

by tkow

Slide 1

Slide 1 text

ULPX 3FBDU/BUJWFͰ$SPTT 1MBUGPSNΛؤுΔ࿩

Slide 2

Slide 2 text

1SPGJMF ίʔϙϨʔταΠτIUUQTNPDIJDPSQDPN ϑϦʔϥϯε͔Β ڞಉ૑ۀऀͱͱ΋ʹ ๏ਓ੒Γͨ͠ձࣾͰ   $50΍͍ͬͯ·͢ डୗ։ൃΛ΍Γͳ͕Β   3/Ͱࣗࣾ։ൃΛͯ͠·͢   ಉ໊ͷձ͕ࣾ͋ΔͷͰ   ؒҧ͍ʹؾΛ͚͍ͭͯͩ͘͞ 4&0ͷऑ͍ํͷ.0$)*Ͱ͢  

Slide 3

Slide 3 text

$SPTT1MBUGPSNରԠͷϞνϕʔγϣϯ ࣗࣾ։ൃͰ࡞͍ͬͯΔΞϓϦέʔγϣϯΛٸᬎϞόΠϧ"QQʹ͍ͨ͠ w ϓϩτλΠϓͰ࡞ͬͨΞϓϦΛϨεϙϯγϒରԠ͢Δʹ͋ͨͬͯͲ͏ͤϞόΠ ϧΞϓϦ΋ͭ͘ΔͳΒ3FBDU/BUJWF8FC࢖ͬͯΈ·͔͢ͱ͍͏ϊϦͰ͢ w ΋͏8FCͰ͋Δఔ౓࡞ͬͯ͠·ͬͨ͠ɺ෦෼తʹ3FBDU/BUJWF8FCίϯϙ ʔωϯτΛ࡞੒͠ஔ͖׵͑Δࣄʹ w Ͳ͏ͤͳΒࠓޙ΋༷ʑͳγʔϯͰ࢖͑Δ͍͚ͯΔίϯϙʔωϯτϥΠϒϥϦΛ ࡞Ζ͏ͱ͍͏͜ͱͰNPOPSFQPʹQBDLBHFΛੜ΍ͯ͠Έͨ

Slide 4

Slide 4 text

3FBDU/BUJWF8FC w 3FBDU/BUJWF͕FYQPSU͍ͯ͠ΔϞδϡʔϧ಺ͷ࣮૷ͷΠϯλʔϑΣʔεʹ฿ ͬͯಉ͡ه๏Ͱ8&#Ͱ࢖͑ΔίϯϙʔωϯτΛ࣮૷ͨ͠ϥΠϒϥϦ w ͜ΕʹΑͬͯιʔείʔυ্ͷ*NQPSUdGSPNbSFBDUOBUJWF`ΛίϯύΠϧ࣌ ʹSFBDUOBUJWFXFCʹࠩ͠ସ͑Δͱ͍͏࢓૊ΈͰ/BUJWF$PNQPOFOUͰ͸ͳ ͘3FBDU/BUJWF8FC$PNQPOFOUʹεΠονͰ͖ΔʢCBCFM XFCQBDLͳͲ ͷBMJBTΛ༻͍Δʣ w ࣮૷͸શͯXFCͷ"1*ͷൣғͰ࣮૷͞Ε͍ͯΔͷͰSFBDUOBUJWFύοέʔδ͸ ඞཁͳ͍

Slide 5

Slide 5 text

3FBDU/BUJWF8FC w ύοέʔδͱͯ͠ίϯϙʔωϯτΛCVJMEͯ͠࢖͏   ɹCBCFM౳ͰUSBOTQJMFͯ͠ϥΠϒϥϦԽ͢ΔPSUSBOTQJMFʹ   ɹύοέʔδ಺ͷίʔυΛ഑ஔͯ͠ר͖ࠐΉ w ࠷ॳ͔Β3FBDU/BUJWFͱซ༻͢Δ   ɹOQYDSFBUFSFBDUOBUJWFXFCBQQ"QQ/BNF ηοςΟϯά̎ύλʔϯ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

1SPKFDUߏ੒ ᵓᴷᴷ3&"%.&NE ᵓᴷᴷMFSOBKTPO ᵓᴷᴷQBDLBHFKTPO ᵓᴷᴷQBDLBHFT ᴹᵓᴷᴷBENJODMJ ᴹᵓᴷᴷBENJOVUJMT ᴹᵓᴷᴷCBDLFOE ᴹᵓᴷᴷDPSF ᴹᵓᴷᴷNPCJMF ᴹᵓᴷᴷDSPTTQMBUGPSN ᴹᵋᴷᴷXFC ᵓᴷᴷUTDPO fi HKTPO ᵓᴷᴷZBSOFSSPSMPH ᵋᴷᴷZBSOMPDL MFSOBʹΑΔ.POP3FQPߏ੒ ͜͜ʹ$SPTT1MBUGPSN༻ͷϩδοΫͱ ίϯϙʔωϯτΛߏ੒͢Δ͜ͱʹ

Slide 8

Slide 8 text

5ZQFTDSJQUରԠ w !UZQFTSFBDUOBUJWFΛJOTUBMM͢Ε͹BMJBT͕ઃఆ͞Ε͍ͯͯ΋!UZQFT SFBDUOBUJWFͷܕఆٛΛಡΜͰ͘ΕΔͷͰ͜ΕΛར༻͢Δ w SFBDUOBUJWFXFCʹ͸ܕఆ͕ٛͳ͍ͷͰɺQMBUGPSN෼ذͰSFBDUOBUJWF XFCΛ௚઀ݺͼग़͍ͨ͠৔߹͸ɺQBDLBHFKTPOͷEFW%FQFOEFODJFTʹ   \   !UZQFTSFBDUOBUJWFXFCOQN!UZQFTSFBDUOBUJWF   ^   ͱهड़͢ΔͱSFBDUOBUJWFͷܕఆٛΛSFBDUOBUJWFXFCͷܕͱͯ͠ಡΜͰ͘ ΕΔͷͰඞཁͳ৔߹͸ઃఆ͢Δ

Slide 9

Slide 9 text

5ZQFTDSJQUରԠ "paths": { "~": ["./"], "~/*": ["./*", "./*.native", "./*.ios", "./*.android"], ɹ } w ΤσΟλʹղੳͤ͞ΔͨΊɺϓϥοτϑΥʔϜ͝ͱʹಡ·ͤΔ֦ுࢠΛࢦఆ͢Δɻ   ʢUZQFTDSJQUʹ͸XFCQBDLͷΑ͏ͳSFTPMWFFYUFOTJPOɾNPEVMFNFSHFͷΑ͏ ͳػೳ͕ͳ͘ɺQBUITͰࢦఆͨ͠NPEVMFύεҎ֎ͰSFTPMWFFYUFOTJPO͕Ͱ͖ͳ ͍૬ରύεͰ͸FYUFOTJPOΛলུͯ͠NPEVMFϚʔδ͢Δࣄ͕Ͱ͖ͳ͍ʣ w ͜ͷΑ͏ͳ෼ذΛ࣋ͭϥΠϒϥϦΛ࡞Ζ͏ͱ͢Δ৔߹ɺBMJBT fi MFQMBUGPSNKTͷ֊૚Ͱ SFRVJSF BMJBTQBUI ͷܗͰు͖ग़͞ΕΔͨΊXFCQBDL΍NFUSPͳͲCVOEMFS͕ඞཁʹͳΔ

Slide 10

Slide 10 text

TUZMFEDPNQPOFOUT TUZMFEDPNQPOFOUTΛ࠾༻ͨ͠ ϝϦοτ w TUZMFEDPNQPOFOUT͸8FCͱ/BUJWFͰผʑͷ5IFNF1SPWJEFSΛ౉ͤΔͷͰɺ   UIFNFͷUIFNFQSPQFSUZͷ݁߹Λߟ͑Δඞཁ͕ͳ͍ w 8FCଆͰ΋࠾༻͍ͯ͠Ε͹ɺίϯϙʔωϯτΛҠ২͠΍͍͢ σϝϦοτ w 4UZMF4IFFUΛ࢖͏ΑΓ΋ύϑΥʔϚϯε͕ͪΐͬͱѱ͘ͳΔ w ΞχϝʔγϣϯͷTUBUFΛѻ͏ͱύϑΥʔϚϯε͕མͪΔ   3/8FCͰ͸"OJNBUFE7JFX͸DTTͱผ؅ཧʹͳΔͷͰӨڹ͸গͳ͍ w ࠷৽ͷ3FBDU/BUJWFͷίϯϙʔωϯτͷ௥ै͸ϥΠϒϥϦ͕ߋ৽͞Ε͍ͯͳ͍   ͜ͱ͕͋ΓखಈͰઃఆ͢Δඞཁ͕͋Δ͕࣌͋Δ TUZMFE $PNQPOFOU ͰରԠՄೳ   ͳ΋ͷ΋͋Δ͕ɺͷ1SFTTBCMFͷTUZMFGVODUJPOQSPQʹରԠ͍ͯ͠ͳ͍ͳͲ   ͰύονΛೖΕΔඞཁ͕͋ͬͨ  

Slide 11

Slide 11 text

#BCFMͷઃఆ ύοέʔδଆ w /BUJWFͷґଘੑอͭͨΊʹ͸3FBDU/BUJWFͷίϯϙʔωϯτʹ ͸NFUSPSFBDUOBUJWFCBCFMQSFTFU͔CBCFMQSFTFUFYQPΛར ༻ͯ͠CVJME͢Δ   ͨͩ͠ɺFYQPQSFTFU͸DMBTT/BNFΛॻ͖׵͑Δઃఆ͕͋ΔΒ ͘͠ɺTUZMFEDPNQPOFOUTͷTTSઃఆͱڝ߹͢ΔͬΆ͘ "OJNBUFE7JFXʹTUZMF͕͔ͭͳ͘ͳΔόά͕͋ΔΑ͏ͳͷͰ   NFUSPSFBDUOBUJWFCBCFMQSFTFUΛ࠾༻

Slide 12

Slide 12 text

#BCFMͷઃఆ ύοέʔδଆ module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'styled-components', { ssr: true, displayName: true, preprocess: false } ], ], env: { test: { plugins: ['styled-jsx/babel-test'], }, }, }

Slide 13

Slide 13 text

XFCQBDLͷઃఆ ར༻ଆ config.resolve.alias = { 'react-native$': require.resolve('react-native-web'), } w 8&#༻ʹBQQMJDBUJPOΛCVJME͢Δͱ͖͸ɺSFBDUOBUJWFύοέʔδͷJNQPSUΛ   SFBDUOBUJWFXFCύοέʔδʹஔ͖׵͑ΔΑ͏ʹ͢Δ

Slide 14

Slide 14 text

XFCQBDLͷઃఆ ར༻ଆ w ͞ΒʹUSFFTIBLJOHͷԸܙΛड͚ΔͨΊʹNPOPSFQPͷΑ͏ʹUSBOTQJMFલͷ   ίʔυΛ௚઀ಡΈ͍ͨ৔߹͸XFCQBDLͷCVJMEUBSHFUʹϑΝΠϧΛొ࿥͢Δ   ඞཁ͕͋ΔɻʢಛʹTUZMFEDPNQPOFOUTOBUJWFͷΑ͏ʹ಺෦ʹSFBDUOBUJWF   ͷJNQPSU͕ଘࡏ͍ͯ͠ΔͷͰɺOPEF@NPEVMFT಺ʹ͋ͬͯ΋CVJME࣌ʹ͜ΕΛ   SFBDUOBUJWFXFCʹࠩ͠ସ͑ͳ͍ͱΤϥʔʹͳΔʣ

Slide 15

Slide 15 text

XFCQBDLͷઃఆ ར༻ଆ w ࠓճ͸/FYUKTΞϓϦʹίϯϙʔωϯτΛҠ২͢Δํ๏Λࢼͨ͠ͷͰ   OFYUUSBOTQJMFNPEVMFTΛ༻͍ͯɺ෦OPEF@NPEVMFTͷதͰ΋USBOTQJMF   ର৅ʹؚΊΔύοέʔδΛઃఆͨ͠ XFCQBDL͸VTFTͷઃఆͰௐ੔ const withTM = require('next-transpile-modules') ([ '@example_package/cross-platform’, 'styled-components/native', 'react-native-vector-icons' ]);

Slide 16

Slide 16 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ w DTTඪ४ͷ૬ର஋ࢦఆ SFN FN ͸8FCͰ͸ධՁ͞ΕΔ͕ɺϞόΠϧଆͰ͸   SFBDUOBUJWFϥΠϒϥϦ͚ͩͰ͸Ͱ͖ͳ͍ɻ   ʢIUUQTHJUIVCDPNWJUBMFUTSFBDUOBUJWFFYUFOEFETUZMFTIFFUͱ͍͏   ϥΠϒϥϦͰSFN͕ରԠ͍ͯ͠Δ͕ɺଟػೳ͔ͭ/BUJWFͷͨΊͷ࣮૷Ͱ8FC   ͷ࢓༷ͱဃ཭͢Δͷ͕޷·͘͠ͳ͍ͨΊࠓճ͸ෆ࠾༻ɻ w SFN͚ͩͲ͏ʹ͔ରԠ͔ͨͬͨ͠ͷͰɺTUZMFEͷUFNQMBUFGVODUJPOʹUIFNF   ରԠͯ͠ຒΊࠐΉ͜ͱʹɻ XFCଆͷSFTQPOTJWFରԠ͸SFNTUZMFEͷFYUFOE   Ͱؤு͍ͬͯ͘

Slide 17

Slide 17 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ SFN export type DeviceFontSizeType = | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' export const DEFAULT_FONT_SIZE: Record = { xxsmall: 8, xsmall: 10, small: 14, medium: 16, large: 20, xlarge: 24, xxlarge: 40, } export const rem = (relativeSize: number) => { return ({ theme }: { theme: ThemeScheme }): string => `${theme.fontSize * relativeSize}px` } ࢖༻ྫ) font-size: ${rem(1)}; UFNQMBUFϦςϥϧʹຒΊࠐΉͨΊʹݱࡏͷGPOU4J[FΛ   ฦ͢DMPTVSFΛ࡞ΓɺSFNͷ୅ସʹͨ͠

Slide 18

Slide 18 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ w XFCଆͷڞ௨Խ͞Ε͍ͯͳ͍ίϯϙʔωϯτͷελΠϧΛ/BUJWFͱ߹Θͤ   ͨΓɺͦ΋ͦ΋αΠζʹΑͬͯ/BUJWFίϯϙʔωϯτΛࠩ͠ସ͍͑ͨ࣌ͷ   ͨΊʹϝσΟΞΫΤϦΛ࢖͏ʢແཧʹ/BUJWFίϯϙʔωϯτͱσόΠεͷج४   αΠζΛ߹ΘͤΔඞཁ͸ͳ͍͕ɺ'POUTJ[F͸߹Θͤͨํ͕ແ೉ʣ w DSPTTQMBUGPSNଆ͸SFN͕ݻఆαΠζͰFYQPSU͞ΕΔͷͰɺ͜Ε͕Ͳ͏ͯ͠΋   ࠔΔ৔߹͸TUZMFEDPNQPOFOUTOBUJWFͰFYUFOEͱTUZMFENFEJBRVFSZΛ   ۦ࢖ͯ͠ελΠϧΛ্ॻ͖ͯ͠ௐ੔͢Δ

Slide 19

Slide 19 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ 8&#ͷϝσΟΞΫΤϦରԠ wIUUQTHJUIVCDPN3FBDU5SBJOJOHSFBDUNFEJB wIUUQTHJUIVCDPNNPSBKBCJTUZMFENFEJBRVFSZ Λ࢖ͬͯؤுΔɻͨͩ͠ɺEFWJDFαΠζͷࢦఆͷํ๏͕ҧ͏ͷͰந৅Խͯ͠KTPONR ಉ͡ύϥϝʔλΛऔΕΔΑ͏ʹͨ͠ /BUJWFͷϝσΟΞΫΤϦରԠ const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; Λ͔ͭͬͯɺσόΠεαΠζΛ෼ྨ͢ΔϩδοΫΛॻ͚͹0,

Slide 20

Slide 20 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const reactMediaQuery:ɹMediaQueryType = { xl: { maxWidth: 1440, minWidth: 1170, },… } export const useDeviceSize = (): DeviceFontSizeType => { const matches = useMedia({ queries: reactMediaQuery }) return useMemo(() => { if (matches.lg) return 'large' if (matches.md) return 'medium' if (matches.sm) return 'small' if (matches.xsm) return 'xsmall' if (matches.xxsm) return 'xxsmall' return 'xlarge' }, [matches]) } 8&#ଆ͸ඞཁͳαΠζ·ͰͰ   ϝσΟΞΫΤϦΛରԠ

Slide 21

Slide 21 text

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const WebAdjustText = styled(NativeText)` white-space: pre-line; line-height: 1.5em; ` 8&#ଆͰσόΠεαΠζ͕߹Θͳ͍৔߹΍૬ର஋ͳͲΛ࢖͍͍ͨ৔߹͸   QSPQFSUZΛPWFSSJEF͢Δ

Slide 22

Slide 22 text

4UPSZCPPL w 3FBDU/BUJWF8FCͰ͸8FCϒϥ΢βͰදࣔͰ͖ΔͷͰɺTUPSZCPPL   ͷWJFXQPSUͰը໘αΠζΛ͔֬Ίͳ͕Β։ൃ͢Δͷ͕ศར w 3FBDU/BUJWFͷϙΠϯταΠζ͸04ґଘͷ6*Ͱ͸ͳ͍ݶΓઈରࢦఆʹͳΔͷͰɺ   7JFX1PSUͷݟͨ໨͸ը໘αΠζ͕ಉ͡Ͱ͋Ε͹ɺ8FCͰ΋ɺ.PCJMFͰ΋ಉ͡   ϨΠΞ΢τʹͳΔ

Slide 23

Slide 23 text

4UPSZCPPL export const DarkThemeDecorator = ( story: () => React.ReactNode, ): ReactElement => { const colorTheme = select('colorTheme', colorThemeSelect, 'dark') const mediaSize = select('mediaSize', deviceSizeSelect, 'medium') return ( {story()} ) /BUVSBMDMBS͞ΜͷϨϙΛࢀߟʹ͠·ͨ͠IUUQTHJUIVCDPN/BUVSBMDMBSSFBDUOBUJWFTLFUDICPPLUSFFNBTUFSTSD w !TUPSZCPPLBEEPOLOPCTͰ5IFNFมߋΛ6*ͰͰ͖ΔΑ͏ʹ࢓ࠐΉ

Slide 24

Slide 24 text

4UPSZCPPL

Slide 25

Slide 25 text

3FBDU/BUJWFͰ8FCରԠͯ͠ྑ͔ͬͨ఺ w 3FBDU/BUJWF8FCࣗମ͕ϨεϙϯγϒରԠ͠΍͍͔ͭ͢ߴػೳͳ6*ϥΠϒϥ ϦͳͷͰɺίϯϙʔωϯτࣗମͷ࣮૷ָ͕ʹͳΔ΋ͷ͕͋Δ .PEBM 4OBDLCBSͳͲ w $44Ͱॻ͚ΔͷͰҠ২͕εϜʔζʹ͍͘΋ͷ΋ଟ͍ w Ұ౓ΧλϩάΛ࡞ͬͯ͠·͑͹8&# .PCJMFͰ࢖͍ଓ͚ΒΕΔίϯϙʔωϯ τ͕࡞ΕΔ

Slide 26

Slide 26 text

$SPTT1MBUGPSNରԠ͕೉͍͠ͱ͜Ζ w 3FBDU/BUJWFͱίʔυϕʔεΛڞ༗͠ͳ͍৔߹ɺ/BWJHBUJPOͷڞ௨Խ͕ωοΫʹͳΔ /FYUKTͳͲ ͷ8FCϑϨʔϜϫʔΫΛ࢖͏ͱSFBDUOBWJHBUJPOͳͲ͸ར༻͢Δͷ͕೉͍͠ͷͰ   ผ࣮૷ͷํ͕ૣ͘ରԠՄೳ w %FQSJDBUFEʹͳ͍ͬͯΔίϯϙʔωϯτͷରԠʢSFBDUOBUJWFXFCίϯϙʔωϯτ͕༻ҙ͞Εͯ ͍ͳ͍/BUJWF$PNQPOFOU"1*ΛݺͿͱΤϥʔʹͳΔɻʣҰԠ!UZQFTSFBDUOBUJWF͔Βফ͑Δ· Ͱ͸࢖͏ࣄͰରԠͨ͠ํ͕ίετ͕௿͍ɻϥΠϒϥϦ͕੾Γग़͞Ε͍ͯΔ͚ͩͰ͋Ε͹ɺBMJBTͰϥ ΠϒϥϦ໊ΛSFBDUOBUJWFXFCʹ޲͚Ε͹େৎ෉Ͱ͢ɻͦ͏Ͱͳ͚Ε͹ࣗ෼Ͱ/BUJWF   $PNQPOFOUͷొ࿥͕ඞཁʹͳΓ·͢ɻ w TWHͷίϯϙʔωϯτ͸8FCͰ͸࢖͍ͮΒ͍ͷͰڞ௨ԽͤͣʹSBX fi MFΛ࢖ͬͯରԠ͢Δ   ͷ͕Αͦ͞͏ ϞόΠϧଆͰ͸SFBDUOBUJWFTWHMPBEFS 8FCଆͰ͸TWHΛͦͷ··JNQPSU͢ΔͳͲ ͷܗʹ͢Δɻ੩తϑΝΠϧΛTUPSBHFʹอଘ͍ͨ͠৔߹͸޻෉͕ඞཁ