Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Native Book
@YutamaKotaro
August 05, 2020
0
43
React Native Book
@YutamaKotaro
August 05, 2020
Tweet
Share
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
50
ライブラリはしご酒
yutamakotaro
0
63
React + Valtio
yutamakotaro
0
72
My experience for 3 years with React Native
yutamakotaro
0
35
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
960
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
880
AWS Summit2019 airCloset section
yutamakotaro
1
190
フルJSアーキテクトで作るエアークローゼット
yutamakotaro
2
420
タイタニック ロジスティック回帰
yutamakotaro
0
110
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
506
37k
KATA
mclloyd
7
8.8k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.8k
Practical Orchestrator
shlominoach
178
8.7k
Making Projects Easy
brettharned
98
4.4k
Six Lessons from altMBA
skipperchong
14
1.4k
Unsuck your backbone
ammeep
659
55k
A Tale of Four Properties
chriscoyier
149
21k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
Transcript
@januswel @YutamaKotaro @nitaking 2020/05/29 History of React Native React Native
Japan
λΧΪέϯεέ ∁݈հ ϒϦοδɺເ͕͋ΔΑͶ Ϋϥεϝιουגࣜձࣾ 5FDI-FBE/&OHJOFFS "NQMJGJFS Twitter: @janus_wel
ϢλϚίλϩ ϢλϚͨ͜Ζ͏ ΤϯδχΞྺʹ3FBDU/BUJWFྺ ͱ͍ͬͯաݴͰͳ͍ɻ λΧΪέϯεέͷखʹΑΓ3FBDU/BWJHBUJPO ʹ͔Μͯ͠શόʔδϣϯॻ͘ܦݧΛಘͨɻ גࣜձࣾΤΞʔΫϩʔθοτ ΤϯδχΞνʔϜϦʔμʔ σʔλαΠΤϯενʔϜϦʔμʔ Twitter:
@YutamaKotaro
χλϫΩατγ ਔా ཧ࢙ Twitter: @nitaking_ • ΤΞʔΫϩʔθοτॴଐ • ϢλϚͨ͜Ζ͏ࢯͷࢦಋΛड͚ React
NativeͷਓͱͳΔ • ձࣾͰ Atomic Designͷಋೖɺ ࣾͷݟੵͷഇࢭɺE2EͰϦ ϦʔεςετࣗಈԽͳͲΛߦ͏ • ຊञ͖
3FBDU/BUJWF ੜ͔Β̑ʂ
3FBDU/BUJWF+BQBOɾɾɾ
3FBDU/BUJWF+BQBOɾɾɾ ͍͍ͩͨ ̐ʂ
࣌ͷࢥ͍ग़ΛৼΓฦΓͳ͕Βɺ ࢥ͍ΛͤΑ͏ʂ
'BDF#PPLͷϋοΧιϯʹͯੜ ̑ 1VCMJDSFWJFX ̑ ΦʔϓϯιʔεԽ _ υϥήφΠྲྀߦ ΞϕϊϛΫεྲྀߦ ଟ͘ͷਓͷ͡·Γʂ
̑ 4UBUVT#BSෆࡏɾɾɾ ΦʔϓϯιʔεԽ _ 3FMFBTFίϝϯτΞτ ωΠςΟϒίʔυॻ͍ͯͨؾ͕͢Δɻ ެࣜͷυΩϡϝϯτʹ ίϝϯτΞτ͠Ζͬͯ͋ͬͨΑ͏ͳ
̑ -JTU7JFX͏͔͠ͳ͍ΑͶ ΦʔϓϯιʔεԽ _ ;JOEFY ͳʹͦΕ FlatListͱ͔ଘࡏ͠ͳ͔ͬͨɻ ΈΜͳવͷΑ͏ʹListViewͬͯͨɻ ͑ͳ͍͜ͱʹ׳Ε͗ͯ͢ ͔ͭ͑ΔϝϦοτ͕ಛʹͳ͔ͬͨؾ͕͢Δɾɾ
̑ /BWJHBUPSͬͯͨʁ ΦʔϓϯιʔεԽ _ NavigatorΛ͔ͭͬͯϧʔςΟϯάΛΜͰ ͨؾ͕͢ΔɾɾɾɻΈΜͳͭΒ͍ͬͯɾɾɻ ̒ େܕΞοϓσʔτʢ̌̎ܥʣ ͜ͷࠒSOSG͕ΘΓͱྲྀߦͬͯͨ ଞʹ͋ͬͨΜ͚ͩͬʁ
React router nativeͱ͔͋ͬͨؾ͕͢Δ
̒ େܕΞοϓσʔτ ܥ )PU3FMPBEଐ Ή͠Ζɺͳ͔ͬͨΜ͚ͩͬɾɾɾʁ ͱݴ͑Δ΄ͲͷRNͷेീ൪ɻ 4UBUVT#BSՃ jsͰωΠςΟϒͬΆ͍͜ͱͰ͖ͯײಈ ͨ͠هԱ͕ɾɾɾɻ
̒ 3FBDU/BUJWF.FFUVQ ه೦͖͢Έͳ͞·ͱͷग़ձ͍ 30ਓࢀՃऀ͍ͳ͔ͬͨؾ͕͢Δɻ ΄ͱΜͲϦϨʔγϣϯζ͞Μͷଉͷ͔ ͔ͬͨਓ͔Γসɻࠓࢥ͏ͱ͍͢͝ઌݟ ੑɻΈΜͳൃදͰ ʮ ͭΒ͍ʯ͔͠ݴͬͯͳ͔ͬͨɻ
3FBDU/BUJWFNFFUVQ ୈೋճͷΠϕϯτ 100ਓೖΓ͢Δ͔ͳͱࢥͬͨΒ໊̑̌΄Ͳ ͔͠ߦ͔ͳ͔ͬͨɾɾɾɻ ջ͔͍͠ਓͨͪͷొஃ͕ଟ͍ɻ ̓ [JOEFYͷαϙʔτ େܕΞοϓσʔτʢ ͬͱ͔ɾɾʂʂͬͯײ͚ͩ͡Ͳɺ
ࠓߋͬͯײ͋ͬͨ͡ɻ ͰͳΜ͔ͩΜͩݴͬͯศརʂ
̍̌ 3FBDU/BUJWFNFFUVQ̏ ୈࡾճͷΠϕϯτ 30ਓ΄ͲͷΠϕϯτɻ ӡӦ͕̏ਓʹ૿͑Δɻ 3FBDU/BUJWFNFFUVQ ࢛ճͷΠϕϯτ ࢀՃऀɺൃදऀݻఆɻ ͜ͷࠒ৮͍ͬͯΔਓ͕͔ͳΓݶఆత
ͩͬͨɻ
େܕΞοϓσʔτ ܥ /BWJHBUPSͷഇࢭ 3FBDU/BWJHBUJPOͷެࣜਪ͠ NavigationExperimentalʹ͕ू·ͬ ͯͨͷ͋ͬͯ༨ܭʹᎥΛੜΜͩɻ ελΠϧͷύʔηϯςʔδαϙʔτ ࠃͰɺ৮͍ͬͯΔਓ͕ݹࢀ͔ΓͰ͢ ͰʹͳΕ͖͍ͬͯͨͨΊ͔ɺϏοάχϡʔ
ε͕͋ͬͨͨΊ͔ɺʹͳ͍ͬͯͳ͔ͬ ͨؾ͕͢Δɾɾɾ
3FBDUKTNFFUVQɹίϥϘ ॳͷਓ͑Πϕϯτ ΩϟύΦʔόʔ React.js meetup༷ͱίϥϘΠϕϯτɻ React Nativeͷ࢜ؾ͕Ұؾʹߴ·ͬͨؾ͕ ͢Δɻ ϏοΫωʔϜͷํʑͷެԋ͋ΓɺΠϕϯτ
࠙ձେΓ্͕ΓͷΠϕϯτͩͬͨɻ ͜ΕΛػʹReact Nativeͷ্͕͕ͬ ͨʂʂʢؾ͕͢Δɾɾɾʂʂͦ͏Ͱ͋ͬͯཉ͍͠ʣ
̑ 3FBDU/BUJWFNFFUVQ ճͷΠϕϯτʢਓʣ ͜ͷࠒ͔ΒɺʮͬͯΈͨʯͱ͍͏ΛΑ͘ ฉ͘Α͏ʹͳΔɻ ࠃͰ͞Ε͖ͯͨঢ়ଶɻ ࢀՃऀࠓ·Ͱͱҧͬͯɺ৽͍͠ਓͨͪݟ ड͚ΒΕΔΑ͏ʹͳͬͨɻ 3FBDU/BUJWFNFFUVQ
ճͷΠϕϯτʢਓʣ
େܕΞοϓσʔτʢܥʣ NFUSP#VOEMFS IPPLTରԠ͕ߦΘΕΔ 3FBDU/BUJWFNFFUVQ 3FBDU/BUJWFNFFUVQ 3FBDU/BUJWFNFFUVQ େྔͷCVHpY ͏ͨΊʹͪΐͬͱͨ͠ϋοΫ ͕ඞཁͩͬͨɻ
ͱͯྑ࣭ͳΠϕϯτΛ։࠵Ͱ͖ ͨɻ Έͳ͞·ͷ͓͔͛Ͱ͢ɻ
େܕΞοϓσʔτ ܥ "OESPJE9ରԠ ґଘ͕ؔγϯϓϧʹͳͬͨʂґଘղܾʹ಄ Λ·ͤͳͯ͘Α͘ͳ͔ͬͨɾɾɾɻ "VUPMJOLొ 'MJQQFSαϙʔτ ΊͬͪΌେ͖͍ʂ
ࠓ·ͰͳΜͱࢥͬͯͳ͔͚ͬͨͲɺ͋ΒͨΊ ͯ։ൃڥͪΌΜͱͬͯͳ͔ͬͨΜͩͳͱ࠶ ೝࣝɻ
3FBDU/BUJWF ॳͷΦϯϥΠϯΠϕϯτ ͜ͷΠϕϯτ͕ޭͨ͠ΒɺࠓޙΦϯϥΠ ϯΠϕϯτʹྗ͍͖͍ͯͨ͠ɻ ํʹ͍ͨΓɺ߹͔ͭͣͱࢀՃ݅ʹ͔͔ ΘΒͣใΛڞ༗Ͱ͖ΔΛ࡞͍͖ͬͯͨ ͍ʂ ͠Β͘׆ಈͯ͠த͚ͬͯͲࠓޙͬͱ׆ ಈ͍͚ͯͨ͠Βͱࢥͬͯ·͢ʂʢRN
Tokyo ͞Μͱ͓ͳ͠Λɾɾɾʣ
ॻ੶ͷग़൛ ͦͯ͠ɺॻ੶ͷग़൛ߦ͍·ͨ͠ʂ
ग़൛ຊͷ
JavaScript ʹΑΔ iOS / Android ΞϓϦ։ൃͷ࣮ફ • 2020/04/27 ൃച •
ٕज़ධࣾग़൛ React Native
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
ిࢠ൛ઌߦൢച
৽ܕίϩφΟϧεͷӨڹ • Gihyo Digital Publishing • Amazon • ָఱ books
• ϤυόγυοτίϜ • Book Live ిࢠ൛ઌߦൢച
ͳͥॻ͍͔ͨʁ
ൃ React Native meetup • React Native meetup ͷӡӦใൃ৴ͳͲΛݟٕͨज़ධࣾ͞·͔Β͓͕ ͚͍͍ͨͩͨ
• ࣥචҎ֎ͯ͘͠࠷ۙ։࠵Ͱ͖͍ͯͳ͔ͬͨ • ͬͯ͘Δͷඞવͩͬͨ
ελʔτΞοϓ։ൃͷࣝΛ·ͱΊ͍ͨ • ࠓɺ༷ʑͳඞਢՊͱબࢶ͕͋Δ • React Native ཤमՊΛ͍͑ͨ߹ʹඇৗʹޮ͘ • ͕ɺ࣮ඞਢՊ͕͚ͬ͜͏͋Δ •
React • TypeScript / ECMAScript 20XX • Xcode / Android Studio • ඪ४ίϯϙʔωϯτ • etc
໎͏ͻͱΛग़ͨ͘͠ͳ͍ • React Native ΫϩεϓϥοτϑΥʔϜ։ൃͷͨΊͷΈͰͳ͍ • ͕ɺಉ༷ͷ͜ͱ͕Մೳͳબࢶ͕ଟ͘ଘࡏ͢Δ • React Native
• Flutter • Ionic • গͳ͘ͱ React Native ʹ͍ͭͯͲ͜·ͰϑϨΩγϏϦςΟ͕͋Γɺ୭ʹ ͍͍ͯΔͷ͔Λ໌Β͔ʹ͢Δ͜ͱͰ໎͏ඞཁੑΛͳ͔ͨͬͨ͘͠
ΑΈͲ͜Ζ
ຊ্࢙࢙ʢଟʣɺ࠷ૣ͘ ɹɹɹɹSFBDUOBWJHBUJPOWʹରԠͨ͠ॻ੶ 2݄ʹͰͯɺ3݄தʹؔՕॴΛશͯΛॻ͖͑4݄ॳ०ʹߘɻ ͪͳΈʹv4͕Ͱͨͱ͖ಉ͡࡞ۀΛɾɾɾ ग़൛ࣾܦ༝ͰॳΊͯʢଟʣɺ ɹɹɹɹIPPLTɺUZQFTDSJQUʹରԠͨ͠ॻ੶ hooks͕קࠂ͞Ε͍ͨ࣌ͪૣٕ͘ज़ௐࠪͨ͠ʢ׆͔͞Εͳ͔ͬͨʣ
ʢଟʣॳΊͯ%FUPYΛѻͬͨॻ੶ ॻ੶ۦಈ։ൃʢSDDʣͰΓ͖ͬͨɻExpo͕DetoxରԠ͖͠Εͯͳ͔ ͬͨΓɺϥΠϒϥϦʹΑͬͯରԠํ๏มΘͬͨΓͯ͠πϥ͔ͬͨ αϯϓϧΞϓϦʢ࣮ʣͨͩͰݟΕΔΑʂ ΒͷPull RequestͷσΟεΧογϣϯݟͲ͜Ζʢஏ͔͍ͣ͠ʣ
3FEVYʹΑΔΞϓϦઃܭͷఆࣜԽ࠷ऴ൛ʢଟʣ ٞͷͱͯͬͯ͠Β͏ఆʢԶͷࢡΛӽ͑ͯΏ͚ʣ ͳͥ3FBDU/BUJWF͕ੜ·Εͨͷ͔ʢଟʣ͡Ί ͯͷຊޠॻ੶ React Native ͷݯྲྀΛΔͨΊʹ Amazon
Ͱങ͍ͬͯͩ͘͞
ຊͷ༰͢Ͱʹաڈͷͷ
͜Ε͔Β • Re-architecturing • for Windows / macOS • Recoil
• React Native for Web ɾɾɾetc Λ͍ͬ͠ΐʹ࡞Γ্͍͖͛ͯ·͠ΐ͏ʂ ࠓͳ͞ΕΔ͔ʂ