Native Module入門記録

Slide 1

Slide 1 text

Native Module入門記録〜心を燃やせ！俺はNative Moduleなんかに負けない！〜 2021/10/08 React Native Matsuri Yugo Ogura / a.k.a spice

Slide 2

Slide 2 text

自己紹介 spice (Yugo Ogura) @rabspice Webフロントエンドエンジニアとして生まれ stand.fmで色々触るエンジニアになった 2022年6月頃にReact NativeのNative Moduleに入門ジャルジャルが好きです

Slide 3

Slide 3 text

ジャルジャルはすごい毎日更新！平日毎日更新！ 1週間で13本の動画！生活リズムに取り入れよう！

Slide 4

Slide 4 text

今日話すこと・Native Module入門の背景・入門して感じた5つの「壁」・ざっくり具体的な実装話と学び今日話さないこと(懇親会場で話しましょう！) ・具体的なコードとか・詳細な事情とか

Slide 5

Slide 5 text

Native Module入門の背景

Slide 6

Slide 6 text

stand.fmの技術スタック・React Native 製・音声再生/音声収録・端末のスピーカー/マイクを使用する

Slide 7

Slide 7 text

stand.fmの技術スタック・React Native 製・音声再生/音声収録・端末のスピーカー/マイクを使用する・React Native Track Player ・React Native Video ・自前で書いたり・etc...

Slide 8

Slide 8 text

https://react-native-track-player.js.org/

Slide 9

Slide 9 text

いいかんじ！色々やってくれてる！・JavaScriptの操作だけで音が流れる・Android/iOSの差を意識する必要はない・通知欄から音楽の操作ができる！・バックグラウンドでの再生もしてくれる！

Slide 10

Slide 10 text

しかし・・・細かいバグにパッチをあてるため、forkしたものを使っていた

Slide 11

Slide 11 text

しかし・・・細かいバグにパッチをあてるため、forkしたものを使っていた ⇨本家アップデートへの追従が大変なので、forkやめよう！ ⇨動かしてみたら、Androidクラッシュ！

Slide 12

Slide 12 text

Androidでクラッシュ！ React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player

Slide 13

Slide 13 text

Androidでクラッシュ！ React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player アップデート

Slide 14

Slide 14 text

Androidでクラッシュ！ React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player 依存バージョン違った！

Slide 15

Slide 15 text

Androidでクラッシュ！ React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player 依存バージョン違った！アプリを動かすと、存在しないAPIを呼んで終了:smile:

Slide 16

Slide 16 text

なんとかして解決しました！なんとかして解決しています

Slide 17

Slide 17 text

なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player 自作ライブラリ Exo Player

Slide 18

Slide 18 text

なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player 自作ライブラリ Exo Player バージョン合わせたアップデート

Slide 19

Slide 19 text

なんとかして解決 React Native Track Player 依存 Exo Player 依存 (ネイティブライブラリ) React Native Video Exo Player 自作ライブラリ Exo Player バージョン合わせた✖2 アップデートしたいつのまにか Native Module 入門！

Slide 20

Slide 20 text

入門して感じた5つの「壁」

Slide 21

Slide 21 text

壁 Native Module 自体エディタ言語ドキュメント常識

Slide 22

Slide 22 text

壁 Native Module 自体エディタ言語ドキュメント常識 Native Module 自体

Slide 23

Slide 23 text

壁 Native Module 自体エディタ言語ドキュメント常識 Native Module 自体ドキュメント読めばOK

Slide 24

Slide 24 text

壁 Native Module 自体エディタ言語ドキュメント常識ドキュメント

Slide 25

Slide 25 text

壁 Native Module 自体エディタ言語ドキュメント常識ドキュメントデザインの認知負荷数をこなして慣れさせる

Slide 26

Slide 26 text

壁 Native Module 自体エディタ言語ドキュメント常識言語

Slide 27

Slide 27 text

壁 Native Module 自体エディタ言語ドキュメント常識言語 Java/Kotlin Objective-C/Swift スポットで調べれば何とかなる Objective-Cがむずい

Slide 28

Slide 28 text

壁 Native Module 自体エディタ言語ドキュメント常識エディタ

Slide 29

Slide 29 text

壁 Native Module 自体エディタ言語ドキュメント常識エディタ都度調べる Android Studioはカスタマイズで使いやすい Xcodeとは友達になれていない

Slide 30

Slide 30 text

壁 Native Module 自体エディタ言語ドキュメント常識常識

Slide 31

Slide 31 text

壁 Native Module 自体エディタ言語ドキュメント常識常識 OSにまつわる汎用的な知識

Slide 32

Slide 32 text

壁 Native Module 自体エディタ言語ドキュメント常識常識 OSにまつわる汎用的な知識何が分かっていないのか、分からないので、調べ始めることもむずかしい

Slide 33

Slide 33 text

実際の経験 - 1. ひとまず音楽再生したい！

Slide 34

Slide 34 text

実際の経験 - 1. ひとまず音楽再生したい！ Native Module 自体ドキュメント読んで解決

Slide 35

Slide 35 text

実際の経験 - 1. ひとまず音楽再生したい！ Native Module 自体言語ドキュメント読んで解決ロジックは何となくわかる Objective-Cむず

Slide 36

Slide 36 text

実際の経験 - 1. ひとまず音楽再生したい！ Native Module 自体ドキュメント言語ドキュメント読んで解決ロジックは何となくわかる Objective-Cむず Android Developer 読めん Apple Developer 読めん

Slide 37

Slide 37 text

実際の経験 - 1. ひとまず音楽再生したい！ Native Module 自体ドキュメント言語エディタドキュメント読んで解決ロジックは何となくわかる Objective-Cむず Android Studioのカスタマイズむずい Xcode使いにくい Android Developer 読めん Apple Developer 読めん

Slide 38

Slide 38 text

実際の経験 - 1. ひとまず音楽再生したい！ Native Module 自体ドキュメント言語エディタドキュメント読んで解決ロジックは何となくわかる Objective-Cむず常識 Android Studioのカスタマイズむずい Xcode使いにくい Android Developer 読めん Apple Developer 読めんそもそも調べるべき単語分からん他のライブラリを見てなんとなく必要そうな知識を把握して調べる

Slide 39

Slide 39 text

実際の経験 - 2. バックグラウンドでも再生！言語細かい型とか文法への理解が必要になってきた細々とドキュメントを読むけどむず・・・

Slide 40

Slide 40 text

実際の経験 - 2. バックグラウンドでも再生！

Slide 41

Slide 41 text

実際の経験 - 2. バックグラウンドでも再生！言語細かい型とか文法への理解が必要になってきた細々とドキュメントを読むけどむず・・・

Slide 42

Slide 42 text

実際の経験 - 2. バックグラウンドでも再生！ドキュメント言語 Google Developer 慣れてきたかも Apple Developer 慣れてきたかも？細かい型とか文法への理解が必要になってきた細々とドキュメントを読むけどむず・・・

Slide 43

Slide 43 text

実際の経験 - 2. バックグラウンドでも再生！ドキュメント言語エディタ Google Developer 慣れてきたかも Apple Developer 慣れてきたかも？細かい型とか文法への理解が必要になってきた細々とドキュメントを読むけどむず・・・ Android Studio 使いやすいかも！ Xcodeはむずい

Slide 44

Slide 44 text

実際の経験 - 2. バックグラウンドでも再生！ドキュメント言語エディタ Google Developer 慣れてきたかも Apple Developer 慣れてきたかも？細かい型とか文法への理解が必要になってきた細々とドキュメントを読むけどむず・・・ Android Studio 使いやすいかも！ Xcodeはむずい常識他のライブラリを見てなんとなく必要そうな知識を把握して調べる(2回目) 一応書けたけど、他にもっと良さそうな気がしてならない

Slide 45

Slide 45 text

実際の経験 - 3. 通知欄からの操作も必要だ！

Slide 46

Slide 46 text

実際の経験 - 3. 通知欄からの操作も必要だ！言語細かいところ何も分からんくてむずー！

Slide 47

Slide 47 text

実際の経験 - 3. 通知欄からの操作も必要だ！ドキュメント言語慣れたと思ったけどどこに何が書いてあるか分からんむずー！細かいところ何も分からんくてむずー！

Slide 48

Slide 48 text

実際の経験 - 3. 通知欄からの操作も必要だ！ドキュメント言語常識慣れたと思ったけどどこに何が書いてあるか分からんむずー！細かいところ何も分からんくてむずー！他のライブラリを見てなんとなく必要そうな知識を把握して調べる分からないことだらけでむずー！

Slide 49

Slide 49 text

学び

Slide 50

Slide 50 text

５種類の壁何度も衝突するってだけ

Slide 51

Slide 51 text

分からないことにぶち当たった時の消費HPをなるべく減らせると良い

Slide 52

Slide 52 text

● 分からない前提を受け入れる

Slide 53

Slide 53 text

● 分からない前提を受け入れる ● 壁にぶち当たるパターンを理解する

Slide 54

Slide 54 text

● 分からない前提を受け入れる ● 壁にぶち当たるパターンを理解する ● 解決した過去を思い出して自分を褒める

Slide 55

Slide 55 text

● 分からない前提を受け入れる ● 壁にぶち当たるパターンを理解する ● 解決した過去を思い出して自分を褒める ● （全てを理解するのを諦める）

Slide 56

Slide 56 text

気持ちがだいじ Native Module負けない！

Slide 57

Slide 57 text

具体的な話は、直接話しましょう！ Spatial Chatで待ってます！

Slide 58

Slide 58 text

余談　　　　　　　　　　　　　を支える労力を理解した ⇨stand.fmはReact Native Track Player のスポンサーになりました！色々やってくれてる！