Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shoken Fujisaki
October 02, 2021
830

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

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

Shoken Fujisaki

October 02, 2021
Tweet

More Decks by Shoken Fujisaki

Transcript

  1. 3FBDU/BUJWF.BUTVSJ-5

    3FBDU/BUJWF

    +4*ιʔείʔυϦʔσ
    Οϯά

    4IPLFO'VKJTBLJ

    View Slide

  2. ࣗݾ঺հ
    w 4IPLFO'VKJTBLJ !TIPLFOY

    w גࣜձࣾΩονϋΠΫ

    ڞಉ૑ۀऀ$50
    w ڞஶ3FBDU/BUJWFʹࢧ͑Β͑Δاۀ
    w ΩονϋΠΫΤϯδχΞνʔϜͰ

    ݄ץ3/'FBUVSFT࿈ࡌத

    IUUQTUFDILJUDIIJLFDPN

    View Slide

  3. ࠓճ͸+4*ʹ஫໨ͨ͠

    ίʔυϦʔσ
    ΟϯάͰ͢

    View Slide

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

    View Slide

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

    View Slide

  6. #SJEHF
    $

    4IBEPX5ISFBE
    :PHB
    /BUJWF.PEVMFT

    +BWB0CK$

    +4#VOEMF

    +BWB4DSJQU

    +4$
    +40/ +40/
    ඇಉظΩϡʔ
    6*5ISFBE
    +45ISFBE
    /BUJWF6*

    +BWB0CK$

    3FBSDIJUFDUVSFҎલ
    #SJEHF

    View Slide

  7. #SJEHF
    $

    4IBEPX5ISFBE
    :PHB
    /BUJWF.PEVMFT

    +BWB0CK$

    +4#VOEMF

    +BWB4DSJQU

    +4$
    +40/ +40/
    ඇಉظΩϡʔ
    6*5ISFBE
    +45ISFBE
    #SJEHF͸ҰͭͳͷͰϘτϧ
    ωοΫʹͳΓ΍͍͢
    ඇಉظͰॲཧ͢ΔͨΊɺىಈ࣌
    ʹશͯಡΈࠐΉඞཁ͕͋Δ
    ૄ݁߹ͳඇಉظॲཧͰྑͦ͞͏͕ͩ
    τϨʔυΦϑ
    ඇಉظͷͨΊɺύϑΥʔϚϯε
    ໰୊ʹͳΔՄೳੑ
    /BUJWF6*

    +BWB0CK$

    ϨϯμϦϯάߋ৽ʹ#SJEHFɾ
    +45ISFBEͷ௨՟͕ඞཁ

    View Slide

  8. +4#VOEMF

    +BWB4DSJQU

    +45ISFBE
    3FBSDIJUFDUVSFҎ߱
    /FX"SDIJUFDUVSFͱ+4*
    +4*
    +47.
    0CKFDUJWF$
    +BWB+/*
    $

    View Slide

  9. +4#VOEMF

    +BWB4DSJQU

    +45ISFBE
    3FBSDIJUFDUVSFҎ߱
    /FX"SDIJUFDUVSFͱ+4*
    +4*
    +47.
    /BUJWF.PEVMFT

    +BWB0CK$

    6*5ISFBE
    /BUJWF6*

    +BWB0CK$

    View Slide

  10. +4#VOEMF

    +BWB4DSJQU

    +45ISFBE
    3FBSDIJUFDUVSFҎ߱
    /FX"SDIJUFDUVSFͱ+4*
    +4*
    +47.
    /BUJWF.PEVMFT

    +BWB0CK$

    6*5ISFBE
    /BUJWF6*

    +BWB0CK$

    $
    +40/͕ͳ͘ͳͬͨ
    #SJEHFܦ༝ͷඇಉظॲཧ͔Β

    ௚઀ͷಉظॲཧ΁
    $Ͱڞ௨ͷ/BUJWF.PEVMFT
    ͕ॻ͚ΔΑ͏ʹͳͬͨ
    -B[ZMPBEJOH͕Մೳʹ

    View Slide

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

    View Slide

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

    มߋલ+4$&YFDVUPS'BDUPSZ
    มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF

    View Slide

  13. +4*&YFDVUPS'BDUPSZ

    ͱ͍͏ͷ͕ॏཁͦ͏🤔

    View Slide

  14. 3$5$YY#SJEHFͰҎԼͷมߋ

    มߋલ+4$&YFDVUPS'BDUPSZ
    มߋޙ+4*&YFDVUPS'BDUPSZ+4$3VOUJNF

    View Slide

  15. ݱࡏͷ3$5$YY#SJEHFNN
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCDEFCECFEFEDBGDGCB3FBDU$YY#SJEHF3$5$YY#SJEHFNN--
    [email protected]&@)&3.&4͕USVFͳΒ

    )FSNFT&YFDVUPS'BDUPSZ+4*&YFDVUPS3VOUJNF*OTUBMMFS

    GBMTFͳΒ

    +4$&YFDVUPS'BDUPSZ+4*&YFDVUPS3VOUJNF*OTUBMMFS

    View Slide

  16. +4*&YFDVUPS3VOUJNF*OTUBMMFS
    🤔

    View Slide

  17. )FSNFT&YFDVUPS'BDUPSZI
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCFBEBDGDBECBDEECGD3FBDU$PNNPOIFSNFTFYFDVUPS)FSNFT&YFDVUPS'BDUPSZI
    )FSNFT&YFDVUPS'BDUPSZͷୈҰҾ਺͕

    +4*&YFDVUPS3VOUJNF*OTUBMMFS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. +4*/BUJWF.PEVMFTDQQ
    IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCBBDDCBGFBFE3FBDU$PNNPOKTJFYFDVUPSKTJSFBDU+4*/BUJWF.PEVMFTDQQ
    SVOUJNFHMPCBM
    HFU1SPQFSUZ"T'VODUJPO


    SVOUJNFHMPCBM
    HFU1SPQFSUZ"T0CKFDU


    Λݺͼग़ͯ͠࡞੒ͨ͠NPEVMFΛฦ͢

    View Slide

  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

    View Slide

  23. ίϥϜTFU5JNFPVUͷ࣮૷

    View Slide

  24. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST

    +45JNFSTKT
    /BUJWF5JNJOHͱ͸

    View Slide

  25. SFBDUOBUJWF-JCSBSJFT$PSF5JNFST

    /BUJWF5JNJOHKT
    5SVCP.PEVMFʂ

    View Slide

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

    View Slide

  27. TFU5JNFPVU͸5VSCP.PEVMFԽࡁΈ

    View Slide

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

    View Slide

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

    View Slide

  30. IUUQTUFDILJUDIIJLFDPNFOUSZSFBDUOBUJWFGFBUVSFT
    •React NativeͷύϑΥʔϚϯεͱɺNULLจࣈΛؚΉόΠφϦจࣈྻΛॲཧͰ͖ͳ͍՝୊


    •base64 ͰΤϯίʔυ͞Εͨը૾σʔλΛJS ͔ΒReact Native ϒϦοδΛհͯ͠WebView ʹ౉͢ͷ͸
    ৑௕Ͱ͕͔͔࣌ؒΔ


    •C++ ͰJSI ωΠςΟϒϞδϡʔϧΛ࡞੒ͨ͠


    •JSI Λ࢖༻͢Δ͜ͱʹΑΓɺJavaScript ͸C++ ϗετΦϒδΣΫτ΁ͷࢀরΛอ࣋͠ɺϝιουΛݺ
    ͼग़͢͜ͱ͕Ͱ͖Δɻ͜ΕʹΑΓɺઌʹड़΂ͨNULLจࣈͷ໰୊Λ࠷ऴతʹճආͰ͖ͨɻ

    View Slide

  31. ͜ͷลΓͷίʔυΛಡΉ

    View Slide

  32. DQQCBTFI
    [email protected]΍[email protected]ͳͲͷ
    ؔ਺͕એݴ͞Ε͍ͯΔɻ࣮૷͸CBTFDQQ

    View Slide

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

    View Slide

  34. JPT2VJDL#BTFNN
    +4*όΠϯσΟϯάެ։༻ʹ

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

    View Slide

  35. JOEFYUTͰؔ਺όΠϯσΟϯάΛએݴ
    DQQͰKTJ3VOUJNFHMPCBM
    TFU1SPQFSUZ
    ͨؔ͠਺
    FYQPSUGVODUJPO

    View Slide

  36. "QQUTYͰJNQPSU
    FYQPSUͨ͠GVODUJPO

    View Slide

  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

    View Slide

  38. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ΩονϋΠΫςοΫϒϩάͰ

    3FBDU/BUJWF࠷৽৘ใΛ࿈ࡌத

    IUUQTUFDILJUDIIJLFDPN

    View Slide