React Native Book

Transcript

1. @januswel @YutamaKotaro @nitaking 2020/05/29 History of React Native React Native Japan
2. λΧΪέϯεέ ∁໦
   ݈հ ϒϦοδɺເ͕͋ΔΑͶ Ϋϥεϝιουגࣜձࣾ
   5FDI
   -FBE
   /
   &OHJOFFS
   "NQMJGJFS Twitter: @janus_wel
3. ϢλϚίλϩ΢ ϢλϚ
   ͨ͜Ζ͏ ΤϯδχΞྺʹ3FBDU/BUJWFྺ
   ͱ͍ͬͯ΋աݴͰ͸ͳ͍ɻ
   λΧΪέϯεέͷखʹΑΓ3FBDU
   /BWJHBUJPO ʹ͔Μͯ͠͸શόʔδϣϯॻ͘ܦݧΛಘͨɻ גࣜձࣾΤΞʔΫϩʔθοτ
   ΤϯδχΞνʔϜϦʔμʔ
   σʔλαΠΤϯενʔϜϦʔμʔ Twitter: @YutamaKotaro
4. χλϫΩατγ ਔా࿬ ཧ࢙ Twitter: @nitaking_ • ΤΞʔΫϩʔθοτॴଐ • ϢλϚͨ͜Ζ͏ࢯͷࢦಋΛड͚ React NativeͷਓͱͳΔ • ձࣾͰ͸ Atomic Designͷಋೖɺ ࣾ಺ͷ೔਺ݟੵͷഇࢭɺE2EͰϦ ϦʔεςετࣗಈԽͳͲΛߦ͏ • ೔ຊञ޷͖
5. 3FBDU
   /BUJWF
   ஀ੜ͔Β͸΍̑೥ʂ
6. 3FBDU
   /BUJWF
   +BQBO͸ɾɾɾ
   
7. 3FBDU
   /BUJWF
   +BQBO͸ɾɾɾ
   ͍͍ͩͨ ̐೥ʂ
8. ౰࣌ͷࢥ͍ग़ΛৼΓฦΓͳ͕Βɺ
   ࢥ͍Λ͸ͤΑ͏ʂ
9.  'BDF#PPLͷϋοΧιϯʹͯ஀ੜ ̑ 1VCMJD
   SFWJFX ̑ ΦʔϓϯιʔεԽ _ υϥήφΠྲྀߦ ΞϕϊϛΫεྲྀߦ ଟ͘ͷਓͷ͸͡·Γʂ
10. ̑ 4UBUVT#BSෆࡏɾɾɾ ΦʔϓϯιʔεԽ _ 3FMFBTF͸ίϝϯτΞ΢τ ωΠςΟϒίʔυॻ͍ͯͨؾ͕͢Δɻ ެࣜͷυΩϡϝϯτʹ ίϝϯτΞ΢τ͠Ζͬͯ͋ͬͨΑ͏ͳ
11. ̑ -JTU7JFX࢖͏͔͠ͳ͍ΑͶ ΦʔϓϯιʔεԽ _ ;JOEFY ͳʹͦΕ FlatListͱ͔͸ଘࡏ͠ͳ͔ͬͨɻ ΈΜͳ౰વͷΑ͏ʹListView࢖ͬͯͨɻ ࢖͑ͳ͍͜ͱʹ׳Ε͗ͯ͢
 ͔ͭ͑ΔϝϦοτ͕ಛʹͳ͔ͬͨؾ͕͢Δɾɾ
12. ̑ /BWJHBUPS࢖ͬͯͨʁ ΦʔϓϯιʔεԽ _ NavigatorΛ͔ͭͬͯϧʔςΟϯάΛ૊ΜͰ ͨؾ͕͢ΔɾɾɾɻΈΜͳͭΒ͍ͬͯɾɾɻ ̒ େܕΞοϓσʔτʢ̌̎ܥʣ ͜ͷࠒ͸SOSG͕ΘΓͱྲྀߦͬͯͨ ଞʹ΋͋ͬͨΜ͚ͩͬʁ
 React router nativeͱ͔͸͋ͬͨؾ͕͢Δ
13. ̒ େܕΞοϓσʔτ ܥ )PU
    3FMPBE෇ଐ Ή͠Ζɺͳ͔ͬͨΜ͚ͩͬɾɾɾʁ
 ͱݴ͑Δ΄ͲͷRNͷेീ൪ɻ 4UBUVT
    #BS௥Ճ jsͰωΠςΟϒͬΆ͍͜ͱͰ͖ͯײಈ ͨ͠هԱ͕ɾɾɾɻ
14. ̒ 3FBDU
    /BUJWF
    .FFUVQ ه೦͢΂͖Έͳ͞·ͱͷग़ձ͍ 30ਓ΋ࢀՃऀ͸͍ͳ͔ͬͨؾ͕͢Δɻ
 ΄ͱΜͲϦϨʔγϣϯζ͞Μͷଉͷ͔ ͔ͬͨਓ͹͔Γসɻࠓࢥ͏ͱ͍͢͝ઌݟ ੑɻΈΜͳൃදͰ͸
 ʮ ͭΒ͍ʯ͔͠ݴͬͯͳ͔ͬͨɻ
15.  3FBDU
    /BUJWF
    NFFUVQ ୈೋճ໨ͷΠϕϯτ 100ਓೖΓ͢Δ͔ͳͱࢥͬͨΒ໊̑̌΄Ͳ ͔͠ߦ͔ͳ͔ͬͨɾɾɾɻ
 ջ͔͍͠ਓͨͪͷొஃ͕ଟ͍ɻ ̓ [JOEFYͷαϙʔτ େܕΞοϓσʔτʢ ΍ͬͱ͔ɾɾʂʂͬͯײ͚ͩ͡Ͳɺ΋͸ ΍ࠓߋͬͯײ͡΋͋ͬͨɻ
 Ͱ΋ͳΜ͔ͩΜͩݴͬͯศརʂ
16. ̍̌ 3FBDU
    /BUJWF
    NFFUVQ̏ ୈࡾճ໨ͷΠϕϯτ 30ਓ΄ͲͷΠϕϯτɻ
 ӡӦ͕̏ਓʹ૿͑Δɻ  3FBDU
    /BUJWF
    NFFUVQ ࢛ճ໨ͷΠϕϯτ ࢀՃऀɺൃදऀ͸ݻఆɻ
 ͜ͷࠒ͸৮͍ͬͯΔਓ͕͔ͳΓݶఆత ͩͬͨɻ
17.  େܕΞοϓσʔτ ܥ /BWJHBUPSͷഇࢭ
    3FBDU
    /BWJHBUJPOͷެࣜਪ͠ NavigationExperimentalʹ஫໨͕ू·ͬ ͯͨͷ΋͋ͬͯ༨ܭʹ਒ᎥΛੜΜͩɻ ελΠϧͷύʔηϯςʔδαϙʔτ ࠃ಺Ͱ͸ɺ৮͍ͬͯΔਓ͕ݹࢀ͹͔ΓͰ͢ ͰʹͳΕ͖͍ͬͯͨͨΊ͔ɺϏοάχϡʔ ε͕͋ͬͨͨΊ͔ɺ࿩୊ʹͳ͍ͬͯͳ͔ͬ ͨؾ͕͢Δɾɾɾ
18.  3FBDUKT
    NFFUVQɹίϥϘ ॳͷਓ௒͑Πϕϯτ ΩϟύΦʔόʔ React.js meetup༷ͱίϥϘΠϕϯτɻ
 React Native੎ͷ࢜ؾ͕Ұؾʹߴ·ͬͨؾ͕ ͢Δɻ
 ϏοΫωʔϜͷํʑͷެԋ΋͋ΓɺΠϕϯτ ΋࠙਌ձ΋େ੝Γ্͕ΓͷΠϕϯτͩͬͨɻ
 
 ͜ΕΛػʹReact Native΁ͷ஫໨౓্͕͕ͬ ͨʂʂʢؾ͕͢Δɾɾɾʂʂͦ͏Ͱ͋ͬͯཉ͍͠ʣ
19. ̑ 3FBDU
    /BUJWF
    NFFUVQ
     ճ໨ͷΠϕϯτʢਓ௒ʣ ͜ͷࠒ͔Βɺʮ࢖ͬͯΈͨʯͱ͍͏੠ΛΑ͘ ฉ͘Α͏ʹͳΔɻ
 ࠃ಺Ͱ஫໨͞Ε͖ͯͨঢ়ଶɻ
 ࢀՃऀ΋ࠓ·Ͱͱҧͬͯɺ৽͍͠ਓͨͪ΋ݟ ड͚ΒΕΔΑ͏ʹͳͬͨɻ  3FBDU
    /BUJWF
    NFFUVQ
     ճ໨ͷΠϕϯτʢਓ௒ʣ
20.  େܕΞοϓσʔτʢܥʣ NFUSP#VOEMFS IPPLTରԠ͕ߦΘΕΔ 3FBDU
    /BUJWF
    NFFUVQ
     3FBDU
    /BUJWF
    NFFUVQ
     3FBDU
    /BUJWF
    NFFUVQ
     େྔͷCVHpY ࢖͏ͨΊʹ͸ͪΐͬͱͨ͠ϋοΫ ͕ඞཁͩͬͨɻ ͱͯ΋ྑ࣭ͳΠϕϯτΛ։࠵Ͱ͖ ͨɻ
    Έͳ͞·ͷ͓͔͛Ͱ͢ɻ
21.  େܕΞοϓσʔτ ܥ "OESPJE9ରԠ ґଘؔ܎͕γϯϓϧʹͳͬͨʂґଘղܾʹ಄ Λ೰·ͤͳͯ͘΋Α͘ͳ͔ͬͨ΋ɾɾɾɻ  "VUP
    MJOLొ৔ 'MJQQFSαϙʔτ ΊͬͪΌେ͖͍ʂ
 ࠓ·ͰͳΜͱ΋ࢥͬͯͳ͔͚ͬͨͲɺ͋ΒͨΊ ͯ։ൃ؀ڥͪΌΜͱ੔ͬͯͳ͔ͬͨΜͩͳͱ࠶ ೝࣝɻ
22.  3FBDU
    /BUJWF
     ॳͷΦϯϥΠϯΠϕϯτ ͜ͷΠϕϯτ͕੒ޭͨ͠Βɺࠓޙ͸ΦϯϥΠ ϯΠϕϯτʹ஫ྗ͍͖͍ͯͨ͠ɻ
 ஍ํʹ͍ͨΓɺ౎߹͔ͭͣͱࢀՃ৚݅ʹ͔͔ ΘΒͣ৘ใΛڞ༗Ͱ͖Δ৔Λ࡞͍͖ͬͯͨ ͍ʂ
 ͠͹Β͘׆ಈͯ͠த͚ͬͯͲࠓޙ͸΋ͬͱ׆ ಈ͍͚ͯͨ͠Βͱࢥͬͯ·͢ʂʢRN Tokyo ͞Μͱ΋͓͸ͳ͠Λɾɾɾʣ
23.  ॻ੶ͷग़൛ ͦͯ͠ɺॻ੶ͷग़൛΋ߦ͍·ͨ͠ʂ
24. ग़൛ຊͷ࿩
25. JavaScript ʹΑΔ iOS / Android ΞϓϦ։ൃͷ࣮ફ • 2020/04/27 ൃച • ٕज़ධ࿦ࣾग़൛ React Native
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
27. ిࢠ൛ઌߦൢച
28. ৽ܕίϩφ΢ΟϧεͷӨڹ • Gihyo Digital Publishing • Amazon • ָఱ books • ϤυόγυοτίϜ • Book Live ిࢠ൛ઌߦൢച
29. ͳͥॻ͍͔ͨʁ
30. ൃ୺͸ React Native meetup • React Native meetup ͷӡӦ΍৘ใൃ৴ͳͲΛݟٕͨज़ධ࿦ࣾ͞·͔Β͓੠͕ ͚͍͍ͨͩͨ • ࣥචҎ֎΋๩ͯ͘͠࠷ۙ։࠵Ͱ͖͍ͯͳ͔ͬͨ • ໭ͬͯ͘Δͷ͸ඞવͩͬͨ
31. ελʔτΞοϓ։ൃͷ஌ࣝΛ·ͱΊ͍ͨ • ࠓ೔ɺ༷ʑͳඞਢՊ໨ͱબ୒ࢶ͕͋Δ • React Native ͸ཤमՊ໨Λ཈͍͑ͨ৔߹ʹඇৗʹޮ͘ • ͕ɺ࣮͸ඞਢՊ໨͕͚ͬ͜͏͋Δ • React • TypeScript / ECMAScript 20XX • Xcode / Android Studio • ඪ४ίϯϙʔωϯτ • etc
32. ໎͏ͻͱΛग़ͨ͘͠ͳ͍ • React Native ͸ΫϩεϓϥοτϑΥʔϜ։ൃͷͨΊͷ࿮૊ΈͰ͸ͳ͍ • ͕ɺಉ༷ͷ͜ͱ͕Մೳͳબ୒ࢶ͕ଟ͘ଘࡏ͢Δ • React Native • Flutter • Ionic • গͳ͘ͱ΋ React Native ʹ͍ͭͯ͸Ͳ͜·ͰϑϨΩγϏϦςΟ͕͋Γɺ୭ʹ ޲͍͍ͯΔͷ͔Λ໌Β͔ʹ͢Δ͜ͱͰ໎͏ඞཁੑΛͳ͔ͨͬͨ͘͠
33. ΑΈͲ͜Ζ
34.  ೔ຊ্࢙࢙ʢଟ෼ʣɺ࠷΋ૣ͘
    ɹɹɹɹSFBDUOBWJHBUJPO
    WʹରԠͨ͠ॻ੶ 2݄ʹͰͯɺ3݄தʹ͸ؔ܎ՕॴΛશͯΛॻ͖׵͑4݄ॳ०ʹ୤ߘɻ
 ͪͳΈʹv4͕Ͱͨͱ͖΋ಉ͡࡞ۀΛɾɾɾ  ग़൛ࣾܦ༝Ͱ͸ॳΊͯʢଟ෼ʣɺ
    ɹɹɹɹIPPLTɺUZQFTDSJQUʹରԠͨ͠ॻ੶ hooks͕קࠂ͞Εͨ࣌΋͍ͪૣٕ͘ज़ௐࠪͨ͠ʢ׆͔͞Εͳ͔ͬͨʣ
35.  ʢଟ෼ʣॳΊͯ%FUPYΛѻͬͨॻ੶ ॻ੶ۦಈ։ൃʢSDDʣͰ΍Γ͖ͬͨɻExpo͕DetoxରԠ͖͠Εͯͳ͔ ͬͨΓɺϥΠϒϥϦʹΑͬͯରԠํ๏มΘͬͨΓͯ͠πϥ͔ͬͨ  αϯϓϧΞϓϦ͸ʢ࣮͸ʣͨͩͰݟΕΔΑʂ ๻ΒͷPull RequestͷσΟεΧογϣϯ΋ݟͲ͜Ζʢஏ͔͍ͣ͠ʣ
36.  3FEVY
    ʹΑΔΞϓϦઃܭͷఆࣜԽ࠷ऴ൛ʢଟ෼ʣ ٞ࿦ͷ౔୆ͱͯ͠࢖ͬͯ΋Β͏૝ఆʢԶͷࢡΛӽ͑ͯΏ͚ʣ  ͳͥ
    3FBDU
    /BUJWF
    ͕ੜ·Εͨͷ͔ʢଟ෼ʣ͸͡Ί ͯͷ೔ຊޠॻ੶ React Native ͷݯྲྀΛ஌ΔͨΊʹ Amazon Ͱങ͍ͬͯͩ͘͞
37. ຊͷ಺༰͸͢Ͱʹաڈͷ΋ͷ
38. ͜Ε͔Β • Re-architecturing • for Windows / macOS • Recoil • React Native for Web
 ɾɾɾetc Λ͍ͬ͠ΐʹ࡞Γ্͍͖͛ͯ·͠ΐ͏ʂ ࠓ೔͸ͳ͞ΕΔ͔΋ʂ