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

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