iOSアプリエンジニアがReact Nativeを使ってみて

Transcript

1. ωΠςΟϒͷ ΞϓϦΤϯδχΞ͔ΒΈͨ REACT NATIVE 20180323 @NGO275 1

2. ࿩͢͜ͱ ▸ React Nativeͱ͸ ▸ ωΠςΟϒ։ൃͱͷҧ͍ ▸ ؀ڥߏங౳ ▸ ઃܭɾ࣮૷

   ▸ ςετ ▸ ·ͱΊ 2

3. REACT NATIVEͱ͸ʁ ▸ React͸Facebook͕։ൃͨ͠JavaScriptͷϑϨʔϜϫʔΫ ▸ React Native(ҎԼRN)͸ͦΕΛiOS/AndroidʹԠ༻ͨ͠΋ͷ ▸ 2015೥3݄ʹiOSɺಉ೥9݄ʹAndroid͕ϦϦʔε͞Εͨ ▸

   ಉ͡JSͷίʔυͰiOS / Android͕ಈ͘ ▸ جຊతʹReactʹͦͬ͘Γ ▸ ωΠςΟϒͷUIΛ࢖͍ɺϝΠϯͷUIεϨουͱ͸ผͰಈ͘ͷ ͰύϑΥʔϚϯε΋ѱ͘ͳ͍ 3

4. REACT NATIVEͱ͸ʁ RNΛ࢖͍ͬͯΔΞϓϦͨͪ https://facebook.github.io/react-native/showcase.html 4

5. ωΠςΟϒ։ൃͱͷҧ͍ React Native ωΠςΟϒ IDE ਓʹΑΔ VS Code / IntelliJ

   / etc. Xcode / Android Studio ݴޠ JavaScriptͷΈ ܕ͕ͳ͍ Swift / Kotlin (Objective-c / Java) ܕ͕͋Δ σόοά ํ๏ ैདྷͷIDE͚ͩͰͳ͘ChromeͰ JavaScript௨Γͷσόοά͕Ͱ͖Δ IDEΛར༻͢Δ͜ͱʹͳΔ Ϗϧυ ϗοτϦϩʔυͰ ίʔυͷ൓ө͕Ͱ͖Δ ຖ౓෼୯ҐͰ଴ͭ͜ͱ͕͋Δ 5

6. ωΠςΟϒ։ൃͱͷҧ͍ ~؀ڥ·ΘΓ~ ▸ ಉ͡؀ڥͳ͸ͣͳͷʹਓʹΑͬͯ͸Ϗϧυ͕Ͱ͖ͳ͔ͬͨΓ͢Δʢґଘ͍ͯ͠Δ΋ͷ ͕ଟ͍ʣ ▸ ωοτͷ৘ใ͕͙͢ݹͯ͘࢖͑ͳ͍΋ͷʹͳΔ ▸ ೔ຊޠͷ৘ใ͸ݹͯ͘ࢀߟʹͳΒͳ͍͜ͱ͕ଟ͍ ▸

   όά΍Τϥʔʹ͍ͭͯௐ΂͍ͯΔ࣌ɺؾͮ͘ͱGitHubͷIssueΛݟ͍ͯΔ ▸ ࠔͬͨΒԿͰ΋࠶ىಈ 6

7. ωΠςΟϒ։ൃͱͷҧ͍ ~ઃܭ~ ▸ RN͸Reactͷࢥ૝Λܧঝ͍ͯ͠ΔͷͰɺωΠςΟϒͷϏϡʔͷϥΠϑαΠ Ϋϧͱ͸ҟͳΔ࣮૷Λ͢Δඞཁ͕͋Δ ▸ Props / State /

   Component ͱ͍͏֓೦͕ωΠςΟϒʹ͸ͳ͍ ▸ viewWillAppearͷΑ͏ͳϝιου͕ͳ͍ ▸ RNͰ͸جຊReduxΛར༻͢Δ͜ͱʹͳΔ͕Α͋͘ΔωΠςΟϒΞϓϦͷ ઃܭํ਑ͱ͸େ͖͘ҟͳΔ ▸ reduxͰ͸ɺStore͕άϩʔόϧʹΞϓϦͷঢ়ଶ؅ཧΛ͠ɺView͸ͦͷ Storeͷঢ়ଶΛ؂ࢹͯ͠มԽ͕͋Ε͹࠶ඳը͞ΕΔ ▸ RN+ReduxͰͲ͏΍ͬͯϏδωεϩδοΫΛॻ͍͍ͯ͘ͷ͔ͱ͍͏஌ ݟ͕ѹ౗తʹগͳ͍ 7

8. ωΠςΟϒ։ൃͱͷҧ͍ ~࣮૷~ ▸ Navigationͷ࣮૷͕RNͩͱϥΠϒϥϦબఆ͔Β࢝·Δ ▸ ͦ΋ͦ΋ඪ४ͷNavigation͕͠ΐ΅͍ ▸ React Native +

   ReduxͳΒreact-navigation͕ྑ͍͔ ▸ UIͷ࣮૷͸React(Web frontend)ͷͦΕʹۙ͘ɺωΠςΟϒΞϓϦͷͦΕ ͱ͸͔͚཭Ε͍ͯΔ ▸ CSS΍flexboxͱ͍ͬͨ֓೦͕ωΠςΟϒΞϓϦʹ͸ͳ͍ ▸ ωΠςΟϒͰ͸౰ͨΓલͷίϯϙʔωϯτΛ࢖͏ΑΓ΋native-base΍ RN͕ඪ४Ͱαϙʔτ͍ͯ͠Δ΋ͷΛར༻͢Δ͜ͱʹͳΔ ▸ σβΠϯ΋ωΠςΟϒͱ͍͏ΑΓ͸গ͠WebʹدͤΔඞཁ͕͋Δ 8

9. ωΠςΟϒ։ൃͱͷҧ͍ ~࣮૷~ ▸ OS͕αϙʔτ͍ͯ͠ΔAPI΍ωΠςΟϒ޲͚ͷ֎෦ͷSDKΛར༻͢Δ࣌ʹ ωΠςΟϒͷ࣮૷͕ඞཁʹͳΔ͜ͱ͕͋Δ ▸ ιʔείʔυ͕iOS / AndroidͰجຊಉ͡ͳͷͰɺUI͕ϓϥοτϑΥʔϜ ʹΑͬͯେ͖͘ม͑Α͏ͱ͢Δͱ෼ذ΋େ͖͘ͳͬͯෳࡶʹͳΔ

   ▸ ωΠςΟϒͰ͸ҰॠͰ࣮૷Ͱ͖Δ͜ͱ΋RNͩͱ׳Εͳ͍͏ͪ͸͙͢Ͱ͖ Δͷ͔Θ͔Βͣɺ޻਺ͷݟੵ΋Γ΋໽հͩͬͨ ▸ ʮ͜ͷσβΠϯ͙ͬͯ͢Ͱ͖·͢ʁʯ͕͙͢ʹ౴͑ΒΕͳ͔ͬͨ ▸ iOS / AndroidͰϩδοΫ͕࣮͸ҧ͍ͬͯͨɺͱ͍͏൵͕ܶى͜Βͳ͍ ▸ paymoͰ͸͜͏͍͏൵͕ܶ࠷ۙଟ͘ൃ֮ͨ͠ 9

10. ωΠςΟϒ։ൃͱͷҧ͍ ~ςετ~ ▸ mocha΍jestͱ͔JavaScriptͰͷςετ͕ී௨ʹ͔͚Δ ▸ iOSͱൺ΂ͯΉ͠Ζ৘ใ͕ଟ͍ ▸ CIͷηοτΞοϓʹ͍ͭͯRNͰͷ஌ݟ͕গͳͯͭ͘Β͍ 10

11. ·ͱΊ ▸ RNͰͷΞϓϦ։ൃ͸Webͷ։ൃΛ͍ͯ͠Δײ֮ʹۙ͘WebΤϯδχΞͷ ํ͕ೃછΈ΍ͦ͢͏͕ͩɺiOS / Androidͷ஌ݟ͸͠͹͠͹ඞཁʹͳΔ ▸ Ͳ͏͍͏࣌ʹ޲͍͍ͯΔͷ͔ ▸ ྆OSΛͱʹ͔͘ૣ͘6ׂఔ౓ͷ׬੒౓Ͱ࡞Δʹ͸RNͷํ͕ѹ౗తʹૣ

    ͍ ▸ ҰํͷϓϥοτϑΥʔϜ͚ͩΞϓϦΛ࡞ΔͳΒෆ޲͖ 11