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
Native Module入門記録
Search
Spice-Z
October 08, 2022
Technology
3
900
Native Module入門記録
React Native Matsuri 2022の登壇で使用した資料です
Spice-Z
October 08, 2022
Tweet
Share
More Decks by Spice-Z
See All by Spice-Z
stand.fmにGraphQLを導入して、半年。〜導入経緯や技術選択、現状や将来について〜
spicez
3
2.3k
NuxtでSSR時にGoogleOptimize(ABテストツール)を使いたい
spicez
1
1.1k
"transform" Why do we have to use it in CSS animation
spicez
0
5.2k
Other Decks in Technology
See All in Technology
テストを軸にした生き残り術
kworkdev
PRO
0
180
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
120
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
310
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
580
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.5k
フィンテック養成勉強会#56
finengine
0
130
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
210
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
270
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
240
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.3k
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Thoughts on Productivity
jonyablonski
70
4.8k
Practical Orchestrator
shlominoach
190
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Why Our Code Smells
bkeepers
PRO
339
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
How to Ace a Technical Interview
jacobian
279
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
Native Module入門記録 〜心を燃やせ!俺はNative Moduleなんかに負けない!〜 2021/10/08 React Native Matsuri Yugo Ogura
/ a.k.a spice
自己紹介 spice (Yugo Ogura) @rabspice Webフロントエンドエンジニアとして生まれ stand.fmで色々触るエンジニアになった 2022年6月頃にReact NativeのNative Moduleに入門
ジャルジャルが好きです
ジャルジャルはすごい 毎日更新! 平日毎日更新! 1週間で13本の動画! 生活リズムに取り入れよう!
今日話すこと ・Native Module入門の背景 ・入門して感じた5つの「壁」 ・ざっくり具体的な実装話と学び 今日話さないこと(懇親会場で話しましょう!) ・具体的なコードとか ・詳細な事情とか
Native Module入門の背景
stand.fmの技術スタック ・React Native 製 ・音声再生/音声収録 ・端末のスピーカー/マイクを使用する
stand.fmの技術スタック ・React Native 製 ・音声再生/音声収録 ・端末のスピーカー/マイクを使用する ・React Native Track Player
・React Native Video ・自前で書いたり ・etc...
https://react-native-track-player.js.org/
いいかんじ! 色々やってくれてる! ・JavaScriptの操作だけで音が流れる ・Android/iOSの差を意識する必要はない ・通知欄から音楽の操作ができる! ・バックグラウンドでの再生もしてくれる!
しかし・・・ 細かいバグにパッチをあてるため、forkしたものを使っていた
しかし・・・ 細かいバグにパッチをあてるため、forkしたものを使っていた ⇨本家アップデートへの追従が大変なので、forkやめよう! ⇨動かしてみたら、Androidクラッシュ!
Androidでクラッシュ! React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player
Androidでクラッシュ! React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player アップデート
Androidでクラッシュ! React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player 依存バージョン違った!
Androidでクラッシュ! React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player 依存バージョン違った! アプリを動かすと、 存在しないAPIを呼んで 終了:smile:
なんとかして解決しました! なんとかして解決しています
なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player 自作ライブラリ Exo Player
なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player 自作ライブラリ Exo Player バージョン合わせた アップデート
なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ)
React Native Video Exo Player 自作ライブラリ Exo Player バージョン合わせた✖2 アップデートした いつのまにか Native Module 入門!
入門して感じた5つの 「壁」
壁 Native Module 自体 エディタ 言語 ドキュメント 常識
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 Native Module
自体
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 Native Module
自体 ドキュメント読めばOK
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 ドキュメント
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 ドキュメント デザインの認知負荷
数をこなして慣れさせる
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 言語
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 言語 Java/Kotlin
Objective-C/Swift スポットで調べれば何とかなる Objective-Cがむずい
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 エディタ
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 エディタ 都度調べる
Android Studioは カスタマイズで使いやすい Xcodeとは友達になれていない
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 常識
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 常識 OSにまつわる汎用的な知識
壁 Native Module 自体 エディタ 言語 ドキュメント 常識 常識 OSにまつわる汎用的な知識
何が分かっていないのか、分からない ので、調べ始めることもむずかしい
実際の経験 - 1. ひとまず音楽再生したい!
実際の経験 - 1. ひとまず音楽再生したい! Native Module 自体 ドキュメント読んで解決
実際の経験 - 1. ひとまず音楽再生したい! Native Module 自体 言語 ドキュメント読んで解決 ロジックは何となくわかる
Objective-Cむず
実際の経験 - 1. ひとまず音楽再生したい! Native Module 自体 ドキュメント 言語 ドキュメント読んで解決
ロジックは何となくわかる Objective-Cむず Android Developer 読めん Apple Developer 読めん
実際の経験 - 1. ひとまず音楽再生したい! Native Module 自体 ドキュメント 言語 エディタ
ドキュメント読んで解決 ロジックは何となくわかる Objective-Cむず Android Studioのカスタマ イズむずい Xcode使いにくい Android Developer 読めん Apple Developer 読めん
実際の経験 - 1. ひとまず音楽再生したい! Native Module 自体 ドキュメント 言語 エディタ
ドキュメント読んで解決 ロジックは何となくわかる Objective-Cむず 常識 Android Studioのカスタマ イズむずい Xcode使いにくい Android Developer 読めん Apple Developer 読めん そもそも調べるべき単語分からん 他のライブラリを見てなんとなく必要そうな知識を把握 して調べる
実際の経験 - 2. バックグラウンドでも再生! 言語 細かい型とか文法への理解が必要になってきた 細々とドキュメントを読むけどむず・・・
実際の経験 - 2. バックグラウンドでも再生!
実際の経験 - 2. バックグラウンドでも再生! 言語 細かい型とか文法への理解が必要になってきた 細々とドキュメントを読むけどむず・・・
実際の経験 - 2. バックグラウンドでも再生! ドキュメント 言語 Google Developer 慣れてきたかも Apple
Developer 慣れてきたかも? 細かい型とか文法への理解が必要になってきた 細々とドキュメントを読むけどむず・・・
実際の経験 - 2. バックグラウンドでも再生! ドキュメント 言語 エディタ Google Developer 慣れてきたかも
Apple Developer 慣れてきたかも? 細かい型とか文法への理解が必要になってきた 細々とドキュメントを読むけどむず・・・ Android Studio 使いやすいかも! Xcodeはむずい
実際の経験 - 2. バックグラウンドでも再生! ドキュメント 言語 エディタ Google Developer 慣れてきたかも
Apple Developer 慣れてきたかも? 細かい型とか文法への理解が必要になってきた 細々とドキュメントを読むけどむず・・・ Android Studio 使いやすいかも! Xcodeはむずい 常識 他のライブラリを見てなんとなく必要そうな知識を把握し て調べる(2回目) 一応書けたけど、他にもっと良さそうな気がしてならない
実際の経験 - 3. 通知欄からの操作も必要だ!
実際の経験 - 3. 通知欄からの操作も必要だ! 言語 細かいところ何も分からんくてむずー!
実際の経験 - 3. 通知欄からの操作も必要だ! ドキュメント 言語 慣れたと思ったけど どこに何が書いてあるか分からん むずー! 細かいところ何も分からんくてむずー!
実際の経験 - 3. 通知欄からの操作も必要だ! ドキュメント 言語 常識 慣れたと思ったけど どこに何が書いてあるか分からん むずー!
細かいところ何も分からんくてむずー! 他のライブラリを見てなんとなく必要そうな知識を把握して調べる 分からないことだらけでむずー!
学び
5種類の壁何度も衝突する ってだけ
分からないことにぶち当たった時の 消費HPをなるべく減らせると良い
• 分からない前提を受け入れる
• 分からない前提を受け入れる • 壁にぶち当たるパターンを理解する
• 分からない前提を受け入れる • 壁にぶち当たるパターンを理解する • 解決した過去を思い出して自分を褒める
• 分からない前提を受け入れる • 壁にぶち当たるパターンを理解する • 解決した過去を思い出して自分を褒める • (全てを理解するのを諦める)
気持ちがだいじ Native Module負けない!
具体的な話は、直接話しましょう! Spatial Chatで待ってます!
余談 を支える労力を理解した ⇨stand.fmはReact Native Track Player のスポンサーになりました! 色々やってくれてる!
credits image: Freepik.com
Thank you ! Follow me ! @rabspice