Save 37% off PRO during our Black Friday Sale! »

React Native JSI ソースコードリーディング / React Native JSI source code reading

9a110460454f56172d4647937fe67f59?s=47 Shoken Fujisaki
October 02, 2021
310

React Native JSI ソースコードリーディング / React Native JSI source code reading

React Native Matsuri 2021で発表したスライドです。
https://reactnative-matsuri.com/ja

9a110460454f56172d4647937fe67f59?s=128

Shoken Fujisaki

October 02, 2021
Tweet

Transcript

  1. 3FBDU/BUJWF.BUTVSJ-5 
 3FBDU/BUJWF 
 +4*ιʔείʔυϦʔσ Οϯά  4IPLFO'VKJTBLJ

  2. ࣗݾ঺հ w 4IPLFO'VKJTBLJ !TIPLFOY  w גࣜձࣾΩονϋΠΫ 
 ڞಉ૑ۀऀ$50 w

    ڞஶ3FBDU/BUJWFʹࢧ͑Β͑Δاۀ w ΩονϋΠΫΤϯδχΞνʔϜͰ 
 ݄ץ3/'FBUVSFT࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN
  3. ࠓճ͸+4*ʹ஫໨ͨ͠ 
 ίʔυϦʔσ ΟϯάͰ͢

  4. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*  +4*ͷιʔείʔυΛಡΉ  +4*.PEVMFͷιʔείʔυΛಡΉ

  5. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*  +4*ؔ࿈ͷιʔείʔυΛಡΉ  +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ

  6. #SJEHF $ 4IBEPX5ISFBE :PHB /BUJWF.PEVMFT 
 +BWB0CK$ +4#VOEMF 
 +BWB4DSJQU

    +4$ +40/ +40/ ඇಉظΩϡʔ 6*5ISFBE +45ISFBE /BUJWF6* 
 +BWB0CK$ 3FBSDIJUFDUVSFҎલ #SJEHF
  7. #SJEHF $ 4IBEPX5ISFBE :PHB /BUJWF.PEVMFT 
 +BWB0CK$ +4#VOEMF 
 +BWB4DSJQU

    +4$ +40/ +40/ ඇಉظΩϡʔ 6*5ISFBE +45ISFBE #SJEHF͸ҰͭͳͷͰϘτϧ ωοΫʹͳΓ΍͍͢ ඇಉظͰॲཧ͢ΔͨΊɺىಈ࣌ ʹશͯಡΈࠐΉඞཁ͕͋Δ ૄ݁߹ͳඇಉظॲཧͰྑͦ͞͏͕ͩ  τϨʔυΦϑ ඇಉظͷͨΊɺύϑΥʔϚϯε ໰୊ʹͳΔՄೳੑ /BUJWF6* 
 +BWB0CK$ ϨϯμϦϯάߋ৽ʹ#SJEHFɾ +45ISFBEͷ௨՟͕ඞཁ
  8. +4#VOEMF 
 +BWB4DSJQU +45ISFBE 3FBSDIJUFDUVSFҎ߱ /FX"SDIJUFDUVSFͱ+4* +4* +47. 0CKFDUJWF$ +BWB+/*

    $
  9. +4#VOEMF 
 +BWB4DSJQU +45ISFBE 3FBSDIJUFDUVSFҎ߱ /FX"SDIJUFDUVSFͱ+4* +4* +47. /BUJWF.PEVMFT 


    +BWB0CK$ 6*5ISFBE /BUJWF6* 
 +BWB0CK$
  10. +4#VOEMF 
 +BWB4DSJQU +45ISFBE 3FBSDIJUFDUVSFҎ߱ /FX"SDIJUFDUVSFͱ+4* +4* +47. /BUJWF.PEVMFT 


    +BWB0CK$ 6*5ISFBE /BUJWF6* 
 +BWB0CK$ $ +40/͕ͳ͘ͳͬͨ #SJEHFܦ༝ͷඇಉظॲཧ͔Β 
 ௚઀ͷಉظॲཧ΁ $ Ͱڞ௨ͷ/BUJWF.PEVMFT ͕ॻ͚ΔΑ͏ʹͳͬͨ -B[ZMPBEJOH͕Մೳʹ
  11. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*  +4*ؔ࿈ͷιʔείʔυΛಡΉ  +4*Λ࢖ͬͨϥΠϒϥϦΛಡΉ

  12. ೥݄ʹ+4$͔Β+4*΁ͷมߋ͕ ίϛοτ͞ΕΔ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFDPNNJUDEFGCCCBGDBCBCE 3$5$YY#SJEHFͰҎԼͷมߋ 
 มߋલ+4$&YFDVUPS'BDUPSZ มߋޙ+4*&YFDVUPS'BDUPSZ +4$3VOUJNF

  13. +4*&YFDVUPS'BDUPSZ 
 ͱ͍͏ͷ͕ॏཁͦ͏🤔

  14. 3$5$YY#SJEHFͰҎԼͷมߋ 
 มߋલ+4$&YFDVUPS'BDUPSZ มߋޙ+4*&YFDVUPS'BDUPSZ +4$3VOUJNF

  15. ݱࡏͷ3$5$YY#SJEHFNN IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCDEFCECFEFEDBGDGCB3FBDU$YY#SJEHF3$5$YY#SJEHFNN-- 3$5@64&@)&3.&4͕USVFͳΒ 
 )FSNFT&YFDVUPS'BDUPSZ +4*&YFDVUPS3VOUJNF*OTUBMMFS 
 GBMTFͳΒ 
 +4$&YFDVUPS'BDUPSZ

    +4*&YFDVUPS3VOUJNF*OTUBMMFS
  16. +4*&YFDVUPS3VOUJNF*OTUBMMFS  🤔

  17. )FSNFT&YFDVUPS'BDUPSZI IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$PNNPOIFSNFTFYFDVUPS)FSNFT&YFDVUPS'BDUPSZI )FSNFT&YFDVUPS'BDUPSZͷୈҰҾ਺͕ 
 +4*&YFDVUPS3VOUJNF*OTUBMMFS

  18. 3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$YY#SJEHF3$5+4*&YFDVUPS3VOUJNF*OTUBMMFSNN ίʔυΛಡΜͰΘ͔ͬͨ͜ͱ ɾ/BUJWFͱCJOE͍ͯ͠Δ ɾSVOUJNFΛ౉ͯ͠ϥοϓͯ͠Δ SVOUJNFʹ͸)FSNFTͳͲ+BWB4DSJQU&OHJOF ͕ࢀর͞ΕΔɻ +4*͸+4&OHJOFͷϥούʔɻ

  19. +4*ؔ࿈Ϋϥε w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPS w SFBDUOBUJWF3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFT

  20. +4*&YFDVUPSDQQ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*&YFDVUPSDQQ /BUJWF.PEVMF1SPYZ /BUJWF.PEVMFT΁ͷࢀরΛ࣋ͭ

  21. +4*/BUJWF.PEVMFTDQQ IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFTDQQ SVOUJNFHMPCBM HFU1SPQFSUZ"T'VODUJPO 
 SVOUJNFHMPCBM HFU1SPQFSUZ"T0CKFDU 
 Λݺͼग़ͯ͠࡞੒ͨ͠NPEVMFΛฦ͢

  22. +4#VOEMF 
 +BWB4DSJQU +45ISFBE +4* +47. /BUJWF.PEVMFT 
 +BWB0CK$ 6*5ISFBE

    /BUJWF6* 
 +BWB0CK$ $ ͜͜·ͰಡΜͩίʔυ KTJ3VOUJNFΦϒδΣΫτ 
 +4*&YFDVUPS 
 +4*/BUJWF.PEVMFT 
 )FSNFT +4$ )FSNFT&YFDVUPS'BDUPSZ +4$&YFDVUPS'BDUPSZ 3$5+4*&YFDVUPS3VOUJNF*OTUBMMFS KTJDQQ +4*%ZOBNJDDQQ SVOUJNFHMPCBM TFU1SPQFSUZ 
 SVOUJNFHMPCBM HFU1SPQFSUZ
  23. ίϥϜTFU5JNFPVUͷ࣮૷

  24. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST 
 +45JNFSTKT /BUJWF5JNJOHͱ͸

  25. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST 
 /BUJWF5JNJOHKT 5SVCP.PEVMFʂ

  26. SFBDUOBUJWF3FBDU$PSF.PEVMFT 3$55JNJOHNN TFU5JNFPVUͰ࢖ΘΕΔDSFBUF5JNFSͷ J04ωΠςΟϒ࣮૷

  27. TFU5JNFPVU͸5VSCP.PEVMFԽࡁΈ

  28. ΞδΣϯμ  3FBSDIJUFDUVSFͱ+4*  +4*ͷιʔείʔυΛಡΉ  +4*.PEVMFͷιʔείʔυΛಡΉ

  29. DSBGU[EPH͞ΜͷSFBDUOBUJWFRVJDLCBTF ͷίʔυΛಡΉ IUUQTHJUIVCDPNDSBGU[EPHSFBDUOBUJWFRVJDLCBTF

  30. IUUQTUFDILJUDIIJLFDPNFOUSZSFBDUOBUJWFGFBUVSFT •React NativeͷύϑΥʔϚϯεͱɺNULLจࣈΛؚΉόΠφϦจࣈྻΛॲཧͰ͖ͳ͍՝୊ •base64 ͰΤϯίʔυ͞Εͨը૾σʔλΛJS ͔ΒReact Native ϒϦοδΛհͯ͠WebView ʹ౉͢ͷ͸ ৑௕Ͱ͕͔͔࣌ؒΔ

    •C++ ͰJSI ωΠςΟϒϞδϡʔϧΛ࡞੒ͨ͠ •JSI Λ࢖༻͢Δ͜ͱʹΑΓɺJavaScript ͸C++ ϗετΦϒδΣΫτ΁ͷࢀরΛอ࣋͠ɺϝιουΛݺ ͼग़͢͜ͱ͕Ͱ͖Δɻ͜ΕʹΑΓɺઌʹड़΂ͨNULLจࣈͷ໰୊Λ࠷ऴతʹճආͰ͖ͨɻ
  31. ͜ͷลΓͷίʔυΛಡΉ

  32. DQQCBTFI CBTF@FODPEF΍CBTF@EFDPEFͳͲͷ ؔ਺͕એݴ͞Ε͍ͯΔɻ࣮૷͸CBTFDQQ

  33. DQQSFBDUOBUJWFRVJDLCBTFDQQ ࣮ࡍͷ+4*όΠϯσΟϯάॲཧɻ +BWB4DSJQU΁౉͢஋ΛKTJ7BMVFͱͯ͠࡞੒ JOTUBMM#BTFؔ਺ͷ࣮૷ +BWB4DSJQUͷάϩʔόϧ +BWB4DSJQUͰ࢖͑ΔϓϩύςΟʢؔ਺ʣ

  34. JPT2VJDL#BTFNN +4*όΠϯσΟϯάެ։༻ʹ 
 3FBDU3$5#SJEHF 1SJWBUFϔομʔϑΝΠϧΛΠϯϙʔτ DYY#SJEHFSVOUJNF΁ͷࢀরΛऔಘɻ $ ίʔυ಺Ͱૢ࡞༻ͷ+BWB4DSJQU7BMVFTΛ ࡞੒͢ΔͨΊʹඞཁͳSVOUJNFΦϒδΣΫτ SVOUJNFΛJOTUBMM#BTFؔ਺ʹ౉͠

    ͯɺ+4*όΠϯσΟϯάΛ࡞੒
  35. JOEFYUTͰؔ਺όΠϯσΟϯάΛએݴ DQQͰKTJ3VOUJNFHMPCBM TFU1SPQFSUZ ͨؔ͠਺ FYQPSUGVODUJPO

  36. "QQUTYͰJNQPSU FYQPSUͨ͠GVODUJPO

  37. +4#VOEMF 
 +BWB4DSJQU +45ISFBE +4* +47. /BUJWF.PEVMFT 
 +BWB0CK$ 6*5ISFBE

    /BUJWF6* 
 +BWB0CK$ $ CBTFI DQQ 
 SFBDUOBUJWFRVJDLCBTFI DQQ  2VJDL#BTFI NN ·ͱΊ KTJ3VOUJNFΦϒδΣΫτ 
 +4*&YFDVUPS 
 +4*/BUJWF.PEVMFT 
 )FSNFT +4$ )FSNFT&YFDVUPS'BDUPSZ +4$&YFDVUPS'BDUPSZ 3$5+4*&YFDVUPS3VOUJNF*OTUBMMFS KTJDQQ +4*%ZOBNJDDQQ
  38. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ΩονϋΠΫςοΫϒϩάͰ 
 3FBDU/BUJWF࠷৽৘ใΛ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN