Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

χλϫΩατγ ਔా࿬ ཧ࢙ Twitter: @nitaking_ • ΤΞʔΫϩʔθοτॴଐ • ϢλϚͨ͜Ζ͏ࢯͷࢦಋΛड͚ React NativeͷਓͱͳΔ • ձࣾͰ͸ Atomic Designͷಋೖɺ ࣾ಺ͷ೔਺ݟੵͷഇࢭɺE2EͰϦ ϦʔεςετࣗಈԽͳͲΛߦ͏ • ೔ຊञ޷͖

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

3FBDU/BUJWF+BQBO͸ɾɾɾ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

 'BDF#PPLͷϋοΧιϯʹͯ஀ੜ ̑ 1VCMJDSFWJFX ̑ ΦʔϓϯιʔεԽ _ υϥήφΠྲྀߦ ΞϕϊϛΫεྲྀߦ ଟ͘ͷਓͷ͸͡·Γʂ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

̍̌ 3FBDU/BUJWFNFFUVQ̏ ୈࡾճ໨ͷΠϕϯτ 30ਓ΄ͲͷΠϕϯτɻ
 ӡӦ͕̏ਓʹ૿͑Δɻ  3FBDU/BUJWFNFFUVQ ࢛ճ໨ͷΠϕϯτ ࢀՃऀɺൃදऀ͸ݻఆɻ
 ͜ͷࠒ͸৮͍ͬͯΔਓ͕͔ͳΓݶఆత ͩͬͨɻ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

 3FBDUKTNFFUVQɹίϥϘ ॳͷਓ௒͑Πϕϯτ ΩϟύΦʔόʔ React.js meetup༷ͱίϥϘΠϕϯτɻ
 React Native੎ͷ࢜ؾ͕Ұؾʹߴ·ͬͨؾ͕ ͢Δɻ
 ϏοΫωʔϜͷํʑͷެԋ΋͋ΓɺΠϕϯτ ΋࠙਌ձ΋େ੝Γ্͕ΓͷΠϕϯτͩͬͨɻ
 
 ͜ΕΛػʹReact Native΁ͷ஫໨౓্͕͕ͬ ͨʂʂʢؾ͕͢Δɾɾɾʂʂͦ͏Ͱ͋ͬͯཉ͍͠ʣ

Slide 19

Slide 19 text

̑ 3FBDU/BUJWFNFFUVQ ճ໨ͷΠϕϯτʢਓ௒ʣ ͜ͷࠒ͔Βɺʮ࢖ͬͯΈͨʯͱ͍͏੠ΛΑ͘ ฉ͘Α͏ʹͳΔɻ
 ࠃ಺Ͱ஫໨͞Ε͖ͯͨঢ়ଶɻ
 ࢀՃऀ΋ࠓ·Ͱͱҧͬͯɺ৽͍͠ਓͨͪ΋ݟ ड͚ΒΕΔΑ͏ʹͳͬͨɻ  3FBDU/BUJWFNFFUVQ ճ໨ͷΠϕϯτʢਓ௒ʣ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

 େܕΞοϓσʔτ ܥ "OESPJE9ରԠ ґଘؔ܎͕γϯϓϧʹͳͬͨʂґଘղܾʹ಄ Λ೰·ͤͳͯ͘΋Α͘ͳ͔ͬͨ΋ɾɾɾɻ  "VUPMJOLొ৔ 'MJQQFSαϙʔτ ΊͬͪΌେ͖͍ʂ
 ࠓ·ͰͳΜͱ΋ࢥͬͯͳ͔͚ͬͨͲɺ͋ΒͨΊ ͯ։ൃ؀ڥͪΌΜͱ੔ͬͯͳ͔ͬͨΜͩͳͱ࠶ ೝࣝɻ

Slide 22

Slide 22 text

 3FBDU/BUJWF ॳͷΦϯϥΠϯΠϕϯτ ͜ͷΠϕϯτ͕੒ޭͨ͠Βɺࠓޙ͸ΦϯϥΠ ϯΠϕϯτʹ஫ྗ͍͖͍ͯͨ͠ɻ
 ஍ํʹ͍ͨΓɺ౎߹͔ͭͣͱࢀՃ৚݅ʹ͔͔ ΘΒͣ৘ใΛڞ༗Ͱ͖Δ৔Λ࡞͍͖ͬͯͨ ͍ʂ
 ͠͹Β͘׆ಈͯ͠த͚ͬͯͲࠓޙ͸΋ͬͱ׆ ಈ͍͚ͯͨ͠Βͱࢥͬͯ·͢ʂʢRN Tokyo ͞Μͱ΋͓͸ͳ͠Λɾɾɾʣ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ग़൛ຊͷ࿩

Slide 25

Slide 25 text

JavaScript ʹΑΔ iOS / Android ΞϓϦ։ൃͷ࣮ફ • 2020/04/27 ൃച • ٕज़ධ࿦ࣾग़൛ React Native

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ిࢠ൛ઌߦൢച

Slide 28

Slide 28 text

৽ܕίϩφ΢ΟϧεͷӨڹ • Gihyo Digital Publishing • Amazon • ָఱ books • ϤυόγυοτίϜ • Book Live ిࢠ൛ઌߦൢച

Slide 29

Slide 29 text

ͳͥॻ͍͔ͨʁ

Slide 30

Slide 30 text

ൃ୺͸ React Native meetup • React Native meetup ͷӡӦ΍৘ใൃ৴ͳͲΛݟٕͨज़ධ࿦ࣾ͞·͔Β͓੠͕ ͚͍͍ͨͩͨ • ࣥචҎ֎΋๩ͯ͘͠࠷ۙ։࠵Ͱ͖͍ͯͳ͔ͬͨ • ໭ͬͯ͘Δͷ͸ඞવͩͬͨ

Slide 31

Slide 31 text

ελʔτΞοϓ։ൃͷ஌ࣝΛ·ͱΊ͍ͨ • ࠓ೔ɺ༷ʑͳඞਢՊ໨ͱબ୒ࢶ͕͋Δ • React Native ͸ཤमՊ໨Λ཈͍͑ͨ৔߹ʹඇৗʹޮ͘ • ͕ɺ࣮͸ඞਢՊ໨͕͚ͬ͜͏͋Δ • React • TypeScript / ECMAScript 20XX • Xcode / Android Studio • ඪ४ίϯϙʔωϯτ • etc

Slide 32

Slide 32 text

໎͏ͻͱΛग़ͨ͘͠ͳ͍ • React Native ͸ΫϩεϓϥοτϑΥʔϜ։ൃͷͨΊͷ࿮૊ΈͰ͸ͳ͍ • ͕ɺಉ༷ͷ͜ͱ͕Մೳͳબ୒ࢶ͕ଟ͘ଘࡏ͢Δ • React Native • Flutter • Ionic • গͳ͘ͱ΋ React Native ʹ͍ͭͯ͸Ͳ͜·ͰϑϨΩγϏϦςΟ͕͋Γɺ୭ʹ ޲͍͍ͯΔͷ͔Λ໌Β͔ʹ͢Δ͜ͱͰ໎͏ඞཁੑΛͳ͔ͨͬͨ͘͠

Slide 33

Slide 33 text

ΑΈͲ͜Ζ

Slide 34

Slide 34 text

 ೔ຊ্࢙࢙ʢଟ෼ʣɺ࠷΋ૣ͘ ɹɹɹɹSFBDUOBWJHBUJPOWʹରԠͨ͠ॻ੶ 2݄ʹͰͯɺ3݄தʹ͸ؔ܎ՕॴΛશͯΛॻ͖׵͑4݄ॳ०ʹ୤ߘɻ
 ͪͳΈʹv4͕Ͱͨͱ͖΋ಉ͡࡞ۀΛɾɾɾ  ग़൛ࣾܦ༝Ͱ͸ॳΊͯʢଟ෼ʣɺ ɹɹɹɹIPPLTɺUZQFTDSJQUʹରԠͨ͠ॻ੶ hooks͕קࠂ͞Εͨ࣌΋͍ͪૣٕ͘ज़ௐࠪͨ͠ʢ׆͔͞Εͳ͔ͬͨʣ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

͜Ε͔Β • Re-architecturing • for Windows / macOS • Recoil • React Native for Web
 ɾɾɾetc Λ͍ͬ͠ΐʹ࡞Γ্͍͖͛ͯ·͠ΐ͏ʂ ࠓ೔͸ͳ͞ΕΔ͔΋ʂ