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
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
180
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
110
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
43
18k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
Claude Code に プロジェクト管理やらせたみた
unson
6
3.8k
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
A Tale of Four Properties
chriscoyier
160
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Ace a Technical Interview
jacobian
277
23k
Thoughts on Productivity
jonyablonski
69
4.7k
Fireside Chat
paigeccino
37
3.5k
Code Reviewing Like a Champion
maltzj
524
40k
Rails Girls Zürich Keynote
gr2m
95
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Writing Fast Ruby
sferik
628
62k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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