React Nativeで始めるiOSアプリ開発

フロントエンド夏祭り in 広島

Transcript

1. React NativeͰ࢝ΊΔ iOSΞϓϦ։ൃ FED Summer Festival 2017 @iioffice Hiroshima by yudai524
2. ࣗݾ঺հ SPEAKER ▸ খ੢ ༤େ ▸ @yudai524 ▸ גࣜձࣾϫϯμʔφοπ ▸ Lifmo
5. React Native ͱ͸ʁ
6. React Nativeͱ͸ʁ ReactͰϞόΠϧΞϓϦͷ։ൃ͕Ͱ͖Δ΍ͭ ▸ Learn once, write anywhere. ▸ Reactͷ࢓૊ΈΛ࢖ͬͯΞϓϦ։ൃ͕ग़དྷΔ ▸ iOS΋Android΋͍͚Δ ▸ ͪΌΜͱωΠςΟϒͬΆ͍ ▸ طଘͷΞϓϦͷωΠςΟϒίʔυʹ΋౷߹Մೳ
7. React Nativeͱ͸ʁ ReactͰHello world!
8. React Nativeͱ͸ʁ React NativeͰHello world!
9. React Native Λ࠾༻͍ͯ͠ΔΞϓϦ
11. React Native Λ࠾༻ͯ͠Έͯײͨ͡ϝϦοτ
12. React NativeΛ࠾༻ͯ͠Έͯײͨ͡ϝϦοτ ֶशίετͷ௿͞ ▸ ͦ΋ͦ΋JavaScriptͰॻ͚Δϋʔυϧͷ௿͞ ▸ React΍ΒReduxपΓͷܦݧ͕͋Ε͹΋ͬͱ௿͍ ▸ खʹೃછΜͩΤσΟλͱλʔϛφϧͰ։ൃ ▸ Xcode͸࠷௿ݶͰ͍͍ ▸ εϓϥογϡεΫϦʔϯͷઃఆ ▸ ΞʔΧΠϒͱϏϧυͷఏग़ ▸ αϯϓϧίʔυ͕๛෋ ▸ Native Base Kitchen Sink ▸ F8 App 2016 ▸ Hacker News React Native
13. React NativeΛ࠾༻ͯ͠Έͯײͨ͡ϝϦοτ ։ൃεϐʔυ ▸ Hot Reloading ▸ ίϯύΠϧͷ଴ͪ࣌ؒͳ͠ ▸ Twitterݟʹߦͬͯ͠·ͬͯɺͦͷ··ؼͬͯ͜ͳ͍໰୊ ▸ Ϗϧυ͸جຊɺ࣮ػςετͱΞʔΧΠϒͷͱ͖͚ͩ ▸ Chromeͷ։ൃऀπʔϧͬΆ͍σόοΨ ▸ React Native Debugger ▸ ΋͸΍Web։ൃฒͷεϐʔυʢମײ
14. React NativeΛ࠾༻ͯ͠Έͯײͨ͡ϝϦοτ ରԠϓϥοτϑΥʔϜͷଟ͞ ▸ ରԠϓϥοτϑΥʔϜ ▸ iOS ▸ Android ▸ Apple TV (tvOS) ▸ Amazon Fire TV Stick ▸ ReactͰॻ͍ͨWebͱ͔طʹ͋Ε͹ReduxपΓ͸ྲྀ༻ग़དྷΔ ▸ ٯ΋વΓ
15. React Native Λ࠾༻ͯ͠Έͯײͨ͡σϝϦοτ
16. React NativeΛ࠾༻ͯ͠Έͯײͨ͡σϝϦοτ ࠓͷͱ͜Ζಛʹͳ͠ ▸ Α͘ݴΘΕΔͷ͸… ▸ jsͰॻ͘ϩδοΫͷ෦෼ʹॏ͍ॲཧ͕ೖΔͱΩπ͍Β͍͠ ▸ ར༻ͯ͠ΔSDK͕RNରԠͯ͠ͳ͍ͱࣗ෼ͰϒϦοδ͢Δ ωΠςΟϒίʔυΛॻ͔ͳ͍ͱ͍͚ͳ͔ͬͨΓ͢Δ
17. ݁࿦ɿ࢖ͬͯΈͯͲ͏ͳͷʁ
18. ݁࿦ɿ࢖ͬͯΈͯͲ͏ͳͷʁ ελʔτΞοϓʹ͸΋͍ͬͯͩͬͨ͜ ▸ සൟʹมߋ͞ΕΔཁ݅ ▸ ϐϘοτ ▸ Ϣʔβʔ΍޿ࠂओ͔ΒͷϑΟʔυόοΫ ▸ iOSͱAndroidͱϒϥ΢βʹՃ͑ͯɺApple TVͱFire TV StickͷରԠ… ▸ ٻΊΒΕΔεϐʔυײ ▸ ౤ࢿՈͷ໨ ▸ গͳ͍ΤϯδχΞ ▸ ݱࡏ1໊
19. ͪΐͬͱಈ͔ͯ͠Έ·͔͢
20. ಈ͔ͯ͠ΈΔ ͪͳΈʹWebγϛϡϨʔλʔ͕͋Γ·͢ ▸ https://github.com/dabbott/react-native-web-player ▸ υΩϡϝϯτͷԣʹ͍ͭͯΔ΍ͭͱಉ͡΍ͭ
21. Ҏ্Ͱ͢ɻ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ