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
iOSアプリエンジニアがReact Nativeを使ってみて
Search
Shuichi Nagao
March 23, 2018
Programming
0
270
iOSアプリエンジニアがReact Nativeを使ってみて
iOSアプリエンジニアがReact Nativeを使ってみての雑感についてです、
Shuichi Nagao
March 23, 2018
Tweet
Share
More Decks by Shuichi Nagao
See All by Shuichi Nagao
UX for Key Management
ngo275
0
91
深センではテクノロジーを使う人がイノベーションを起こしている
ngo275
0
520
スマートコントラクトのデプロイって何だろう
ngo275
0
750
プロトタイピングするならFirebaseを使ってみよう
ngo275
0
1.7k
Ethereumで開発を始めるなら知っておきたいこと
ngo275
10
4.9k
スマートコントラクトをHTTPで実行する
ngo275
0
110
EOSでスマートコントラクトを実行してみる
ngo275
0
1.1k
中東のシリコンバレーことイスラエルに行ってきた
ngo275
0
120
ペイモのアーキテクチャ
ngo275
0
640
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Open source software: how to live long and go far
gaelvaroquaux
0
620
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
『品質』という言葉が嫌いな理由
korimu
0
160
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
WebDriver BiDiとは何なのか
yotahada3
1
140
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
sappoRo.R #12 初心者セッション
kosugitti
0
230
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
4 Signs Your Business is Dying
shpigford
182
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for humans not robots
tammielis
250
25k
Code Reviewing Like a Champion
maltzj
521
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
ωΠςΟϒͷ ΞϓϦΤϯδχΞ͔ΒΈͨ REACT NATIVE 20180323 @NGO275 1
͢͜ͱ ▸ React Nativeͱ ▸ ωΠςΟϒ։ൃͱͷҧ͍ ▸ ڥߏங ▸ ઃܭɾ࣮
▸ ςετ ▸ ·ͱΊ 2
REACT NATIVEͱʁ ▸ ReactFacebook͕։ൃͨ͠JavaScriptͷϑϨʔϜϫʔΫ ▸ React Native(ҎԼRN)ͦΕΛiOS/AndroidʹԠ༻ͨ͠ͷ ▸ 20153݄ʹiOSɺಉ9݄ʹAndroid͕ϦϦʔε͞Εͨ ▸
ಉ͡JSͷίʔυͰiOS / Android͕ಈ͘ ▸ جຊతʹReactʹͦͬ͘Γ ▸ ωΠςΟϒͷUIΛ͍ɺϝΠϯͷUIεϨουͱผͰಈ͘ͷ ͰύϑΥʔϚϯεѱ͘ͳ͍ 3
REACT NATIVEͱʁ RNΛ͍ͬͯΔΞϓϦͨͪ https://facebook.github.io/react-native/showcase.html 4
ωΠςΟϒ։ൃͱͷҧ͍ React Native ωΠςΟϒ IDE ਓʹΑΔ VS Code / IntelliJ
/ etc. Xcode / Android Studio ݴޠ JavaScriptͷΈ ܕ͕ͳ͍ Swift / Kotlin (Objective-c / Java) ܕ͕͋Δ σόοά ํ๏ ैདྷͷIDE͚ͩͰͳ͘ChromeͰ JavaScript௨Γͷσόοά͕Ͱ͖Δ IDEΛར༻͢Δ͜ͱʹͳΔ Ϗϧυ ϗοτϦϩʔυͰ ίʔυͷө͕Ͱ͖Δ ຖ୯ҐͰͭ͜ͱ͕͋Δ 5
ωΠςΟϒ։ൃͱͷҧ͍ ~ڥ·ΘΓ~ ▸ ಉ͡ڥͳͣͳͷʹਓʹΑͬͯϏϧυ͕Ͱ͖ͳ͔ͬͨΓ͢Δʢґଘ͍ͯ͠Δͷ ͕ଟ͍ʣ ▸ ωοτͷใ͕͙͢ݹͯ͑͘ͳ͍ͷʹͳΔ ▸ ຊޠͷใݹͯ͘ࢀߟʹͳΒͳ͍͜ͱ͕ଟ͍ ▸
όάΤϥʔʹ͍ͭͯௐ͍ͯΔ࣌ɺؾͮ͘ͱGitHubͷIssueΛݟ͍ͯΔ ▸ ࠔͬͨΒԿͰ࠶ىಈ 6
ωΠςΟϒ։ൃͱͷҧ͍ ~ઃܭ~ ▸ RNReactͷࢥΛܧঝ͍ͯ͠ΔͷͰɺωΠςΟϒͷϏϡʔͷϥΠϑαΠ ΫϧͱҟͳΔ࣮Λ͢Δඞཁ͕͋Δ ▸ Props / State /
Component ͱ͍͏֓೦͕ωΠςΟϒʹͳ͍ ▸ viewWillAppearͷΑ͏ͳϝιου͕ͳ͍ ▸ RNͰجຊReduxΛར༻͢Δ͜ͱʹͳΔ͕Α͋͘ΔωΠςΟϒΞϓϦͷ ઃܭํͱେ͖͘ҟͳΔ ▸ reduxͰɺStore͕άϩʔόϧʹΞϓϦͷঢ়ଶཧΛ͠ɺViewͦͷ Storeͷঢ়ଶΛࢹͯ͠มԽ͕͋Ε࠶ඳը͞ΕΔ ▸ RN+ReduxͰͲ͏ͬͯϏδωεϩδοΫΛॻ͍͍ͯ͘ͷ͔ͱ͍͏ ݟ͕ѹతʹগͳ͍ 7
ωΠςΟϒ։ൃͱͷҧ͍ ~࣮~ ▸ Navigationͷ࣮͕RNͩͱϥΠϒϥϦબఆ͔Β࢝·Δ ▸ ͦͦඪ४ͷNavigation͕͠ΐ΅͍ ▸ React Native +
ReduxͳΒreact-navigation͕ྑ͍͔ ▸ UIͷ࣮React(Web frontend)ͷͦΕʹۙ͘ɺωΠςΟϒΞϓϦͷͦΕ ͱ͔͚Ε͍ͯΔ ▸ CSSflexboxͱ͍ͬͨ֓೦͕ωΠςΟϒΞϓϦʹͳ͍ ▸ ωΠςΟϒͰͨΓલͷίϯϙʔωϯτΛ͏ΑΓnative-base RN͕ඪ४Ͱαϙʔτ͍ͯ͠ΔͷΛར༻͢Δ͜ͱʹͳΔ ▸ σβΠϯωΠςΟϒͱ͍͏ΑΓগ͠WebʹدͤΔඞཁ͕͋Δ 8
ωΠςΟϒ։ൃͱͷҧ͍ ~࣮~ ▸ OS͕αϙʔτ͍ͯ͠ΔAPIωΠςΟϒ͚ͷ֎෦ͷSDKΛར༻͢Δ࣌ʹ ωΠςΟϒͷ࣮͕ඞཁʹͳΔ͜ͱ͕͋Δ ▸ ιʔείʔυ͕iOS / AndroidͰجຊಉ͡ͳͷͰɺUI͕ϓϥοτϑΥʔϜ ʹΑͬͯେ͖͘ม͑Α͏ͱ͢Δͱذେ͖͘ͳͬͯෳࡶʹͳΔ
▸ ωΠςΟϒͰҰॠͰ࣮Ͱ͖Δ͜ͱRNͩͱ׳Εͳ͍͏͙ͪ͢Ͱ͖ Δͷ͔Θ͔ΒͣɺͷݟੵΓհͩͬͨ ▸ ʮ͜ͷσβΠϯ͙ͬͯ͢Ͱ͖·͢ʁʯ͕͙͢ʹ͑ΒΕͳ͔ͬͨ ▸ iOS / AndroidͰϩδοΫ͕࣮ҧ͍ͬͯͨɺͱ͍͏൵͕ܶى͜Βͳ͍ ▸ paymoͰ͜͏͍͏൵͕ܶ࠷ۙଟ͘ൃ֮ͨ͠ 9
ωΠςΟϒ։ൃͱͷҧ͍ ~ςετ~ ▸ mochajestͱ͔JavaScriptͰͷςετ͕ී௨ʹ͔͚Δ ▸ iOSͱൺͯΉ͠Ζใ͕ଟ͍ ▸ CIͷηοτΞοϓʹ͍ͭͯRNͰͷݟ͕গͳͯͭ͘Β͍ 10
·ͱΊ ▸ RNͰͷΞϓϦ։ൃWebͷ։ൃΛ͍ͯ͠Δײ֮ʹۙ͘WebΤϯδχΞͷ ํ͕ೃછΈͦ͢͏͕ͩɺiOS / Androidͷݟ͠͠ඞཁʹͳΔ ▸ Ͳ͏͍͏࣌ʹ͍͍ͯΔͷ͔ ▸ ྆OSΛͱʹ͔͘ૣ͘6ׂఔͷͰ࡞ΔʹRNͷํ͕ѹతʹૣ
͍ ▸ ҰํͷϓϥοτϑΥʔϜ͚ͩΞϓϦΛ࡞ΔͳΒෆ͖ 11