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
740
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.1k
Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers
laiso
3
2.1k
Objective-C Toolchain in 2017
laiso
0
1.4k
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
大人の学び - マイクの持ち方について
kawaguti
PRO
3
550
EC-CUBEはサーバレスで動かせるのか?
yukishimada
1
130
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
5
1.7k
Codar: Arte ou Ciência?! A Jornada de um DEV na Creator Economy
vclementino
0
190
一歩ずつ成長しながら進める ZOZOの基幹システムリプレイス/Growing Stap by Stap ZOZO BackOffice System Replacement
cocet33000
2
510
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
600
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
0
250
AppSheet タスク管理アプリ 中級編
comucal
PRO
0
110
Amazon Bedrock Knowledge basesにLangfuse導入してみた
sonoda_mj
2
400
開発者体験を定量的に把握する手法と活用事例
ham0215
0
180
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
310
エンジニアリング 💰Moneyジャー / Engineering Money-ger
kenchan
2
320
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.2k
Optimizing for Happiness
mojombo
377
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
590
Site-Speed That Sticks
csswizardry
4
430
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How GitHub (no longer) Works
holman
314
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
570
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.3k
Statistics for Hackers
jakevdp
797
220k
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