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

React Native Book

@YutamaKotaro
August 05, 2020
49

React Native Book

@YutamaKotaro

August 05, 2020
Tweet

Transcript

  1. @januswel @YutamaKotaro @nitaking 2020/05/29
    History of
    React Native
    React Native Japan

    View Slide

  2. λΧΪέϯεέ
    ∁໦݈հ
    ϒϦοδɺເ͕͋ΔΑͶ
    Ϋϥεϝιουגࣜձࣾ
    5FDI-FBE/&OHJOFFS
    "NQMJGJFS
    Twitter: @janus_wel

    View Slide

  3. ϢλϚίλϩ΢
    ϢλϚͨ͜Ζ͏
    ΤϯδχΞྺʹ3FBDU/BUJWFྺ
    ͱ͍ͬͯ΋աݴͰ͸ͳ͍ɻ
    λΧΪέϯεέͷखʹΑΓ3FBDU/BWJHBUJPO
    ʹ͔Μͯ͠͸શόʔδϣϯॻ͘ܦݧΛಘͨɻ
    גࣜձࣾΤΞʔΫϩʔθοτ
    ΤϯδχΞνʔϜϦʔμʔ
    σʔλαΠΤϯενʔϜϦʔμʔ
    Twitter: @YutamaKotaro

    View Slide

  4. χλϫΩατγ
    ਔా࿬ ཧ࢙
    Twitter: @nitaking_
    • ΤΞʔΫϩʔθοτॴଐ

    • ϢλϚͨ͜Ζ͏ࢯͷࢦಋΛड͚
    React NativeͷਓͱͳΔ

    • ձࣾͰ͸ Atomic Designͷಋೖɺ
    ࣾ಺ͷ೔਺ݟੵͷഇࢭɺE2EͰϦ
    ϦʔεςετࣗಈԽͳͲΛߦ͏

    • ೔ຊञ޷͖

    View Slide

  5. 3FBDU/BUJWF
    ஀ੜ͔Β͸΍̑೥ʂ

    View Slide

  6. 3FBDU/BUJWF+BQBO͸ɾɾɾ

    View Slide

  7. 3FBDU/BUJWF+BQBO͸ɾɾɾ
    ͍͍ͩͨ
    ̐೥ʂ

    View Slide

  8. ౰࣌ͷࢥ͍ग़ΛৼΓฦΓͳ͕Βɺ
    ࢥ͍Λ͸ͤΑ͏ʂ

    View Slide

  9. 'BDF#PPLͷϋοΧιϯʹͯ஀ੜ
    ̑ 1VCMJDSFWJFX
    ̑ ΦʔϓϯιʔεԽ _

    υϥήφΠྲྀߦ
    ΞϕϊϛΫεྲྀߦ
    ଟ͘ͷਓͷ͸͡·Γʂ

    View Slide

  10. ̑
    4UBUVT#BSෆࡏɾɾɾ
    ΦʔϓϯιʔεԽ _

    3FMFBTF͸ίϝϯτΞ΢τ
    ωΠςΟϒίʔυॻ͍ͯͨؾ͕͢Δɻ
    ެࣜͷυΩϡϝϯτʹ
    ίϝϯτΞ΢τ͠Ζͬͯ͋ͬͨΑ͏ͳ

    View Slide

  11. ̑
    -JTU7JFX࢖͏͔͠ͳ͍ΑͶ
    ΦʔϓϯιʔεԽ _

    ;JOEFY ͳʹͦΕ
    FlatListͱ͔͸ଘࡏ͠ͳ͔ͬͨɻ
    ΈΜͳ౰વͷΑ͏ʹListView࢖ͬͯͨɻ
    ࢖͑ͳ͍͜ͱʹ׳Ε͗ͯ͢

    ͔ͭ͑ΔϝϦοτ͕ಛʹͳ͔ͬͨؾ͕͢Δɾɾ

    View Slide

  12. ̑
    /BWJHBUPS࢖ͬͯͨʁ
    ΦʔϓϯιʔεԽ _

    NavigatorΛ͔ͭͬͯϧʔςΟϯάΛ૊ΜͰ
    ͨؾ͕͢ΔɾɾɾɻΈΜͳͭΒ͍ͬͯɾɾɻ
    ̒ େܕΞοϓσʔτʢ̌̎ܥʣ
    ͜ͷࠒ͸SOSG͕ΘΓͱྲྀߦͬͯͨ
    ଞʹ΋͋ͬͨΜ͚ͩͬʁ

    React router nativeͱ͔͸͋ͬͨؾ͕͢Δ

    View Slide

  13. ̒ େܕΞοϓσʔτ ܥ

    )PU3FMPBE෇ଐ
    Ή͠Ζɺͳ͔ͬͨΜ͚ͩͬɾɾɾʁ

    ͱݴ͑Δ΄ͲͷRNͷेീ൪ɻ
    4UBUVT#BS௥Ճ
    jsͰωΠςΟϒͬΆ͍͜ͱͰ͖ͯײಈ
    ͨ͠هԱ͕ɾɾɾɻ

    View Slide

  14. ̒ 3FBDU/BUJWF.FFUVQ
    ه೦͢΂͖Έͳ͞·ͱͷग़ձ͍
    30ਓ΋ࢀՃऀ͸͍ͳ͔ͬͨؾ͕͢Δɻ

    ΄ͱΜͲϦϨʔγϣϯζ͞Μͷଉͷ͔
    ͔ͬͨਓ͹͔Γসɻࠓࢥ͏ͱ͍͢͝ઌݟ
    ੑɻΈΜͳൃදͰ͸

    ʮ
    ͭΒ͍ʯ͔͠ݴͬͯͳ͔ͬͨɻ

    View Slide

  15. 3FBDU/BUJWFNFFUVQ
    ୈೋճ໨ͷΠϕϯτ
    100ਓೖΓ͢Δ͔ͳͱࢥͬͨΒ໊̑̌΄Ͳ
    ͔͠ߦ͔ͳ͔ͬͨɾɾɾɻ

    ջ͔͍͠ਓͨͪͷొஃ͕ଟ͍ɻ
    ̓
    [JOEFYͷαϙʔτ
    େܕΞοϓσʔτʢ

    ΍ͬͱ͔ɾɾʂʂͬͯײ͚ͩ͡Ͳɺ΋͸
    ΍ࠓߋͬͯײ͡΋͋ͬͨɻ

    Ͱ΋ͳΜ͔ͩΜͩݴͬͯศརʂ

    View Slide

  16. ̍̌ 3FBDU/BUJWFNFFUVQ̏
    ୈࡾճ໨ͷΠϕϯτ
    30ਓ΄ͲͷΠϕϯτɻ

    ӡӦ͕̏ਓʹ૿͑Δɻ
    3FBDU/BUJWFNFFUVQ
    ࢛ճ໨ͷΠϕϯτ
    ࢀՃऀɺൃදऀ͸ݻఆɻ

    ͜ͷࠒ͸৮͍ͬͯΔਓ͕͔ͳΓݶఆత
    ͩͬͨɻ

    View Slide

  17. େܕΞοϓσʔτ ܥ

    /BWJHBUPSͷഇࢭ
    3FBDU/BWJHBUJPOͷެࣜਪ͠
    NavigationExperimentalʹ஫໨͕ू·ͬ
    ͯͨͷ΋͋ͬͯ༨ܭʹ਒ᎥΛੜΜͩɻ
    ελΠϧͷύʔηϯςʔδαϙʔτ
    ࠃ಺Ͱ͸ɺ৮͍ͬͯΔਓ͕ݹࢀ͹͔ΓͰ͢
    ͰʹͳΕ͖͍ͬͯͨͨΊ͔ɺϏοάχϡʔ
    ε͕͋ͬͨͨΊ͔ɺ࿩୊ʹͳ͍ͬͯͳ͔ͬ
    ͨؾ͕͢Δɾɾɾ

    View Slide

  18. 3FBDUKTNFFUVQɹίϥϘ
    ॳͷਓ௒͑Πϕϯτ ΩϟύΦʔόʔ

    React.js meetup༷ͱίϥϘΠϕϯτɻ

    React Native੎ͷ࢜ؾ͕Ұؾʹߴ·ͬͨؾ͕
    ͢Δɻ

    ϏοΫωʔϜͷํʑͷެԋ΋͋ΓɺΠϕϯτ
    ΋࠙਌ձ΋େ੝Γ্͕ΓͷΠϕϯτͩͬͨɻ


    ͜ΕΛػʹReact Native΁ͷ஫໨౓্͕͕ͬ
    ͨʂʂʢؾ͕͢Δɾɾɾʂʂͦ͏Ͱ͋ͬͯཉ͍͠ʣ

    View Slide

  19. ̑ 3FBDU/BUJWFNFFUVQ
    ճ໨ͷΠϕϯτʢਓ௒ʣ
    ͜ͷࠒ͔Βɺʮ࢖ͬͯΈͨʯͱ͍͏੠ΛΑ͘
    ฉ͘Α͏ʹͳΔɻ

    ࠃ಺Ͱ஫໨͞Ε͖ͯͨঢ়ଶɻ

    ࢀՃऀ΋ࠓ·Ͱͱҧͬͯɺ৽͍͠ਓͨͪ΋ݟ
    ड͚ΒΕΔΑ͏ʹͳͬͨɻ
    3FBDU/BUJWFNFFUVQ
    ճ໨ͷΠϕϯτʢਓ௒ʣ

    View Slide

  20. େܕΞοϓσʔτʢܥʣ
    NFUSP#VOEMFS
    IPPLTରԠ͕ߦΘΕΔ
    3FBDU/BUJWFNFFUVQ
    3FBDU/BUJWFNFFUVQ
    3FBDU/BUJWFNFFUVQ
    େྔͷCVHpY
    ࢖͏ͨΊʹ͸ͪΐͬͱͨ͠ϋοΫ
    ͕ඞཁͩͬͨɻ
    ͱͯ΋ྑ࣭ͳΠϕϯτΛ։࠵Ͱ͖
    ͨɻ
    Έͳ͞·ͷ͓͔͛Ͱ͢ɻ

    View Slide

  21. େܕΞοϓσʔτ ܥ

    "OESPJE9ରԠ
    ґଘؔ܎͕γϯϓϧʹͳͬͨʂґଘղܾʹ಄
    Λ೰·ͤͳͯ͘΋Α͘ͳ͔ͬͨ΋ɾɾɾɻ

    "VUPMJOLొ৔
    'MJQQFSαϙʔτ
    ΊͬͪΌେ͖͍ʂ

    ࠓ·ͰͳΜͱ΋ࢥͬͯͳ͔͚ͬͨͲɺ͋ΒͨΊ
    ͯ։ൃ؀ڥͪΌΜͱ੔ͬͯͳ͔ͬͨΜͩͳͱ࠶
    ೝࣝɻ

    View Slide

  22. 3FBDU/BUJWF
    ॳͷΦϯϥΠϯΠϕϯτ
    ͜ͷΠϕϯτ͕੒ޭͨ͠Βɺࠓޙ͸ΦϯϥΠ
    ϯΠϕϯτʹ஫ྗ͍͖͍ͯͨ͠ɻ

    ஍ํʹ͍ͨΓɺ౎߹͔ͭͣͱࢀՃ৚݅ʹ͔͔
    ΘΒͣ৘ใΛڞ༗Ͱ͖Δ৔Λ࡞͍͖ͬͯͨ
    ͍ʂ

    ͠͹Β͘׆ಈͯ͠த͚ͬͯͲࠓޙ͸΋ͬͱ׆
    ಈ͍͚ͯͨ͠Βͱࢥͬͯ·͢ʂʢRN Tokyo
    ͞Μͱ΋͓͸ͳ͠Λɾɾɾʣ

    View Slide

  23. ॻ੶ͷग़൛
    ͦͯ͠ɺॻ੶ͷग़൛΋ߦ͍·ͨ͠ʂ

    View Slide

  24. ग़൛ຊͷ࿩

    View Slide

  25. JavaScript ʹΑΔ iOS / Android ΞϓϦ։ൃͷ࣮ફ
    • 2020/04/27 ൃച

    • ٕज़ධ࿦ࣾग़൛
    React Native

    View Slide

  26. JavaScript ʹΑΔ iOS / Android ΞϓϦ։ൃͷ࣮ફ
    ୈ1ষ React / React Nativeͷ֓ཁͱͦͷഎܠ

    ୈ2ষ TypeScriptͱECMAScript 2015ͷجຊΛԡ͑͞Δ

    ୈ3ষ ։ൃ؀ڥͷߏங

    ୈ4ষ React Nativeͷجຊ

    ୈ5ষ ࡞੒͢ΔΞϓϦέʔγϣϯͷ࢓༷ࡦఆ

    ୈ6ষ ςετʹΑΔઃܭͷ࣭ͷ޲্

    ୈ7ষ Navigationͷ֓ཁͱ࣮૷

    ୈ8ষ Atomic Designͱίϯϙʔωϯτͷ࣮૷

    ୈ9ষ σʔλϑϩʔͷઃܭ͓Αͼ࣮૷

    ୈ10ষ FirebaseΛ࢖ͬͨόοΫΤϯυ࿈ܞ

    ୈ11ষ E2EΛ࣮૷͢Δ

    ୈ12ষ ΞϓϦετΞ΁ͷެ։
    React Native

    View Slide

  27. ిࢠ൛ઌߦൢച

    View Slide

  28. ৽ܕίϩφ΢ΟϧεͷӨڹ
    • Gihyo Digital Publishing

    • Amazon

    • ָఱ books

    • ϤυόγυοτίϜ

    • Book Live
    ిࢠ൛ઌߦൢച

    View Slide

  29. ͳͥॻ͍͔ͨʁ

    View Slide

  30. ൃ୺͸ React Native meetup
    • React Native meetup ͷӡӦ΍৘ใൃ৴ͳͲΛݟٕͨज़ධ࿦ࣾ͞·͔Β͓੠͕
    ͚͍͍ͨͩͨ

    • ࣥචҎ֎΋๩ͯ͘͠࠷ۙ։࠵Ͱ͖͍ͯͳ͔ͬͨ

    • ໭ͬͯ͘Δͷ͸ඞવͩͬͨ

    View Slide

  31. ελʔτΞοϓ։ൃͷ஌ࣝΛ·ͱΊ͍ͨ
    • ࠓ೔ɺ༷ʑͳඞਢՊ໨ͱબ୒ࢶ͕͋Δ

    • React Native ͸ཤमՊ໨Λ཈͍͑ͨ৔߹ʹඇৗʹޮ͘

    • ͕ɺ࣮͸ඞਢՊ໨͕͚ͬ͜͏͋Δ

    • React

    • TypeScript / ECMAScript 20XX

    • Xcode / Android Studio

    • ඪ४ίϯϙʔωϯτ

    • etc

    View Slide

  32. ໎͏ͻͱΛग़ͨ͘͠ͳ͍
    • React Native ͸ΫϩεϓϥοτϑΥʔϜ։ൃͷͨΊͷ࿮૊ΈͰ͸ͳ͍
    • ͕ɺಉ༷ͷ͜ͱ͕Մೳͳબ୒ࢶ͕ଟ͘ଘࡏ͢Δ

    • React Native

    • Flutter

    • Ionic

    • গͳ͘ͱ΋ React Native ʹ͍ͭͯ͸Ͳ͜·ͰϑϨΩγϏϦςΟ͕͋Γɺ୭ʹ
    ޲͍͍ͯΔͷ͔Λ໌Β͔ʹ͢Δ͜ͱͰ໎͏ඞཁੑΛͳ͔ͨͬͨ͘͠

    View Slide

  33. ΑΈͲ͜Ζ

    View Slide

  34. ೔ຊ্࢙࢙ʢଟ෼ʣɺ࠷΋ૣ͘
    ɹɹɹɹSFBDUOBWJHBUJPOWʹରԠͨ͠ॻ੶
    2݄ʹͰͯɺ3݄தʹ͸ؔ܎ՕॴΛશͯΛॻ͖׵͑4݄ॳ०ʹ୤ߘɻ

    ͪͳΈʹv4͕Ͱͨͱ͖΋ಉ͡࡞ۀΛɾɾɾ
    ग़൛ࣾܦ༝Ͱ͸ॳΊͯʢଟ෼ʣɺ
    ɹɹɹɹIPPLTɺUZQFTDSJQUʹରԠͨ͠ॻ੶
    hooks͕קࠂ͞Εͨ࣌΋͍ͪૣٕ͘ज़ௐࠪͨ͠ʢ׆͔͞Εͳ͔ͬͨʣ

    View Slide

  35. ʢଟ෼ʣॳΊͯ%FUPYΛѻͬͨॻ੶
    ॻ੶ۦಈ։ൃʢSDDʣͰ΍Γ͖ͬͨɻExpo͕DetoxରԠ͖͠Εͯͳ͔
    ͬͨΓɺϥΠϒϥϦʹΑͬͯରԠํ๏มΘͬͨΓͯ͠πϥ͔ͬͨ
    αϯϓϧΞϓϦ͸ʢ࣮͸ʣͨͩͰݟΕΔΑʂ
    ๻ΒͷPull RequestͷσΟεΧογϣϯ΋ݟͲ͜Ζʢஏ͔͍ͣ͠ʣ

    View Slide

  36. 3FEVYʹΑΔΞϓϦઃܭͷఆࣜԽ࠷ऴ൛ʢଟ෼ʣ
    ٞ࿦ͷ౔୆ͱͯ͠࢖ͬͯ΋Β͏૝ఆʢԶͷࢡΛӽ͑ͯΏ͚ʣ
    ͳͥ3FBDU/BUJWF͕ੜ·Εͨͷ͔ʢଟ෼ʣ͸͡Ί
    ͯͷ೔ຊޠॻ੶
    React Native ͷݯྲྀΛ஌ΔͨΊʹ Amazon Ͱങ͍ͬͯͩ͘͞

    View Slide

  37. ຊͷ಺༰͸͢Ͱʹաڈͷ΋ͷ

    View Slide

  38. ͜Ε͔Β
    • Re-architecturing

    • for Windows / macOS

    • Recoil

    • React Native for Web

    ɾɾɾetc
    Λ͍ͬ͠ΐʹ࡞Γ্͍͖͛ͯ·͠ΐ͏ʂ
    ࠓ೔͸ͳ͞ΕΔ͔΋ʂ

    View Slide