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
October 21, 2024
Programming
0
89
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
base:
https://speakerdeck.com/tinykitten/react-nativedehazimeru-haipahuomansu-sumahoapurikai-fa
Tsubasa SEKIGUCHI
October 21, 2024
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
AWS/GCPで始める 生成AI入門
tinykitten
0
100
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
0
9
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
0
260
Rustとtonicで始める gRPC再入門
tinykitten
0
780
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
240
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
170
はじめての GitHub Actionsアクション開発
tinykitten
0
130
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
tinykitten
0
130
React Nativeではじめる ハイパフォーマンス スマホアプリ開発
tinykitten
0
91
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
SwiftUI Viewの責務分離
elmetal
PRO
2
250
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
React 19アップデートのために必要なこと
uhyo
5
830
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Producing Creativity
orderedlist
PRO
344
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Agile that works and the tools we love
rasmusluckow
328
21k
We Have a Design System, Now What?
morganepeng
51
7.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How STYLIGHT went responsive
nonsquared
98
5.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
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