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

React Native vs iOS エンジニア - iOSDC 2017

D107509659b6f023aa60e77aef1db237?s=47 laiso
September 16, 2017

React Native vs iOS エンジニア - iOSDC 2017

D107509659b6f023aa60e77aef1db237?s=128

laiso

September 16, 2017
Tweet

Transcript

  1. React Native vs iOS ΤϯδχΞ iOSDC 2017

  2. ViewΛͲ͏࡞Δ͔ʁ

  3. Viewͷ։ൃ͸೉͍͠ • Ϣʔβʔ͸View͔Β৘ใΛಡΈऔΔ • Ϣʔβʔ͸ViewΛ௨ͯ͡ର࿩͢Δ • ։ൃऀ͸ViewΛ࡞Γ͍ͨ

  4. • ੈք࠷େͷϢʔβʔن໛Λ࣋ͭViewͷఏڙऀ

  5. Who am I ? • id:laiso • iOS/Android Developer •

    ϑϨʔϜϫʔΫݚڀՈ
  6. React Nativeͱ͸Կ͔ • "React" ͰiOS΍AndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈

  7. Reactͱ͸Կ͔ • JavaScriptͷViewϥΠϒϥϦ • ϓϥοτϑΥʔϜɺύϥμΠϜ

  8. class ArticleViewController extends Component { // loadView() render() { return

    ( <View> <Text> {this.props.model.content} </Text> <Button title="LIKE" onPress={this._handleButtonPress} /> </View> ); } }
  9. React Nativeͷ࢓૊Έ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ಺෦σʔλߏ଄Ͱܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ

  10. UIKitϓϩάϥϛϯάͷ໰୊ • ViewControllerΛத৺ͱͨ͠Viewͷߏ੒ • ViewͷංେԽ

  11. Reactͷϓϩάϥϛϯά • ViewͷඳըͷৄࡉΛϑϨʔϜϫʔΫʹ೚ͤΔ • Viewͷ݁ՌΛ௚઀ίʔυͰදݱ • એݴతͳView

  12. ReactͷએݴతͳViewͷར఺ • ঢ়ଶม਺͕ಉ͡ͳΒߏ੒͞ΕΔView(݁Ռ)΋ಉ͡ • ͢΂͕ͯ render() ʹू·Δ • ෳࡶͳViewΛมߋ͠΍͘͢͢Δ

  13. render() { return ( <View> <ArticleView model={this.article} onPress={this._handleLikePress} /> <LikeCountView

    count={this.state.likeCount} /> <FooterView /> </View> ); }
  14. ίϯϙʔωϯτࢦ޲ͳViewͷར఺ • ؅ཧͷ͠΍͢͞ • ςετͷ͠΍͢͞ • ڞ௨Խ

  15. UIViewControllerͷ໰୊ • ίϯϙʔωϯτͷڠௐੑ • addChildViewController() • addSubview(), didMoveToParentViewController()

  16. ·ͱΊɿReact͸Ͳ͏ViewΛ࡞Δͷ͔ʁ • એݴతͳViewΛίϯϙʔωϯτԽͯ͠ • ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰViewΛ࡞Δ

  17. ·ͱΊɿUIKit͸Ͳ͏ViewΛ࡞Δͷ͔ʁ • ॳظͷը໘ఆٛΛϩʔυͯ͠ • ViewΛखಈͰॻ͖׵͑Δ • ͢΂ͯΛ1ը໘ͷViewControllerʹ೚ͤΔ

  18. React Native is Dream • ຊདྷෳࡶͳView։ൃΛγϯϓϧʹͯ͠͠·͏ྗ • ύϥμΠϜɺΤίγεςϜͷڞ༗ • ݱ࣮ੈքͷ໰୊Λղܾ͢ΔͨΊʹੜ·Εٕͨज़

  19. UIKitϓϩάϥϛϯάͷ՝୊ • ໋ྩతͳViewͷଟ͞ • ॊೈੑʹ͚ܽΔComponent

  20. UIKitϓϩάϥϛϯάͷະདྷ

  21. CocoaόΠϯσΟϯάͷiOSαϙʔτ

  22. XMLϨΠΞ΢τ • Windows XAML • Android Layouts • XMLϦςϥϧ in

    Swift?
  23. ίϯϙʔωϯτࢦ޲ͷUIViewController • Storyboard NEXT • Dataflow Architecture, State Management

  24. React NativeͰʮະདྷͷiOSϓϩάϥϛϯάʯ Λ૝૾ʢ૑଄ʣ͠·ͤΜ͔ʁ $ npm i -g react-native-cli