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

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

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

iOSアプリエンジニアがReact Nativeを使ってみての雑感についてです、

91d36c66b64ce58f3e749d9d921aae69?s=128

Shuichi Nagao

March 23, 2018
Tweet

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