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
Tsubasa SEKIGUCHI
PRO
October 21, 2024
Programming
0
120
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
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
25
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
What's new in AppKit on macOS 26
1024jp
0
170
テスト駆動Kaggle
isax1015
1
870
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
210
slogパッケージの深掘り
integral0515
0
110
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
9
6.6k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
AI Ramen Fight
yusukebe
0
110
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Docker and Python
trallard
45
3.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
A designer walks into a library…
pauljervisheath
207
24k
Bash Introduction
62gerente
613
210k
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