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ではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Tsubasa SEKIGUCHI
PRO
October 21, 2024
Programming
0
140
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
base:
https://speakerdeck.com/tinykitten/react-nativedehazimeru-haipahuomansu-sumahoapurikai-fa
Tsubasa SEKIGUCHI
PRO
October 21, 2024
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
TrainLCD v10リリース記念 TrainLCDを支える技術
tinykitten
PRO
1
90
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
tinykitten
PRO
0
200
初めてのハッカソンを「紙芝居」で終わらせた話
tinykitten
PRO
0
36
これならできる!個人開発のすゝめ
tinykitten
PRO
0
160
今日から使える AI駆動開発のすゝめ
tinykitten
PRO
1
84
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
51
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.4k
Gunma.web #55
tinykitten
PRO
0
270
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
190
Other Decks in Programming
See All in Programming
AtCoder Conference 2025
shindannin
0
1k
2026年 エンジニアリング自己学習法
yumechi
0
130
Basic Architectures
denyspoltorak
0
660
Package Management Learnings from Homebrew
mikemcquaid
0
180
GISエンジニアから見たLINKSデータ
nokonoko1203
0
200
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
410
dchart: charts from deck markup
ajstarks
3
990
今から始めるClaude Code超入門
448jp
7
8.1k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
nash_efp
0
850
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
510
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
190
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.2k
Featured
See All Featured
Google's AI Overviews - The New Search
badams
0
900
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
94
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
290
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
150
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Technical Leadership for Architectural Decision Making
baasie
1
230
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
260
Deep Space Network (abreviated)
tonyrice
0
44
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
110
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Transcript
React NativeͰ͡ΊΔ ϋΠύϑΥʔϚϯε εϚϗΞϓϦ։ൃ Head fi rst high-performance mobile app
development with React Native. LT 2024.10.22 Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer
Tsubasa SEKIGUCHI Λڌͱ͢Δ܈അݝલڮࢢग़ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ͖ͬͨΜͱݺΕ͍ͯ·͢
ͿΓʹ໊ͷσβΠϯΛߋ৽͠·ͨ͠
NFCλά͕͋Γ·͢ ࠓண༻͍ͯ͠Δ໊ࡳͷ֓Ͷதԝ෦ʹNFCλάΛຒΊࠐΜͰ͍·͢ɻ ձࢀՃͷํNFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ
TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
Smart StackରԠ ධ৴த
JavaScriptɺ͖Ͱ͔͢ʁ ͡Ίʹ
ͱʹ͔͘JavaScript͕͖ʜ ͦΜͳ͋ͳͨ JavaScriptͰεϚϗΞϓϦΛ࡞Γ·ͤΜ͔ʁ ͡Ίʹ
ͰɺͲ͏ͬͯʁ ͡Ίʹ
͡Ίʹ React Native
͡Ίʹ React Native ࠓճReact(Native)ͷ ࣮ܦݧΛ΄ͲੵΜͩ ݟΛڞ༗͍ͨ͠ͱࢥ͍·͢
3FBDU/BUJWFͬͯԿʁ React Native ͬͯԿʁ
React NativeͬͯԿʁ React Native ฏͨ͘ݴ͏ͱʜ UIߏஙͷͨΊͷ+4ϥΠϒϥϦ ʮReact.jsʯΛiOS/Android ͷωΠςΟϒػೳͱڞʹ ։ൃͰ͖ΔΑ͏ʹͨ͠ͷ
React Native ͞Βʹݴ͏ͱʜ iOS/Android͚ͩͰͳ͘ Web։ൃͰ͖ͨΓ͢Δ ͱ͍͑React Native for Web ݄ݱࡏ҆ఆͯ͑͠ΔΠϝʔδͳ͍Ͱ͕͢ʜ
React NativeͬͯԿʁ
React NativeΛ͏ͱԿ͕خ͍͔͠ ૣ Pros.
React.jsͷ͍͍ͱ͜Ζʜ React.jsͷࣝͰ ͍͍ͩͨͷ։ൃ͕Ͱ͖ΔͷͰ ֶशίετΛͳΔ͘Θͣʹ ։ൃΛ࢝ΊΒΕΔ React NativeΛ͏ͱԿ͕خ͍͔͠
Cordovaͱҧͬͯʜ ࣮ߦʹWebViewΛ༻ͤͣʹ JSX͕ωΠςΟϒ6*ʹม͞ΕΔͷͰ ҰൠతʹCordovaΑΓύϑΥʔϚϯε͕ྑ͍ React NativeΛ͏ͱԿ͕خ͍͔͠
ͪ͜ΒCordovaͱͦΕ΄ͲมΘΒͳ͍Ͱ͕͢ʜ JavaScript͚ͩͰ࣮ݱͰ͖ͳ͍ॲཧ Objective-C, Swift, JavaͰ࣮Մೳ React NativeΛ͏ͱԿ͕خ͍͔͠
લͷεϥΠυͱ͔ͿΓ·͕͢ React NativeʹରԠ͍ͯ͠ͳ͍ ωΠςΟϒػೳϒϦοδ͢Ε ։ൃͰ͖Δ e.g. Apple WatchΞϓϦΟδΣοτͳͲʜ TrainLCDͷ"QQMF8BUDIରԠ React
NativeΛ͏ͱԿ͕خ͍͔͠
ͬͺΓ͋Γ·͢ Cons. React NativeۜͷؙͰͳ͍
ͨΓલ͚ͩͲͪΐͬͱ௧͍ʜ ΓJavaScriptͳͷͰ SwiftJavaͱൺΔͱݴޠ༷͕ශऑ Ϛγʹ͢ΔͨΊʹTypeScript͍͖ͬͯ·͠ΐ͏ React NativeۜͷؙͰͳ͍
͍͍ͩͨExpo(ޙड़ Ͱे։ൃͰ͖·͕͢ طଘϥΠϒϥϦ͕ෆेͩͬͨΓ ͦͦଘࡏ͠ͳ͍ͱ͖ ωΠςΟϒಠ࣮͕ࣗඞཁ SwiftΛReact NativeͷωΠςΟϒϞδϡʔϧʹ͏ͱ͖ Objective-C͔ΒϒϦοδ͢Δඞཁ͕͋Δ React NativeۜͷؙͰͳ͍
جຊతʹ৺͢Δඞཁͳ͍ͱࢥ͍·͕͢ ωΠςΟϒ(Swift, KotlinͳͲ)Ͱ։ൃͨ͠߹ͱൺͯ ύϑΥʔϚϯε͕ѱ͔ͬͨΓ ΞϓϦͷDLαΠζ͕େ͖͘ͳΔ͜ͱ͕͋Δ React NativeۜͷؙͰͳ͍
͔ͬΔ͖ΤίγεςϜ React.js༝དྷͷॆ࣮ͨ͠ ΤίγεςϜ
͔ͬΔ͖ΤίγεςϜ Expo ͍͍͓ͩͨੈʹͳΓ·͢ ৭ʑͳReact Native͚ϥΠϒϥϦΛOSSͰ։ൃɾެ։ ϫʔΫϑϩʔʹΑͬͯɺQRίʔυͰ։ൃͨ͠ΞϓϦΛ ىಈͰ͖·͢
͔ͬΔ͖ΤίγεςϜ React Navigation ϧʔςΟϯάͱφϏήʔγϣϯͷϥΠϒϥϦ ͍͍ͩͨ͜Ε͕React NativeͰͷσϑΝΫτελϯμʔυ React NativeͰͷReact RouterͷΑ͏ͳଘࡏ
͔ͬΔ͖ΤίγεςϜ Fastlane React.jsReact NativeʹݶͬͨOSSͰͳ͍Ͱ͢ ΞϓϦͷϏϧυTestFlight/Google Play/App DistributionͳͲͷ σϓϩΠΛࣗಈԽͰ͖·͢🚀
ྨࣅϑϨʔϜϫʔΫ React NativeҎ֎ͷ ྨࣅϑϨʔϜϫʔΫ
ྨࣅϑϨʔϜϫʔΫ Flutter Dartͱ͍͏Java/C#ϥΠΫͷݴޠΛͬͯهड़ FlutterWebViewͳ͠Ͱಈ͖·͢ JavaܥͷΩϟϦΞΛੵΜͰ͍ΔਓͳΒ React NativeΑΓFlutterͷ΄͏͕ͱ͖͍͔ͬͭ͢
·ͱΊ - React.jsͰωΠςΟϒΞϓϦΛ։ൃͰ͖Δ - ͦͷଞωΠςΟϒݴޠͰ֦ுՄೳ - React NativeҎ֎ͷબࢶ͋Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! LT 2024.10.22 Tsubasa SEKIGUCHI