🎊

React Native Matsuri 2021に参加したのでまとめる

2021/10/02に公開

Android

概要

こんにちは！
普段はReact NativeのTips的な記事を上げているのですが、今日は自分の学習メモも兼ねて、カンファレンスのレポートを公開したいと思います。

参加したのは、この記事を書いている2021年10月2日(土)に開催されたReact Native Matsuri 2021というカンファレンスです。

React Native Matsuri2021公式サイト

以下、公式サイトトップの概要になります。

2021年、React Nativeをメインテーマにした、日本で初開催の技術カンファレンス。
React NativeやReactの深い知見を持つ開発者によるセッションやパネルディスカッションがあります。

日本最大のReact NativeコミュニティであるReact Native Japanが主催しており、国内外様々な方が登壇していました。
以前から技術記事を参考にさせていただいている方もいて、界隈のトップランナーのお話を聞ける機会もなかなかないので非常に有意義な時間でした。

イベント概要

会場：オンライン(Hopin)、登壇者への質問はDiscordを利用
参加費：無料 or ノベルティーBox付き有料チケット
トーク: Day Session Talk (30分), Night Session LT (10分)

ノベルティ付きチケット(1000円と1800円)が非常に魅力的だったので、自分はそちらを購入しました。
※1800円の方は既にSold Outだったので、1000円の方を購入。

9月の前半くらいに購入して、しばらく待つと豪華な品々が自宅に・・・！

升やTシャツ、お菓子などなどいただきました。

それでは早速、当日のタイムテーブルを見ていきます。

タイムテーブル

タイムテーブルは以下のような感じです。
※途中休憩などは省略してあります。

Time	Title
10:00 - 10:10	オープニング
10:10 - 10:50	メルカリUSがモバイルアプリをReact Nativeで作り直している話
10:55 - 11:25	ReactNativeとKotlinで叶える夢のリアルタイム音声配信
11:30 - 11:40	stand.fmの最近の取り組み：アプリ起動速度の改善
11:45 - 12:15	React Nativeを用いて組織・プロダクト開発を加速する
12:45 - 13:15	React Native in Nature
13:20 - 13:50	React Native：Re-architecture
13:55 - 14:25	Yarn Workspace × React Nativeの環境構築
14:30 - 14:40	医療・ヘルスケアアプリにおけるReact Native
14:55 - 15:25	React Native fro Webのこれまでから読み解くReact GUIのこれから
15:30 - 16:00	React Nativeを使ったリアルタイム配信サービスの開発
16:05 - 16:45	カンムとReact Native
17:10 - 17:20	10分でわかる Expo EAS
17:20 - 17:30	Webオンリーでプロダクトでもreact-native-webは輝く
17:30 - 17:40	React Nativeプチコードリーティング
17:40 - 17:50	TurboModuleを利用したJS threadの負荷軽減と Follyを利用したMain threadのマルチプロセス化
17:50 - 18:00	react-native-ffmpegを使って動画をいじくり回そう
18:10 - 18:20	WebViewからデータをスクレイピングする
18:20 - 18:30	4年運用した秘伝のReact Nativeアプリをチーム開発できるようにするまでにしたこと
18:30 - 18:40	戦略的手抜きをするためのデザインシステム運用
18:40 - 18:50	React NativeとState Management Library
18:50 - 19:00	初めてのExpoアプリ個人開発
19:00 - 19:10	ライブラリはしご酒

どれも興味をそそられるお題目ばかりです。
途中軽食や宅配便なんかが来て離席することもありましたが、朝から晩まで非常に楽しめました。

内容

それでは各セッションの内容について感想を交えながらまとめていきます。
カッコ内は登壇した方の名前(敬称略)になります。

※各登壇者の方が、発表資料を公開してくださっている場合もありますが、ここで貼ってよいか分からなかったため、一旦は自分の感想中心の内容とさせてください。

メルカリUSがモバイルアプリをReact Nativeで作り直している話(Takeru Chuganji)

メルカリが海外進出している話は知っていましたが、日本版とは全く別物になっているということに驚きました。
もともとReact Nativeを部分的に導入しており、ビジネスのスケーリングに追随するためにReact Nativeでリライトしていく方法を採用したとのことです。

とはいえリライトは一筋縄ではいかず、特殊なアニメーションをしているような箇所などは難しいとのことでした。

ReactNativeとKotlinで叶える夢のリアルタイム音声配信(Yu Mitsuhori)

音声配信アプリであるstand.fmの簡易版の実装について、Native ModuleやKotlin等の説明を交えながらコードを追う形式でした。
React Nativeで音声配信のようなゴリゴリネイティブが絡む分野は難しいんじゃないかと思っているので、あのクオリティのアプリを作り上げた事が素直にすごいと思いました。

今回のカンファレンス全体を通しても、ネイティブ周りのアーキテクチャや実装について言及されている方が多く、いくらReact Nativeが「ネイティブをあまり知らなくてもアプリが作れる」という特性を持っていても、やりたいことを突き詰めていくと避けては通れない分野なのだと感じました。

stand.fmの最近の取り組み：アプリ起動速度の改善(Toshihisa Tomatsu)

前LTに続いて、stand.fmをパフォーマンス改善という観点から見た時の話です。
起動時の処理が嵩んでいくのは、ネイティブに限らず開発あるあるだとは思いますが、そういった箇所を「計測」「分析」「解決」としっかりとステップを踏んでいく様はとても参考になりました。

全体を通してSentryを利用されている方が多く、React Nativeを用いた場合の計測では頭一つ抜けているのかなと感じました。

また、自分は利用したことがないのですがreact-native-shimmer-placeholderは使ってみたいなと感じました。

React Nativeを用いて組織・プロダクト開発を加速する(Takagi Kensuke)

自分も以前目を通したことがあるのですが、React Nativeの入門にあたっての技術書(下記)の著者の方です。

国内外様々な企業がReact Nativeを導入した結果どうだったのか、という観点から「色々選択肢はあるけどアプリ開発をする時にReact Nativeってどうなの？」という問いを掘り下げていました。

初期は何かと使いにくさもありましたが、現在では安定しており、ワンソースで複数プラットフォームで動くことは開発効率の向上に繋がる、というのは頷けます。
Green Field(新規開発でReact Nativeを使う)というのが大事で、Brown Field(既存版に組み込む)のはアンチパターンに近いというのも納得できました。

React Native in Nature(Soh Kitahara)

家電をのスマホから操作できる製品であるNature RemoのアプリにReact Nativeを用いた際の知見です。
v0.5の時代から利用しているので、AutoLinkingなどの機能がない中での開発は大変だったのではないかと思います。
現在は基本的にはほぼ全てのViewまわりが共通化できているようですが、ウィジェットなどReact Nativeで開発しているとどうにもならなそうな箇所もあるとのことでした。
また、フォント周りで不具合が多かったようで、特定の端末のフォントだとTextの表示がバグるなど、参考になる事が多かったです。
react-navigationをv4からv5にアップデートするのに苦労した、という話は思わずうなずいてしまいました。

React Native：Re-architecture(Jesse Katsumata)

React Native Communityで精力的に活躍されているNaturalclarことJasseさんです。
自分がQiitaを主軸に記事を書いていた頃、何回も参考にさせていただきました。

内容はReact Nativeのネイティブとの接続周りのアーキテクチャがどんどん変わってきているという話で、JSIやTurboModuleなど初耳な情報が多くて非常にありがたかったです。
それらがデフォルトになる時代はもうすぐそこまで来ていて、Facebookアプリが新アーキテクチャに移行したら一気に加速するとのこと。

パフォーマンスの問題は長い事言われ続けていたので、解消されるとReact Nativeを採用する企業がまた増えてきそうだと感じました。

Yarn Workspace × React Nativeの環境構築(Ryoichi Kaida)

モノレポ構成でReact Nativeを使用した際にハマりがちなエラーをハンズオン形式で片付けていくという内容でした。
めちゃくちゃ実践的で、もし自分が何も知らないまま同じ事をしたら延々とハマり続けるんだろうなぁと思いました。それくらいビギナーにとってReact Nativeのエラー(とくにビルド時)は難解です。

React Nativeのモノレポ構成をそもそも試したことがなかったので、もし機会があれば参考にしたい内容です。

医療・ヘルスケアアプリにおけるReact Native(Yuki Kondo)

ヘルスケアアプリにおいてReact Nativeでビデオ通話（amazon-chime-sdkを使用）を実装した際のTipsです。
昨今色々なアプリで動画配信やビデオ通話など、ネイティブをガッツリ使った機能がほぼ標準となってきているので、React Nativeでも同様のことができる、というのは非常に参考になりました。
公式サンプルが完璧でなく困った、というのはあるあるだなと思いました。

React Native fro Webのこれまでから読み解くReact GUIのこれから(Yukiya Nakagawa)

React Native for Webって「既存のReact NativeアプリがWebで動くようになるっていうやつでしょ？」という認識でいる方必見の内容でした。
React NativeのAPI群の完成度が抜群に高いから、同じ実装感でWebもできるようにしようぜ！という熱い思いがなかなか伝わりにくいのは、やはり名前にReact Nativeが入っているのが大きいよなぁとは思います。

そんな中react-guiなんていうのも登場して、GUIの完成系がどこに落ち着くのかは正直予想ができませんが、今後も要チェックな分野かと思います。

個人的にはTwitter Liteが知らぬ間にtwitter.comに置き換わっていたのが衝撃的でした。

React Nativeを使ったリアルタイム配信サービスの開発(Junichi Sato)

BakoonというオンラインフィットネスアプリでReact Nativeを使用した際の知見と気付きです。
agora,firebase,posenetなどなど今をときめくサービス等を使って、めちゃくちゃ面白そうなアプリを作っていました。

気付きの中であった「あったらいいんじゃないか、と機能を追加していったら仕事量がエラいことになった」というのはとても共感できました。

カンムとReact Native(Yuki Ito)

バンドルカードのアプリの開発にReact Nativeを用いた話です。
まだAndroidのビルドもまともに動かないような黎明期からReact Nativeを選んだのは素直にすごいと思いました。
とはいえそこからの苦労は多かったようで、アプデを追っていく大変さはとても共感できました。

10分でわかる Expo EAS（Takahiro Sugiura）

Expoに新しく追加された機能EAS BuildとEAS Submitについての話でした。
いつのまにかExpoでクラウドでビルドしてそのままストア提出までできるようになっており、「あれ、これ全然Expoでよくね？」って素直に思いました。
以前はEjectが大変とか、ネイティブが全然使えないとか色々言われてましたが、今の使い勝手なら試してみるも全然ありだと感じました。

あとreact-native-blurhashは使ってみたい。

Webオンリーでプロダクトでもreact-native-webは輝く(Takayoshi Sawada)

React Native for Webを実際にゴリゴリ使ってみたTipsです。
先程も述べたように、なんとなくネイティブアプリを開発してないと無関係と思われがちですが、純粋にWebライブラリとして優秀だなと感じました。
擬似クラスやposition:fixed;など、ガッツリWeb開発している方からすると「え、それできないの？」みたいに思われるかもしれませんが、ちゃーんと対処法はあるので全然使えると思います。

React Nativeプチコードリーティング（Shoken Fujisaki）

先程出てきたJSIの実装部分を追いながら、どういう仕組みになっているかの解説です。
正直JSIを今日知ったので、ソースは何がなんやら・・・といった感じですが、何かとてつもなくすごい事が起きている雰囲気はしっかり伝わったので、改めて見返してみねば！と感じました。

TurboModuleを利用したJS threadの負荷軽減と Follyを利用したMain threadのマルチプロセス化(スポンサーセッション株式会社BluAge)

TurboModuleの生成とFollyをマルチスレッド化するハンズオンでした。
将来的には本家のネイティブを上回るのではないか、という話は非常に夢があり、いつかそんな日が来るんじゃないかと自分も本気で思いました。

react-native-ffmpegを使って動画をいじくり回そう(Yu Watanabe)

動画編集アプリを作るにあたって、いくつかあるライブラリからreact-native-ffmpegを選定した話と、実際の使用感についての話でした。
react-native-ffmpegがめちゃくちゃ面白くて、ffmpegのコマンドをそのままReact Nativeで流せるようなイメージでした。

とはいえそれ相応のバイナリサイズが必要だったり、Webで使用する場合はコーデックに注意する必要があったりと、抑えないといけない箇所はあるので、それらの勘所をわかりやすく説明していただいて非常に助かりました。

WebViewからデータをスクレイピングする（Tatsunori Nakano）

Kindleのハイライトをreact-native-webviewを使ってぶっこ抜いてくるTipsです。
react-native-webviewはもちろん、injectedScriptやpostMessageは使ったことがありますが、そこからスクレイピングをするというのがありそうでなかった発想で、コロンブスの卵的な雰囲気がしました。

4年運用した秘伝のReact Nativeアプリをチーム開発できるようにするまでにしたこと（Shinnosuke Yamamoto）

Pep Upというヘルスケアサービスのアプリにおいて、今となっては懐かしいReduxのオールド構成(componentsとかactionsがルートにずらっと並んでいる)をチーム開発ができるようにした話です。
アトミックデザイン、Typescript導入、エラートラッキングなどを入れていき、秘伝のタレを改めていく様子は、自分にも心当たりがあるので共感できました。

戦略的手抜きをするためのデザインシステム運用（Kazushi Hara）

同じくPep Upの開発において、デザインシステムを用いたTipsです。
FigmaとStorybookを利用しており、デザインシステム運用のお手本のような使い方をされている印象を受けました。
ある程度ルールを事前に決めておかないとうまくいかないようで、Webとの統一は避ける、全画面はやらない、といった割り切りをすることで効率良く運用されていました。

React NativeとState Management Library（Shinji Kurosawa）

React NativeでRecoliを使った知見です。
最近Recoil熱いよなぁ、とぼんやり思っていたところなので非常にタイムリーでした。
とはいえいくつか気をつけないといけない箇所はあるようで、制御コンポーネントでの使用は避けた方がよかったり、リリースビルドでState更新ができないケースがあったりと、ハマり所はあるようでした。
ただ、総じてReact Nativeでも問題なく使用できるようなので、新たにアプリ開発をする場合は状態管理の選択肢としてRecoilはアリだと感じました。

初めてのExpoアプリ個人開発(Teruhisa Yamamoto)

7月から個人開発されたワークアウト用のタイマーアプリについて、Expoを用いたTipsでした。
個人開発は、何はなくともリリース優先というのは大きく頷けました。
また、先程のRecoilからインスパイアされたJotaiを利用しているようで、やはり個人開発のように比較的規模が小さいプロダクトの場合はReduxはオーバスペックなのかと感じました。

ライブラリはしご酒(Yutama Kotaro)

最近業務で開発しているReact NativeアプリはWatermelonというニッチ？なDBライブラリを使っているのですが、それを知るきっかけになった記事を執筆されたのが登壇者のユタマさんです。
ルーティング、カメラ、ストレージの3つのジャンルから、いくつかのライブラリをピックアップして、結局どれがベストなの？というレビューをしてくださいました。

軽快な喋りで的確なレビューをされる様は見ていて気持ちがよく、結論も納得がいくものでした。
中でも、カメラのreact-native-vision-cameraとストレージのreact-nativemmkvは個人的にとても気になりました。

まとめ

React Nativeに関するカンファレンスは初めてでしたが、非常に充実していて、かつ様々な視点から発表が聞けてとても満足でした。

自分自身、2年以上React Native開発を主にやってきて、それなりに自信があったのですが、まだまだ知らないことも多く、勉強が必要だと痛感しました。
なんとなく最近のトレンドと、これからホットなトピックというのが見えてきたと思うので、今回学んだ内容は個別に掘り下げて改めて別記事としたいと思います。

来年React Native Matsuriが開催されたらまた参加レポを書こうかと思いますので、その際はこの記事と比較して「React Nativeのトレンドって1年でこんなに変わるんだ」というのを楽しめたらなと思います。

この記事が少しでも役立ちましたら幸いです。