Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native vs iOS エンジニア - iOSDC 2017
Search
laiso
September 16, 2017
Technology
2
760
React Native vs iOS エンジニア - iOSDC 2017
http://blog.lai.so/entry/iosdc2017-talk
laiso
September 16, 2017
Tweet
Share
More Decks by laiso
See All by laiso
Firebaseを使った成長するモバイルアプリのための高速なプロダクト開発 / Rapid Mobile Application Development using #Firebase
laiso
4
4.9k
iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018
laiso
6
4.2k
Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers
laiso
3
2.1k
Objective-C Toolchain in 2017
laiso
0
1.5k
Quickで体験するテストの構造化
laiso
2
2.8k
Apple Pay in 5 minutes
laiso
0
160
Apple Pay In The Real World
laiso
0
140
スタートアップの人材獲得戦略
laiso
2
11k
MVVM for iOS
laiso
4
2.2k
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
180
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.5k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.4k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
16k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Faster Mobile Websites
deanohume
307
31k
The Invisible Side of Design
smashingmag
301
51k
Making Projects Easy
brettharned
116
6.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
37
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Transcript
React Native vs iOS ΤϯδχΞ iOSDC 2017
ViewΛͲ͏࡞Δ͔ʁ
Viewͷ։ൃ͍͠ • ϢʔβʔView͔ΒใΛಡΈऔΔ • ϢʔβʔViewΛ௨ͯ͡ର͢Δ • ։ൃऀViewΛ࡞Γ͍ͨ
• ੈք࠷େͷϢʔβʔنΛ࣋ͭViewͷఏڙऀ
Who am I ? • id:laiso • iOS/Android Developer •
ϑϨʔϜϫʔΫݚڀՈ
React NativeͱԿ͔ • "React" ͰiOSAndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈
ReactͱԿ͔ • JavaScriptͷViewϥΠϒϥϦ • ϓϥοτϑΥʔϜɺύϥμΠϜ
class ArticleViewController extends Component { // loadView() render() { return
( <View> <Text> {this.props.model.content} </Text> <Button title="LIKE" onPress={this._handleButtonPress} /> </View> ); } }
React NativeͷΈ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ෦σʔλߏͰܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ
UIKitϓϩάϥϛϯάͷ • ViewControllerΛத৺ͱͨ͠Viewͷߏ • ViewͷංେԽ
Reactͷϓϩάϥϛϯά • ViewͷඳըͷৄࡉΛϑϨʔϜϫʔΫʹͤΔ • Viewͷ݁ՌΛίʔυͰදݱ • એݴతͳView
ReactͷએݴతͳViewͷར • ঢ়ଶม͕ಉ͡ͳΒߏ͞ΕΔView(݁Ռ)ಉ͡ • ͕ͯ͢ render() ʹू·Δ • ෳࡶͳViewΛมߋ͘͢͢͠Δ
render() { return ( <View> <ArticleView model={this.article} onPress={this._handleLikePress} /> <LikeCountView
count={this.state.likeCount} /> <FooterView /> </View> ); }
ίϯϙʔωϯτࢦͳViewͷར • ཧͷ͢͠͞ • ςετͷ͢͠͞ • ڞ௨Խ
UIViewControllerͷ • ίϯϙʔωϯτͷڠௐੑ • addChildViewController() • addSubview(), didMoveToParentViewController()
·ͱΊɿReactͲ͏ViewΛ࡞Δͷ͔ʁ • એݴతͳViewΛίϯϙʔωϯτԽͯ͠ • ίϯϙʔωϯτΛΈ߹ΘͤΔ͜ͱͰViewΛ࡞Δ
·ͱΊɿUIKitͲ͏ViewΛ࡞Δͷ͔ʁ • ॳظͷը໘ఆٛΛϩʔυͯ͠ • ViewΛखಈͰॻ͖͑Δ • ͯ͢Λ1ը໘ͷViewControllerʹͤΔ
React Native is Dream • ຊདྷෳࡶͳView։ൃΛγϯϓϧʹͯ͠͠·͏ྗ • ύϥμΠϜɺΤίγεςϜͷڞ༗ • ݱ࣮ੈքͷΛղܾ͢ΔͨΊʹੜ·Εٕͨज़
UIKitϓϩάϥϛϯάͷ՝ • ໋ྩతͳViewͷଟ͞ • ॊೈੑʹ͚ܽΔComponent
UIKitϓϩάϥϛϯάͷະདྷ
CocoaόΠϯσΟϯάͷiOSαϙʔτ
XMLϨΠΞτ • Windows XAML • Android Layouts • XMLϦςϥϧ in
Swift?
ίϯϙʔωϯτࢦͷUIViewController • Storyboard NEXT • Dataflow Architecture, State Management
React NativeͰʮະདྷͷiOSϓϩάϥϛϯάʯ Λ૾ʢʣ͠·ͤΜ͔ʁ $ npm i -g react-native-cli