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
280
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
110
深センではテクノロジーを使う人がイノベーションを起こしている
ngo275
0
580
スマートコントラクトのデプロイって何だろう
ngo275
0
800
プロトタイピングするならFirebaseを使ってみよう
ngo275
0
1.8k
Ethereumで開発を始めるなら知っておきたいこと
ngo275
10
5.1k
スマートコントラクトをHTTPで実行する
ngo275
0
130
EOSでスマートコントラクトを実行してみる
ngo275
0
1.1k
中東のシリコンバレーことイスラエルに行ってきた
ngo275
0
140
ペイモのアーキテクチャ
ngo275
0
680
Other Decks in Programming
See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
940
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
360
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
200
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.5k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
430
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
680
Advance Your Career with Open Source
ivargrimstad
0
390
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
140
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
950
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
560
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
850
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
9k
Rails Girls Zürich Keynote
gr2m
95
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Code Reviewing Like a Champion
maltzj
525
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Scaling GitHub
holman
463
140k
Designing Experiences People Love
moore
142
24k
Mobile First: as difficult as doing things right
swwweet
224
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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