🍞
「React書けたら問題なし？poteboy氏／Ubie小谷氏に聞くReact Native開発最前線」 レポート
公開
2025-03-13
文章量
約3933字
Yard 編集部
Yardの編集部が、テック業界の最新トレンドや知見について発信します。
目次
序章：ReactからReact Nativeへ ― 境界を越える試み
poteboyさんのLT：ランワンス？それとも「Write once, run anywhere」？
tamaguiを通して見るユニバーサルUIの工夫
新アーキテクチャ「Fabric」でのパフォーマンス改善
小谷さんのLT：ExpoとRSC（React Server Components）が切り開くReact Nativeの未来
Expoでのアプリ開発フロー――まるでNext.js感覚？
React Server ComponentsとサーバードリブンUI
ディスカッション Q&A ハイライト
スタイル管理：CSSとは似て非なる体験
コード共通化はできる？ すべき？
リリースを楽にするクラウドとOTAアップデート
テスト・デバッグ周りはまだ課題
React Nativeが切り開く未来 ― イベントを終えて
2025年3月6日に開催されたオンラインイベント「React書けたら問題なし？poteboy氏／Ubie小谷氏に聞くReact Native開発最前線」。
モバイルアプリのクロスプラットフォーム開発の代名詞ともいえるReact Nativeをテーマに、その最新動向や、Web開発でReactを使ってきたエンジニアがどのようにつまずき、どう乗り越えているかといった“生々しい現場の声”が語られました。
登壇いただいたのは、受託開発やOSS「tamagui」コアメンバーとしてReact Nativeに深く関わる合同会社ぽてぽてランド poteboyさんと、UbieにてIonic(Capacitor)からReact Nativeへの移行をリードし、現在は同社でVP of Technologyを務める小谷 優空（Kotani）さん。
モデレーターはゲーム・SaaS・スタートアップを渡り歩き、現在は技術顧問やCTO支援など幅広く活動する大西 政徳さんが務めました。
本レポートでは、このイベントで語られた内容をまとめながら、“Reactをやっていればアプリ開発もスムーズに進むのか？” “Webとネイティブ、どこまで共通化できるの？”といった疑問への答えを探っていきます。
序章：ReactからReact Nativeへ ― 境界を越える試み
React Nativeは「Learn once, Write anywhere」というスローガンを掲げ、Web開発のReactスキルを活かしてモバイルアプリを作れるフレームワークとして注目されてきました。しかし実際には、「思ったより柔軟には使えない」「ネイティブUI周りで苦戦した」という声もあり、Reactとの共通部分と差異をどう扱うかが大きなテーマになっています。
今回のイベントでは、そのギャップを埋めるヒントとして、
- Webとネイティブでのスタイル管理の違い
- ネイティブ独自の画面設計（スタックナビゲーション、オフライン考慮等）
- デプロイやリリース周りの進化（EASなど）
- ライブラリ選定やツールの成熟度
といったポイントが詳細に語られました。
poteboyさんのLT：ランワンス？それとも「Write once, run anywhere」？
tamaguiを通して見るユニバーサルUIの工夫
まずはpoteboyさんによるLT。React Native向けのUIライブラリ「tamagui」のコアメンバーとして活動する立場から、同ライブラリが目指す“Webとネイティブのコード共通化”の技術的仕組みを解説しました。
tamaguiでは、たとえば同じJSX記法で書いたコンポーネントが、ビルド時にDIVやspanのようなWeb DOM要素に変換される一方、ネイティブ向けにはViewやTextにマッピングされます。内部的にはバンドラーがプラットフォームごとにファイルを選択し、適切なコンポーネント実装を呼び出す設計です。
ただしpoteboyさん自身は、「何でもかんでも共通化するのが最適解とは限らない」と強調。プラットフォーム特有のイベントやスタイル、またビルド時の制限などを無理に隠蔽しようとすると複雑化が進むため、ある程度割り切って使う必要があると言います。
新アーキテクチャ「Fabric」でのパフォーマンス改善
また、React Native内部の構造変化も押さえておきたいトピックとして取り上げられました。古い“ブリッジ”ベースのアーキテクチャから、新しい「Fabric」への移行が進み、C++レイヤーを通じてJSとネイティブがより直接的にやり取りできるようになったことで、高パフォーマンスかつ同期的なUI描画が可能に。Discordなどもこの仕組みを活用し、スクロールリストの高速化に成功しているとのことです。
まとめると：
- tamaguiのようなUIライブラリで「1つのJSXコードを複数プラットフォームへ」コンパイルする仕組みは存在する
- しかし本当にコードを共通化するかは、プロジェクト次第で要検討
- FabricをはじめとしたReact Native内部の刷新が進み、性能面やネイティブ体験の水準がさらに高まっている
小谷さんのLT：ExpoとRSC（React Server Components）が切り開くReact Nativeの未来
Expoでのアプリ開発フロー――まるでNext.js感覚？
小谷さんはUbieにてIonicからReact Nativeへ移行するプロジェクトを経験。その中でExpo（React Nativeのメタフレームワーク）を活用し、まるでNext.jsのようにルーティングやビルドを一括管理しながら、さらにネイティブコードを意識せずに開発を進める流れを実践しているといいます。
Expoには以下のような特徴的な機能があり、Web開発出身のエンジニアでも参入しやすいとのこと：
- ファイルベースルーティング（
pages/About.tsxなどで画面を定義） - クラウドビルドサービス（EAS）
- iOS/Android向けネイティブビルドをワンコマンドで実行
- ストアへの提出（Submit）も対応
- OTA（Over The Air）アップデート
- JSやアセットの変更ならストア審査不要でユーザーに配信可能
React Server ComponentsとサーバードリブンUI
将来的には、React Server Components（RSC）によって、より「サーバー側でUIを制御する」アーキテクチャが進むと予想されます。そうなれば、リリース時のJS差し替えだけでなく、画面構成そのものをサーバーが動的に変化させる“サーバードリブンUI”が公式の仕組みで書きやすくなるかもしれない。Expo + RSCが本格普及した先には、よりWebとの共通点が増し、Reactアプリケーションをユニバーサルに展開しやすい環境が整うと考えられています。
ディスカッション Q&A ハイライト
スタイル管理：CSSとは似て非なる体験
「WebのようにChrome DevToolsでスタイルを直感的に調整できない」「Flexboxが微妙に違う」など、React Native特有の仕様に戸惑うことが多いと両者とも指摘。一方、“慣れるまで地道にやる”のが結局は解決策と笑いつつ、最近はUIライブラリが増えつつあり、そこに頼るのも一つの手だという意見で一致していました。
コード共通化はできる？ すべき？
React資産があるからといって、Webとネイティブを一気に共通化するのは考え物。たとえばビルド周りの制約や、DOMに依存した実装などが足枷になることが多く、むしろ「共通化を最小限に抑え、ライブラリに任せる」アプローチが現実的という声が強く上がりました。
リリースを楽にするクラウドとOTAアップデート
ExpoのEAS（クラウドビルド）とOTAアップデートは、ネイティブの煩雑なリリース手順を大幅に軽減してくれる反面、利用プランの制限や課金が悩ましい点も。特に大規模チームではビルド回数が膨れ上がるので、一部をCIで回すなどの工夫が必要とされていました。
テスト・デバッグ周りはまだ課題
Webと比べて、UIコンポーネントのエンドツーエンドテストやデバッグツールが弱い現状。ちょっとしたズレを可視化する手段が限られており、画面が多層に存在するモバイル特有の構成を把握するのに苦戦することが多いとの意見が多かったです。
React Nativeが切り開く未来 ― イベントを終えて
今回のイベントは、WebエンジニアがReact Nativeで本格的にモバイルアプリ開発へ挑戦する際の“つまずきポイント”や“乗り越え方”を、経験豊富なお二人が具体的に語ってくれる貴重な機会でした。
結論として、「ReactをやっていればReact Nativeも同じ感覚で書ける」かと言うと、“大枠の思想は近いものの、ネイティブUIや画面スタックなど、細部では意外な差が大きい”という実情が浮き彫りになりました。それでも、Expoをはじめとするエコシステムの充実や、Fabricアーキテクチャの進化によって、React Nativeでネイティブアプリを開発するハードルは確実に下がっています。
特に、JS差し替えで画面更新ができるOTAアップデートは、ネイティブアプリにとって大きなアドバンテージ。Web同様に素早いデリバリーサイクルを回せる可能性を秘めており、スタートアップなどでの利点は大きいはずです。
一方、微妙なUI調整やテスト戦略など“痒いところ”はまだ多く、「Webの感覚でサクサクやろうとすると少し引っかかる」というのも正直な印象。だからこそ、今回紹介されたExpoやUIライブラリ（tamagui）、新しいアーキテクチャ（FabricやReact Server Components）などを駆使することで、実運用レベルに耐えうる開発体験を整えていくことが重要だと再確認できました。
Reactの学習コストを活かしながらモバイル世界へ飛び込む選択肢として、React Nativeはますます魅力を増しています。Webとネイティブを行き来しながら、開発者やチームに合ったスタックを柔軟に構築していく――そんな未来が、まさに今拓け始めているのではないでしょうか。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
