Slide 1

Slide 1 text

React Native vs iOS ΤϯδχΞ iOSDC 2017

Slide 2

Slide 2 text

ViewΛͲ͏࡞Δ͔ʁ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Who am I ? • id:laiso • iOS/Android Developer • ϑϨʔϜϫʔΫݚڀՈ

Slide 6

Slide 6 text

React Nativeͱ͸Կ͔ • "React" ͰiOS΍AndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

class ArticleViewController extends Component { // loadView() render() { return ( {this.props.model.content} ); } }

Slide 9

Slide 9 text

React Nativeͷ࢓૊Έ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ಺෦σʔλߏ଄Ͱܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

render() { return ( ); }

Slide 14

Slide 14 text

ίϯϙʔωϯτࢦ޲ͳViewͷར఺ • ؅ཧͷ͠΍͢͞ • ςετͷ͠΍͢͞ • ڞ௨Խ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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