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

React Native Book

6aa82ed11ae69672aca9bff7e25d1044?s=47 @YutamaKotaro
August 05, 2020
43

React Native Book

6aa82ed11ae69672aca9bff7e25d1044?s=128

@YutamaKotaro

August 05, 2020
Tweet

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ͷϋοΧιϯʹͯ஀ੜ ̑ 1VCMJDSFWJFX ̑ ΦʔϓϯιʔεԽ _ υϥήφΠྲྀߦ ΞϕϊϛΫεྲྀߦ ଟ͘ͷਓͷ͸͡·Γʂ

  10. ̑ 4UBUVT#BSෆࡏɾɾɾ ΦʔϓϯιʔεԽ _ 3FMFBTF͸ίϝϯτΞ΢τ ωΠςΟϒίʔυॻ͍ͯͨؾ͕͢Δɻ ެࣜͷυΩϡϝϯτʹ ίϝϯτΞ΢τ͠Ζͬͯ͋ͬͨΑ͏ͳ

  11. ̑ -JTU7JFX࢖͏͔͠ͳ͍ΑͶ ΦʔϓϯιʔεԽ _ ;JOEFY ͳʹͦΕ FlatListͱ͔͸ଘࡏ͠ͳ͔ͬͨɻ ΈΜͳ౰વͷΑ͏ʹListView࢖ͬͯͨɻ ࢖͑ͳ͍͜ͱʹ׳Ε͗ͯ͢
 ͔ͭ͑ΔϝϦοτ͕ಛʹͳ͔ͬͨؾ͕͢Δɾɾ

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


    React router nativeͱ͔͸͋ͬͨؾ͕͢Δ
  13. ̒ େܕΞοϓσʔτ ܥ )PU3FMPBE෇ଐ Ή͠Ζɺͳ͔ͬͨΜ͚ͩͬɾɾɾʁ
 ͱݴ͑Δ΄ͲͷRNͷेീ൪ɻ 4UBUVT#BS௥Ճ jsͰωΠςΟϒͬΆ͍͜ͱͰ͖ͯײಈ ͨ͠هԱ͕ɾɾɾɻ

  14. ̒ 3FBDU/BUJWF.FFUVQ ه೦͢΂͖Έͳ͞·ͱͷग़ձ͍ 30ਓ΋ࢀՃऀ͸͍ͳ͔ͬͨؾ͕͢Δɻ
 ΄ͱΜͲϦϨʔγϣϯζ͞Μͷଉͷ͔ ͔ͬͨਓ͹͔Γসɻࠓࢥ͏ͱ͍͢͝ઌݟ ੑɻΈΜͳൃදͰ͸
 ʮ ͭΒ͍ʯ͔͠ݴͬͯͳ͔ͬͨɻ

  15.  3FBDU/BUJWFNFFUVQ ୈೋճ໨ͷΠϕϯτ 100ਓೖΓ͢Δ͔ͳͱࢥͬͨΒ໊̑̌΄Ͳ ͔͠ߦ͔ͳ͔ͬͨɾɾɾɻ
 ջ͔͍͠ਓͨͪͷొஃ͕ଟ͍ɻ ̓ [JOEFYͷαϙʔτ େܕΞοϓσʔτʢ ΍ͬͱ͔ɾɾʂʂͬͯײ͚ͩ͡Ͳɺ΋͸

    ΍ࠓߋͬͯײ͡΋͋ͬͨɻ
 Ͱ΋ͳΜ͔ͩΜͩݴͬͯศརʂ
  16. ̍̌ 3FBDU/BUJWFNFFUVQ̏ ୈࡾճ໨ͷΠϕϯτ 30ਓ΄ͲͷΠϕϯτɻ
 ӡӦ͕̏ਓʹ૿͑Δɻ  3FBDU/BUJWFNFFUVQ ࢛ճ໨ͷΠϕϯτ ࢀՃऀɺൃදऀ͸ݻఆɻ
 ͜ͷࠒ͸৮͍ͬͯΔਓ͕͔ͳΓݶఆత

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

    ε͕͋ͬͨͨΊ͔ɺ࿩୊ʹͳ͍ͬͯͳ͔ͬ ͨؾ͕͢Δɾɾɾ
  18.  3FBDUKTNFFUVQɹίϥϘ ॳͷਓ௒͑Πϕϯτ ΩϟύΦʔόʔ React.js meetup༷ͱίϥϘΠϕϯτɻ
 React Native੎ͷ࢜ؾ͕Ұؾʹߴ·ͬͨؾ͕ ͢Δɻ
 ϏοΫωʔϜͷํʑͷެԋ΋͋ΓɺΠϕϯτ

    ΋࠙਌ձ΋େ੝Γ্͕ΓͷΠϕϯτͩͬͨɻ
 
 ͜ΕΛػʹReact Native΁ͷ஫໨౓্͕͕ͬ ͨʂʂʢؾ͕͢Δɾɾɾʂʂͦ͏Ͱ͋ͬͯཉ͍͠ʣ
  19. ̑ 3FBDU/BUJWFNFFUVQ ճ໨ͷΠϕϯτʢਓ௒ʣ ͜ͷࠒ͔Βɺʮ࢖ͬͯΈͨʯͱ͍͏੠ΛΑ͘ ฉ͘Α͏ʹͳΔɻ
 ࠃ಺Ͱ஫໨͞Ε͖ͯͨঢ়ଶɻ
 ࢀՃऀ΋ࠓ·Ͱͱҧͬͯɺ৽͍͠ਓͨͪ΋ݟ ड͚ΒΕΔΑ͏ʹͳͬͨɻ  3FBDU/BUJWFNFFUVQ

    ճ໨ͷΠϕϯτʢਓ௒ʣ
  20.  େܕΞοϓσʔτʢܥʣ NFUSP#VOEMFS IPPLTରԠ͕ߦΘΕΔ 3FBDU/BUJWFNFFUVQ 3FBDU/BUJWFNFFUVQ 3FBDU/BUJWFNFFUVQ େྔͷCVHpY ࢖͏ͨΊʹ͸ͪΐͬͱͨ͠ϋοΫ ͕ඞཁͩͬͨɻ

    ͱͯ΋ྑ࣭ͳΠϕϯτΛ։࠵Ͱ͖ ͨɻ Έͳ͞·ͷ͓͔͛Ͱ͢ɻ
  21.  େܕΞοϓσʔτ ܥ "OESPJE9ରԠ ґଘؔ܎͕γϯϓϧʹͳͬͨʂґଘղܾʹ಄ Λ೰·ͤͳͯ͘΋Α͘ͳ͔ͬͨ΋ɾɾɾɻ  "VUPMJOLొ৔ '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.  ೔ຊ্࢙࢙ʢଟ෼ʣɺ࠷΋ૣ͘ ɹɹɹɹSFBDUOBWJHBUJPOWʹରԠͨ͠ॻ੶ 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 Λ͍ͬ͠ΐʹ࡞Γ্͍͖͛ͯ·͠ΐ͏ʂ ࠓ೔͸ͳ͞ΕΔ͔΋ʂ