Open10

App.js Conference 2025 まとめ

React Native
kazutoyo@TellerNovelkazutoyo@TellerNovel

App.js Conf 2025 Day 1 セッション概要

App.js Conf 2025 は Software Mansion が主催する、今回で第5回目の開催となるイベントです。Day 1 の MC は Nathaniel と Yanni が務めました。

オープニング・MC挨拶

  • MC Nathaniel と Yanni: React Native コミュニティの参加者を歓迎しました。AI エージェントの台頭により来年以降ライブオーディエンスが少なくなるかもしれないというジョークを交えつつ、ライブ参加の重要性を強調しました。
  • Software Mansion CEO Marcin: カンファレンス開催への興奮を表明しました。過去の開催について、COVIDの影響で「犬の年」換算で40年分に相当すると述べ、今年のカンファレンスでは動物をテーマにした要素があることを述べました。参加者には、トークを楽しむこと、Software Mansion のコンテナやスポンサーブースを訪れることを勧めました。

主要セッション

  • Expo 基調講演 (Charlie Cheever): Expo の CEO 兼共同創設者。React Native および Expo コミュニティにおけるエネルギーと楽観主義に触れ、アプリケーション構築の特定の信念のためにここに集まっていると述べました。Expo のアップデートに関する機能として以下を紹介しました:
    • TestFlight への開発ビルド送信: 今年から可能になり、npx eas test-flight コマンドで簡単に実行できます。これにより、Apple チーム内でチームメンバーを管理でき、手動でのプロファイル管理が不要になります。
    • Preview Update の公開: 開発ビルドに対してプレビューアップデートを公開することができ、PR ごとにアップデートを公開し、レビュー担当者が開発ビルド内で PR ブランチを確認できるようになります。
    • EAS Workflows: CI/CD サービスとして導入され、EAS コマンドの実行を自動化・柔軟化します。YAML 設定が不要な点が強調されました。プッシュトリガーやスケジュール実行にも対応しています。
  • React Native の新しいアーキテクチャ (Nico と Ricardo from Meta): Meta の React チーム所属。新しいアーキテクチャは、React Native の内部構造の書き換えであり、React の並行機能を有効化し、非同期モデルからより同期的なモデルへ移行することを目的としています。以前のアーキテクチャでの JSON メッセージのシリアライズによるブリッジ通信が高コストであったことに触れました。この新しいアーキテクチャがデフォルトで有効になったことについて話しました。彼らはこのプロジェクトに2018年から取り組んでいると共有しました。レガシーアーキテクチャは凍結され、主要なセキュリティ修正を除いてクローズされることが述べられました。これにより、全ての開発リソースを新しいアーキテクチャに集中させることが可能になります。
  • Legend List とパフォーマンス最適化 (Jay Maestrich): 「真のインディー」開発者として紹介され、Legend List や Legend State で知られています。JavaScript だけで何が可能かを追求しており、新しいアーキテクチャでも古いアーキテクチャでもパフォーマンスが発揮されると述べられました。React Native におけるリストに関する一般的な問題と、その最適化について話しました。
  • Radon IDE (Kristof Mers): Software Mansion の共同創設者兼オーガナイザー。React Native 専用 IDE である Radon IDE のアップデートについて発表しました。1.0 リリースに続く最新の 1.7 リリースでは、VS Code のアップデート (1.100) によりクロームレスウィンドウでのエディタタブ表示オプション や、Expo Router アプリ向けの編集可能な URL バー などが追加されました。VS Code Marketplace や Open VSX からインストール可能で、フィードバックを求めているとのことです。また、デバッグコンソールやブレークポイントの活用法、AI を活用した画面要素の操作の可能性についてもデモで示唆されました。
  • 開発者体験 (Alex Hunt from Meta): Meta の React チーム所属。開発者体験チームの取り組みについて話しました。チームは Metro、React Native dev tools、JavaScript インフラの一部などを担当しています。デバッグ体験が年々改善されていること（デバッガーコアの信頼性向上、ブラウザ機能への倣いによる）に満足しつつも、さらに改善が必要な点があることを示唆しました。
  • React Native の最新情報 (Casper from Software Mansion): Software Mansion のソフトウェアエンジニア。React Native に関する新しい情報を共有しました。
    • Expo SDK 53: 新しいアーキテクチャがデフォルトで有効化されました。
    • React Native 79: React 19 を含む最新のステーブル版です。
    • Expo Maps: React Native maps の代替となるアルファ版です。
    • Expo Audio: ステーブル版としてリリースされました。
    • バックグラウンドタスク: 新しい API モジュール expo-background-tasks が以前のものを置き換えます。
    • Android の Edge-to-edge: デフォルトで有効化されました。
    • Native Screens: ライブラリの課題報告において、再現手順など詳細な情報提供の重要性が強調されました。
    • React Native AI Executors: バージョン0.4がリリースされ、大規模言語モデルの幅広いサポートと機能強化（関数呼び出し、テキスト埋め込みなど）が追加されました。
  • NFL の CI/CD 再構築 (Michael from NFL): NFL のプロダクトエンジニアリング担当ディレクター [ソースにプロダクトエンジニアリング担当ディレクターの記述なし]。NFL では React Native で複数のアプリケーションを開発しており、CI/CD パイプラインをオンプレミスからクラウドへ再構築した経験について話しました。開発者体験の向上、コスト削減、コラボレーション機会創出を目的とし、オンプレミスでのハードウェア管理や Jenkins 利用の課題 から、クラウドベースのツールへの移行に取り組みました。
  • Partiful (Alex from Partiful): Partiful のプロダクトエンジニア。パーティー招待アプリ Partiful について紹介しました。イベントプラットフォームとして人々を繋げることを目的としています。当初はウェブサイトとして始まり、後に React Native と Expo を使用してモバイルアプリを構築しました [ソースに React/React Native/Expo の記述なし]。App Clip などにも取り組んでいます。

その他イベント・ブレイク

  • カンファレンスアプリ: Expo で構築され、高パフォーマンスであると評価されました。アプリ内にはイースターエッグや、犬、猫、魚の鳴き声でインタラクションできるデモ機能があることが紹介されました。
  • スポンサーイベント: Code Magic や Sentry がスポンサーとして紹介され、Code Magic によるラッフル抽選会が告知されました。休憩中にはスポンサーブースを訪れることが勧められました。
  • AI エージェント: 11 Labs による Conversational AI の進化と新機能（ターンテイキングモデル、言語検出、音声エージェント向け統合 RAG など）に関するスポンサーセッションがありました。
  • 昼食休憩中のライブスタジオ: Meta の Alex Hunt が登場し、開発者体験チームの取り組みや、デバッグ体験の改善、今後の開発について話しました。

Day 1 クロージング

  • Day 1 の最後のセッションの後、午後7時まで会場外のレストランで参加者同士が交流するための案内がありました。Bit Vavo のラッフル当選者はその場で賞品を受け取れることも告知されました。

以上が提供されたソースに基づく App.js Conf 2025 Day 1 のセッション概要です。

kazutoyo@TellerNovelkazutoyo@TellerNovel

App.js Conf 2025 Day 2 セッション概要

App.js Conf 2025 は Software Mansion が主催するイベントの第5回目です。Day 2 の MC は Yanni と Nathaniel が務めました。Yanniは序盤に登場し、Nathanielは後から合流しました。

オープニング・MC挨拶

  • MC Yanni: React Native コミュニティの参加者を歓迎し、挨拶しました。Day 1にNathanielと一緒にMCを務めたことに触れました。
  • ハウスキーピング: カンファレンスアプリの利用を再度推奨しました。アプリにはスポンサーブースでスキャンできるQRコードのクエストがあり、全てスキャンしてSoftware Mansionのブースに行くと賞品がもらえることが説明されました。会場のレイアウトが今年再構成され、スポンサーブースは主に外に配置されていることが伝えられました。これは、トーク中にメインステージエリアの騒音を抑えるためです。また、屋外にはレストランやバーがあり、交流に利用できることが案内されました。トーク中は室内での静かな声の使用が推奨されました。

主要セッション

  • AIコーディングツールと大規模プロジェクト (Raphael Mandola): 2017年頃からReact Nativeに関わっている経験豊富な開発者。大規模なコードベースでAIコーディングツール、特にCursorを使用するワークフローについて話しました。プルリクエストの分析をCursorで行う方法をデモしました。これは手抜きのためではなく、より勤勉にレビューを行うための方法だと強調されました。AIの変革期におけるソフトウェア開発者の役割や必要なスキルに触れ、コードそのものよりも洞察力、創造性、センス、コミュニケーション能力、説得力が重要になると述べました。自身のプレゼンテーションもAI（Vive coding）で作成したことを共有しました。
  • Brownfield React Nativeとネイティブスーパーアプリへの統合 (Sojin Park from Toss): 韓国のフィンテック企業Tossから。既存のネイティブスーパーアプリにReact Nativeを部分的に（マイクロアプリとして）統合する、いわゆるBrownfield開発の課題とTossでの取り組みについて話しました。その解決策として開発されたオープンソースツール Granite が紹介されました。Graniteはバンドル分割、ESU（Expo Application Services Updates）連携、AWS上でのOTA（Over-The-Air）アップデートインフラストラクチャ（Pulumiでコード化）を含んでいるとのことです。開発者は npm run dev で馴染みのある開発体験を得られ、npm run build で小さなHermesバイトコードバンドル（約120KB）をビルドできると説明されました。
  • Expo UIとネイティブデザイン言語 (Keith Kurak from Expo): Expoのメンバー。React Nativeアプリでネイティブプラットフォームのデザイン言語（iOSのSwiftUIやAndroidのJetpack Compose）を活用する Expo UI について話しました。以前はプラットフォーム固有のコードを書くのは稀だったが、Expo UIのようなツールによって、今後はプラットフォームごとに画面を分けて開発することが、単一ビューをすべてのプラットフォームで提供するのと同じくらい効率的になるかもしれないと示唆しました。直感的かつ柔軟にこれらを組み合わせられること、さらにはExpoモジュールAPIを使ってSwiftやKotlinのコードを直接書くことも可能であることに触れました。カスタムホットドッグとテイタートットのレストランに例えて、何を組み合わせても素晴らしい結果が得られる「成功の落とし穴」だと表現しました。
  • データフェッチングとキャッシュ戦略 (Devlin Duldulao from Amazon): Amazonのメンバー。アプリ開発におけるデータフェッチング、キャッシング、状態管理の重要性について話しました。特に TanStack Query (React Query) ライブラリの活用法に焦点を当てました。TanStack Queryが提供する機能として、Prefetching (リンクをクリックする前にデータを先読みする)、Deduping (同じデータに対する複数のリクエストを1つにまとめる)、Polling (定期的にデータを更新する)、Pagination (ページネーションされたデータを扱う)、Infinite Query (双方向の無限スクロールを効率的に実装する) などをコード例とともに示しました。これらの機能が開発者ツールで確認できることも紹介されました。Redux Toolkit Queryも同様のコンセプトを提供することに言及しました。
  • キーボード操作の改善: ソース内でスピーカー名が明確に特定されていませんが、React Nativeアプリケーションにおけるキーボードインタラクションの改善に関するトークがありました。インタラクティブなキーボード非表示、キーボードツールバー、キーボード回避キューなどのコンポーネントを使用することで、スムーズなキーボード操作を実装し、ユーザー体験を向上させることができると説明されました。
  • アプリのマネタイズとIn-App Purchases (Perto Leni): フィンランド出身。モバイルアプリで収益を上げる方法、特に In-App Purchases (アプリ内課金) に焦点を当てて話しました。マネタイズの理由、収益化モデルの種類（アプリ内課金、広告など）について概説しました。アプリ内課金の実装には、RevenueCat SDK や React Native Purchase SDK のようなライブラリが役立つことを紹介しました。購入可能なアイテムの種類（消耗品、非消耗品、定期購読）を説明し、Paywallの実装例と購入後のユーザー資格のチェック方法を示しました。

スポンサーセッション・ライブスタジオ・ブレイク

  • 11 Labs スポンサーセッション / ライブスタジオ: Conversational AI を開発する 11 Labs がスポンサーセッションを行いました。彼らのAI技術の進化について、ターンテーキングモデル (AIが人間と自然に会話のターンを交代する)、言語検出 (多言語でのシームレスな会話)、音声エージェント向けの統合 RAG (Retrieval-Augmented Generation、知識ベースからの情報検索)、単一エージェント内での複数キャラクター音声の切り替え などの新機能が紹介されました。また、自動音声認識モデルである Scribe にも触れ、99言語で高い精度を持つと述べました。ライブスタジオでは、Thor (11 Labs) が音声コマンドを使って実際にスマートフォン（iOS）の機能（バッテリーレベルの確認、画面輝度調整、画面フラッシュ、ポーランド語での返信）を操作するデモを披露しました。
  • Amazon Developer Coffee Bar: 会場2階（メザニン/ギャラリー）にあり、美味しいコーヒーを提供していることがMCによって推奨されました。
  • Sentry & Code Magic ラッフル: スポンサーであるSentryとCode Magicがラッフル抽選会を行うことが告知され、参加が推奨されました。
  • ライブスタジオセッション: ブレイク中やセッションの合間にライブスタジオセッションが行われました。11 LabsのThor やPartifulのAlex Cho がゲストとして登場し、彼らの仕事やカンファレンスのトーク内容についてさらに詳しく話しました。
  • Animate React Native: React Nativeアニメーションのプラットフォーム animate reactnative.com が紹介され、AppJS参加者向けの割引コードが提供されました。
  • Bolt / Stack Blitz: Stack Blitz の Tom が、AI生成プラットフォームである Bolt について紹介しました。Boltを使ったアプリ開発における「Vibe Coding」というアプローチを提唱しました。これは、明確な仕様がない状態から始め、AI（Bolt）を使って素早くプロトタイプを作成し、それを見ながらアイデアを改善し、再びAIで修正するという、プロンプトと試行錯誤を繰り返す高速な開発サイクルです。参加者リストアプリを例にしたデモで、リスト表示、チェックボックス、要素のクリック可能化、並べ替えアニメーションなどを迅速に実装する様子を示しました。Boltはデータベース連携なども可能で、リアルなプロトタイプや実際のプロダクションアプリ構築にも利用できると述べました。また、Hackathon.devで大規模なハッカソンが開催されることを告知しました。ランタイムエラーのデバッグにおけるBoltの機能にも触れました。Expoチームとの連携によるExpo統合についても言及しました。
  • Expoでの認証: ExpoのLaura Besが、Expoアプリでのユーザー認証のベストプラクティスについて話しました。シームレスで、高速で、セキュアな認証体験を目指すことの重要性を強調しました。ネイティブAppleサインインの活用や、Expo SecureStoreによる暗号化されたローカルトークンストレージ、Experimental restores cacheによるオフラインサポートなどが紹介されました。数週間以内に「Expo Elements」という新しいパッケージが登場することも予告されました。
  • PartifulのApp Clip開発: PartifulのAlex Choが、パーティー招待アプリPartifulの開発（特にApp Clip）について話しました。Partifulが人々をつなげるイベントプラットフォームであると紹介し、自身の好きな機能として「誕生日」に触れました。App Clipの開発で直面した課題について、バンドルサイズ制限以外に、InvocationやAssociated Domainsといった新しい概念の理解、そしてテストと段階的なリリース戦略の難しさを挙げました。しかし、App ClipはPartifulのiOSダウンロードの23%を占める重要な流入元となっていると述べました。Android Instant Appについては、現時点で安定した代替ライブラリが見つかっていないため取り組んでいないとのことです。

Day 2 クロージング

  • Day 2の全セッション終了後、MCがカンファレンスを支えたスタッフ、技術チーム、スピーカー、そして参加者全員に感謝の意を伝えました。会場外のレストランで午後7時までアフターパーティーが開かれることが告知され、参加者同士の交流が推奨されました。Bit Vavoのラッフル当選者はその場で賞品を受け取れることが伝えられました。翌日（Day 3）のイベントやアフターパーティーについても言及がありました。MCのYanniは、自身にとってDay 2がMCとして最後のセッションであることを述べ、感謝を伝えました。

以上が提供されたソースに基づく App.js Conf 2025 Day 2 のセッション概要です。

kazutoyo@TellerNovelkazutoyo@TellerNovel

React Native の新しいアーキテクチャ (Nico と Ricardo from Meta)

Meta の Nico 氏と Ricardo 氏による「React Native の新しいアーキテクチャ」に関するセッションは、App.js Conf 2025 の Day 1 で行われました。彼らは Meta の React チームのソフトウェアエンジニアであり、新しいアーキテクチャがデフォルトで有効になって以来、これが初めてのトークでした。

セッションでは、React Native の新しいアーキテクチャの現在と未来について話されました。

新しいアーキテクチャとは何か、なぜ開発されたのか

  • 新しいアーキテクチャは、React Native の内部を書き直したものです。
  • その目的は、React のコンカレント機能（concurrent feature）を有効にし、非同期モデルからより同期的なモデルへ移行することです。
  • 以前のレガシーアーキテクチャでは、ネイティブアプリケーションと JavaScript レイヤーはブリッジを使用して通信しており、この通信は JSON メッセージのシリアライズによって行われていました。JSON メッセージのシリアライズは高コストでした。新しいアーキテクチャではブリッジが最終的に削除されました。これにより、新しいアーキテクチャの利点がもたらされます。

新しいアーキテクチャの主要な要素

セッションで強調された新しいアーキテクチャを構成する主な要素は以下の通りです:

  • 新しいネイティブモジュールシステム:
    • レガシーシステムを置き換えるものです。
    • 同期的なランタイムアクセスを提供します。
    • Codegen のおかげで完全にタイプセーフです。
    • C++で書かれており、iOS と Android 間で実装が共有されています。
    • モジュールの 遅延ロード（lazy loading） をサポートしており、アプリが使用するすべてのモジュールを事前にロードするのではなく、実際に使用するときにのみメモリにロードします。これは、Facebook アプリでの起動時間の大きな改善に貢献しました。
  • 新しいレンダラー:
    • デバイスの画面に React コンポーネントを実際にレンダリングする部分です。
    • React 18 および今後のバージョンで開発・搭載されるすべての React コンカレント機能の実装を可能にします。
    • これもC++で書かれており、プラットフォーム間で実装が共有されています。
  • ブリッジの削除:
    • 新しいアーキテクチャで最も期待されていた変更の1つであり、これにより新しいアーキテクチャのすべての利点が実現されました。

新しい機能とコミュニティでの採用

  • 新しいアーキテクチャは、レガシーアーキテクチャのボトルネックや限界を解消するだけでなく、新しい機能や API を提供することで、アプリケーションをさらに向上させることが可能です。
  • ビューのアウトラインのスタイリング、ボックスシャドウの導入、コンポーネントへのフィルタリングや画像ブレンドの適用など、いくつかの機能は新しいアーキテクチャでのみ利用可能です。新しいアーキテクチャを採用しない場合、これらの新しい API は使用できません。
  • コミュニティはこれらの改善をすでに活用しています。例えば、Reanimated (Software Mansion) は新しいアーキテクチャを活用するために C++ で書き直されており、より小さくなる予定です。React Native MMKV のメンテナーは、新しいモジュールシステムの型安全性を利用して、null許容性に関する長年の問題を修正できました。
  • Expo SDK 53 では、すべての Expo プロジェクトで新しいアーキテクチャがデフォルトで有効になりました。SDK 53 に移行すると、アプリは新しいアーキテクチャ上で実行されます（ただし、オプトアウトすることも可能です）。
  • Expo EAS 上でのビルドの採用率は高く、全ビルドの 60%以上が新しいアーキテクチャで実行されており、SDK 53 に限定すると80%以上が有効になっています。
  • コミュニティからの成功事例として、Kraken は新しいアーキテクチャを段階的に採用することで、アプリのパフォーマンス問題を修正しました。Blue Sky も新しいアーキテクチャに移行しており、パフォーマンスが向上したと報告されています。

レガシーアーキテクチャの未来

  • レガシーアーキテクチャは、セッションが行われた週の月曜日をもって 「frozen（凍結）」 されました。
  • これは、レガシーアーキテクチャに対する開発を全面的に停止することを意味します。バグ修正、新機能の追加、プルリクエストの受け入れは行われません。ただし、セキュリティ上の重大なバグや、エコシステム全体をブロックするような大きな UI バグの場合は検討される例外もあります。
  • リリースの際、レガシーアーキテクチャのテストも停止されます。
  • これにより、React Native のコアチームは新しいアーキテクチャにリソースを集中できます。
  • レガシーアーキテクチャは 「最終的にいずれかの時点でなくなる」 予定です。具体的なタイムラインは現時点では共有されていません。
  • レガシーアーキテクチャを使用している場合、今が移行を検討する時期です。既存のインタラプトレイヤーや、React Native dev tools の警告を活用することが推奨されています。

互換性

  • インタラプトレイヤーは今後も存在し続け、レガシーコードと新しいアーキテクチャのコードを混ぜて使用することが可能です。
kazutoyo@TellerNovelkazutoyo@TellerNovel

App.js Conf 2025 Day 2: Expo UI とネイティブデザイン言語 (Keith Kurak from Expo)

App.js Conf 2025 の Day 2 では、Expo の Dev Success を務める Keith Kurak 氏が、「Expo UI とネイティブデザイン言語」と題するセッションを行いました。

セッションの目的と背景

Keith 氏は、このセッションの目的は、React Native エコシステムおよび Expo におけるネイティブ UI および機能へのアクセス提供の進化について話すことだと述べました。彼は、React Native で最高のネイティブアプリケーションを、しかも迅速に構築できると強く信じていると語り、これまでニッチで専門的だと思われていたことが、より多くの人々にとってデフォルトになるだろうという感覚を共有しました。これまでネイティブコードや機能から距離を置いていた開発者も、恐れや不安ではなく、期待を持ってネイティブに目を向けるようになるだろうと述べています。

Expo UI とは

  • Expo UI は、React コンポーネントを記述する JSX の中で、ネイティブの高階プリミティブ（higher order native primitives）に直接アクセスを提供することを目的としています。
  • これはUI ライブラリではありません。そうではなく、標準的なプラットフォームのデザイン言語（standard platform design language）へのアクセスを提供します。
  • Expo UI を使うことで、あたかも iOS 専用の UI を構築するかのように、プラットフォーム固有のファイル内で UI を構築できるようになります。

Expo UI がもたらすメリット

Expo UI を使用することの利点は多岐にわたります。

  • 優れたデフォルト設定: デフォルトで見栄えの良いコンポーネントレイアウトが得られるため、スタイリングの必要がほとんどありません。
  • 洗練されたデフォルト動作: 標準の React Native ではアニメーションなどを使って近似しようとする必要があったものが、箱から出してすぐに使える高度なデフォルト動作を利用できます。これにより、アニメーションなどの労力を他のクールな機能のために使うことができます。
  • ネイティブ開発者への親和性: 単一のパッケージ内でこれらの高階ネイティブコンポーネントへの一対一のマッピング（one-to-one mapping）が提供されるため、Swift UI 開発者もすぐに使い始めることができます。

技術基盤と構造

Expo UI は、ネイティブモジュール（native modules）がこれらのコンポーネントをカプセル化していることにより実現されています。

  • iOS の Swift UI と Android の Jetpack Compose の両方をサポートし始めています。
  • 個別のコンポーネントとして使用することも、H スタックや V スタックのような構造コンポーネントと組み合わせて、Swift UI のプリミティブを介してホストコントロール内に完全にネイティブなインターフェースを構成することも可能です。

現状と今後の展望

  • Expo UI は SDK 53 で試験的（experimental）に提供されています。
  • 開発者に試用を奨励し、この初期段階で見つかった問題を報告するよう呼びかけています。
  • 個々のコントロールのラッピングは比較的簡単ですが、Jetpack Compose や Swift UI コンポーネントを React Native のビュー内に子としてネストする（またはその逆）といった「crossing the streams」は複雑であり、作業が必要であると認めています。
  • API は今後変更される可能性があるとしています。
  • Expo UI を使用することがすべてのアプリ、すべての画面に適しているわけではないとしながらも、プラットフォーム固有のコードをいつ、どこで、どのくらいの頻度で使用するかという判断基準（calculus）が大きく変わる転換点にいると感じていると述べました。
  • 将来的には、Android、iOS、Web 用に別々の画面を維持することが、すべてのプラットフォームで単一のビューを提供するのと同じくらい効率的になるかもしれないと考えています。その場合、それぞれのファイル内での柔軟性は前例のないものになるでしょう。

コミュニティの貢献と比喩

この取り組みはコミュニティの貢献によって支えられています。Foundations、Andrew Levy 氏（Swift UI React Native ライブラリ）、Tomasipedo 氏（Expo modules API への Swift UI / Jetpack Compose の導入）などがこの分野に貢献しています。

Keith 氏は、この柔軟性と組み合わせの可能性を説明するために、シンクホールが美しい湖になったレイクリヤラ や、86種類のトッピングがあるホットドッグスタンドで、何を組み合わせても常に美味しくなるという比喩 を用いました。Expo UI を介した Swift UI や Jetpack Compose のビュー、標準的な React Native のビュー、Expo DOM コンポーネントを介した Web コンポーネントなどを互いの中に配置して組み合わせることが可能であり、さらに Expo modules API を使って Swift や Kotlin を直接記述し、それらのビューをネイティブコード内で使用することもできる という柔軟性を強調しました。

kazutoyo@TellerNovelkazutoyo@TellerNovel

App.js Conf 2025: Partiful (Alex from Partiful) に関する詳細

App.js Conf 2025 では、Partiful のプロダクトエンジニアである Alex Cho 氏が登壇し、同社のイベントプラットフォーム「Partiful」に関するセッションと Live Studio でのインタビューが行われました。

Partiful アプリの概要

Partiful はニューヨーク発のイベントプラットフォームです。人々がイベントを作成し、友人を招待し、人々をつなぎ、集めることを目的としています。現在、主に誕生日パーティー、ホームパーティー、観賞パーティー、ピクニックなどに利用されています。ユーザーはクリエイティブなデザインを作成し、個性を表現することができます。Partiful は Google Play のベストアプリに選ばれ、App Store の文化的なインパクトのファイナリストにもなっています。

技術スタックと開発の歴史

Partiful は、React Native と Expo を使用して構築されています。

  • 2020年: 当初、共同設立チームが React 開発者でありモバイル開発経験がなかったため、ウェブサイトとして開始されました。また、招待状を送る際にゲストにアプリダウンロードを要求すると RSVP が少なくなるという理由もありました。
  • 2023年: ウェブサイトで traction を得た後、モバイルアプリへの投資を開始し、iOS アプリをリリースしました。
  • 2024年: Android アプリをリリースしました。同時期に Software Mansion と提携し、Davidid 氏と Camille 氏と協力して iOS アプリとの機能パリティを達成しました。その後、App Clip や Live Activity といったプロジェクトに取り組みました。

アプリ採用率向上のための課題と App Clip

iOS アプリのリリースから約9ヶ月後、Partiful チームはユーザーの使用状況からいくつかの課題に気づきました。

  • 課題:

    • ユーザーがアプリの存在を知らないという「ユーザー教育」の問題がありました。
    • ユーザーが単に RSVP したいだけで、アプリをダウンロードする環境や必要性を感じていないという「ユーザー体験」の問題がありました。
    • なぜアプリをダウンロードする必要があるのか理解されないという「信頼」の問題がありました。

  • 試みと App Clip:

    • これらの課題に対し、アプリ採用率の向上を目標に掲げました。
    • 最初の試みとして、モバイルウェブ体験にバナーを設置しましたが、効果は限定的でした。ユーザーはすぐにバナーを閉じてしまったようです。
    • 次に、App Clip の導入を試みました。App Clip は iOS の機能（Android の Instant Apps に類似）で、ストアからダウンロードせずに開くとすぐに利用できるアプリの小さな一部です。バンドルサイズは50MB以下である必要があり、Partiful の場合は iMessage からの起動を重視しました。
    • Partiful に App Clip が適していた理由は、ユーザーがチャットアプリ（特に iMessage）で招待を個人的に送るという既存の行動パターンがあったためです。また、ユーザーにアプリを完全にコミットする前にテストドライブさせることで、機能をアップセルする最良の方法でした。さらに、App Clip は Partiful の招待状が目指す「カジュアルさと過剰さ」という魔法のような感覚を高めることができると考えられました。

  • App Clip の効果:

    • App Clip の導入は大きな成功を収めました。
    • App Clip 経由でアプリに来たユーザーは、モバイルウェブ経由のユーザーと比較して、ダウンロード率が高かったです。
    • App Clip は機能のアップセルに効果的でした。
    • App Clip は現在、iOS ダウンロード全体の23%を占めるほど、アプリダウンロードの重要なソースとなっています。

特徴的な機能

  • 誕生日機能: Alex 氏のお気に入りの機能の一つとして、誕生日を奨励する機能が挙げられました。誕生日の一ヶ月前に通知を送り、誕生日パーティーを計画することを促すものです。
  • Party Genie: ホームページにある「inspiration を得る」ための機能で、さまざまなユニークなパーティーアイデアのテンプレートを提供します。例えば「water tasting party」のようなアイデアがあり、これは AI ではなく、チームのメンバーが考案しているものです。

今後の展望

Partiful は今後、「やることを見つける」機能に注力したいと考えています。ユーザーが友達と一緒にできること（クラス、クラブパーティー、コンサートなど）を発見できるようになることを目指しています。

開発プロセス

  • Web から React Native への移行当初は、ほぼゼロからコードを書き直しました。
  • 現在、Web と Mobile でコンポーネントライブラリは異なっており、今のところ React Native for Web を使用する計画はありません。
  • API 契約、ビジネスロジック、ヘルパー関数などは、monorepo 内の共有パッケージに移され、コードを共有しています。これにより、Web と Mobile の動作を可能な限り一致させています。UI 要素はそれぞれのプラットフォームに特化させています。
  • Android Instant App への投資は、Android のユーザーベースが増えてから検討したいと考えています。

セッションでは、Partiful が React Native と Expo を活用していかに迅速にクロスプラットフォーム展開を進め、App Clip のようなネイティブ機能を戦略的に導入してユーザー獲得とエンゲージメントを向上させているかが示されました。Alex 氏は、Web 開発者が React Native へ移行する際の知識の活用についても言及し、Software Mansion との協力にも感謝を述べています。

kazutoyo@TellerNovelkazutoyo@TellerNovel

Software Mansion Casper 氏による「What's New in React Native」セッションの詳細

App.js Conf 2025 では、Software Mansion のソフトウェアエンジニアである Casper 氏が、Meetup の16回目の開催を記念して、恒例となっている「What's New and Interesting」というテーマで React Native の最新情報について語りました。

セッションで紹介された主な最新情報や興味深い点は以下の通りです。

  • Expo SDK 53

    • SDK 53 から、New Architecture が全てのプロジェクトでデフォルトで有効化されました。
    • 設定によりオプトアウトすることは可能ですが、Expo EAS (Expo Application Services) 上での SDK 52 のビルドの75%が既に New Architecture を使用しているというデータが示されました。この高い採用率から、Casper 氏はオプトアウトしない方が良い可能性を示唆しています。

  • React Native 0.79

    • 最新の安定版である React Native 0.79 は、React 19 と共にリリースされました。

  • Expo Maps

    • React Native maps の代替となる Expo Maps がアルファ版として利用可能になっています。

  • Expo Audio

    • 以前の Expo AV ライブラリから分割された新しいライブラリとして、前回のリリースで安定版となった Expo Video に続き、Expo Audio も安定版としてマークされました。

  • バックグラウンドタスクの改善

    • expo-background-fetch を置き換える新しい API/モジュールとして expo-background-tasks が導入されました。
    • これは特に、オーバーザエア（OTA）アップデートをバックグラウンドで実行するため（例: 30分ごとにサーバーに新しいアップデートがないか確認）、ユーザー設定の同期、あるいはバックグラウンドでの計算処理などに使用できます。

  • Android のエッジ・トゥ・エッジ表示

    • Android デバイスでのエッジ・トゥ・エッジ表示がデフォルトで有効化されました。

  • デバイス上での AI モデル実行

    • React Native アプリでデバイス上で AI モデルを実行するためのソリューションが複数紹介されました。
    • Software Mansion による react-native-executor: Meta の Executor フレームワークをベースとしています。より汎用的で、音声認識 (Speech-to-Text)、OCR (Optical Character Recognition) など様々な種類のモデルをサポートしています。開発者フレンドリーであることを目指しており、数行のコードで AI 機能をアプリに追加でき、ネイティブコードの知識は不要です。プライバシーファースト（ローカル実行のみ）、費用対効果が高い（ユーザーのハードウェアを使用）という特徴があります。LLM、音声認識（Whisper、Moonshine）、OCR に対応し、Hugging Face リポジトリからダウンロード可能なモデルが提供されています。
    • Callstack による react-native-ai: Vercel AI SDK を使用しています。特に LLM（大規模言語モデル）に特化しており、ML-CLM エンジンを使用して350〜400種類の LLM モデルを実行できます。

  • Microsoft Office における React Native

    • Microsoft がどのように React Native を Microsoft Office（Excel や Word の一部など）で使用しているかについての記事が紹介されました。
    • これは6億人のユーザーに使用されており、コンテンツアイランドアーキテクチャ（異なる技術で作られたシェルの中にインタラクティブな React Native のアイランドを組み込む）を採用しています。
    • React Native の使用により、ネイティブな Windows プラットフォーム開発者よりも React Native 開発者の採用が容易になったこと、コードの再利用性（クロスプラットフォーム）、開発者エクスペリエンスの向上がメリットとして挙げられています。

  • React Native Skia 4

    • React Native Skia は安定版 4.0 リリースに向けて着実に進んでいる段階にあることが述べられました。

  • 新しいフレームワークの可能性

    • Nicolola Carti 氏による React Native フレームワークのコンセプトに関する RFC (Request for Comments) が言及されました。
    • Callstack は、Expo の競合となりうる「React Native Enterprise Framework」（Chaskov）を開発しました。これはブラウンフィールドサポート、モバイルマイクロフロントエンド、継続的ネイティブ生成（これも Expo の特徴）などの機能を約束しています。Casper 氏自身の立場としては、Expo を使い続けると述べています。

  • React Native Screens

    • React Native Screens について非常に簡潔な（ナッツシェルでの）説明があり、Casper 氏自身も React Native のオープンソースチームで開発に携わっていることが述べられました。

Casper 氏のセッションは、React Native および Expo エコシステムが継続的に進化し、より強力なクロスプラットフォーム開発を可能にしている現状と将来の展望を示すものでした。特に、New Architecture のデフォルト化、新しいネイティブ機能へのアクセス、そしてデバイス上での AI 実行能力の向上といった点が強調されました。

kazutoyo@TellerNovelkazutoyo@TellerNovel

AIコーディングツールと大規模プロジェクト (Raphael Mandola)

App.js Conf 2025 では、Hinge Health のスタッフソフトウェアエンジニアである Raphael Mandola 氏が、大規模な React Native プロジェクトで AI コーディングツールをどのように活用するかについて語りました。彼は以前、インディペンデントコントラクター、コンサルタント、そしてスタートアップ、スケールアップ、エンタープライズのエンジニアとして幅広い経験を積んでいます。彼は、優れたユーザーエクスペリエンスとコードとデザインの交差点に情熱を持っています。

セッションの背景には、近年登場した ChatGPT、Claude、GitHub Copilot、Cursor といった AI ツールの存在があります。これらのツールは単にコーディングを加速させるだけでなく、私たちがどのように計画し、共同作業を行い、複雑さを管理するかを変えつつあります。彼はこれを、1979年に表計算ソフト Visicalc が会計作業に革命をもたらした歴史的変化に例えました。かつて手作業で時間と労力がかかり、間違いがあると全てを再計算する必要があった会計作業が、Visicalc によってインタラクティブかつ自動化されたように、AI ツールが開発プロセスを変えています。

Raphael 氏は、新しいプロジェクトで最初に試されがちな AI ツールの使用方法として「Vibe Coding (バイブコーディング)」に言及しました。これは、AI アシスタントにプロンプトを入力し、「これを動作させて」「動作するようにして」と繰り返し指示を出すだけで、生成されたコードを十分に読まない方法です。新しいプロジェクトでは生産性を大幅に向上させることができるため、良い経験となる可能性があります。

しかし、Raphael 氏は、ユーザー数が多く、複数のチームがあり、コードが共有され、重要なビジネス指標を維持する必要がある大規模なプロダクションコードベースでは、Vibe Coding は無責任な方法であると強く指摘しました。

その理由として、開発者の仕事は単にコードを入力することだけではないからです。開発者の仕事には、影響を理解すること、チーム間で連携すること、そして決定が高品質な製品につながることを確認することが含まれます。彼は、AI が開発者を置き換えることはないだろうと述べています。

大規模プロジェクトにおける AI ツールのより効果的な活用方法として、彼は「Plan MD (計画マークダウン) ファイル」という新しいワークフローを紹介しました。これは、AI とのチャットセッション間でコンテキストを維持する必要性から生まれたもので、本質的には思考のスクラッチパッドとして機能します。このファイルは、AI アシスタントと共同作業を行い、アイデアを具体化し、明確に定義されたタスクを作成して段階的に実行するための場所となります。彼は Expo リポジトリでのコード修正を例に、Cursor を使ってこのワークフローを実演しました。

このワークフローは、PR (Pull Request) 分析にも役立ちます。AI (Cursor) にチェックリストを作成させ、チェックを実行させることができます。彼は、これは怠惰になるための方法ではなく、より綿密に作業を行うための方法だと強調しました。これにより、複雑なコードについて AI と会話を続け、具体的な質問をすることができ、PR レビューの終わりには技術的な詳細を説明する詳細なドキュメントが得られます。

AI ツールの導入に際して生じる不確実性や、「開発者は置き換えられるのか」という問いに対して、彼はランボルギーニの運転に例えました。ランボルギーニを与えられてすぐに壁に衝突したとしても、それは車のせいではなく、運転方法を学ぶ必要があるのと同じように、AI ツールもその使用方法を学ぶ必要があると述べています。

最後に、AI ツールの台頭によって、これから開発者を差別化する要素、より重要になるスキルとして、以下の点を挙げました。

  • 洞察力 (Insight)
  • 創造性 (Creativity)
  • センス/趣味 (Taste)
  • コミュニケーション能力 (Ability to communicate)
  • 説得力 (Ability to persuade others)

これらのスキルが、AI という新しいツールによってさらに強力になる、というのが彼のメッセージです。彼は、自身のブログ (raph.dev) でこれらのワークフローに関する記事を公開していることも告知しました。

kazutoyo@TellerNovelkazutoyo@TellerNovel

Brownfield React Nativeとネイティブスーパーアプリへの統合 (Sojin Park from Toss)

App.js Conf 2025 では、Toss のフロントエンドエンジニアリング責任者である Sojin Park 氏が登壇し、大規模な既存のネイティブアプリ（スーパーアプリ）に React Native を統合する「ブラウンフィールド」開発について語りました。彼は、韓国の主要なフィンテック企業である Toss での経験を共有しました。

Toss とそのアプリケーションの規模

  • Toss は、送金、投資、決済、資産管理など、金融関連のあらゆるサービスを提供する韓国を代表するフィナンシャルスーパーアプリです。
  • 韓国人の約半数が、日々の金融ニーズのために Toss のアプリを利用しています。
  • ユーザー数は月間アクティブユーザー2,000万人に達し、数百人の開発者が関わっています。
  • アプリは数百種類の異なる金融サービスを扱っており、それぞれ異なるチーム、タイムライン、技術要件を持っています。
  • これらのサービスは、ネイティブコード、Webビュー、そして新たに加える React Native と、複数の異なる技術で構築されています。

ブラウンフィールド統合の挑戦

  • Sojin Park 氏が定義するブラウンフィールドとは、「既存のネイティブアプリに React Native を追加すること」です。
  • Toss のような大規模かつ複雑なスーパーアプリにおいて、ネイティブ、Webビュー、React Native といった異なる技術間での開発を大規模に調整することが最大の課題でした。

Toss が達成した成果とソリューション

Toss はこれらの課題を克服し、以下の成果を達成しました:

  • 非常に高速な開発ワークフロー:
    • ビルド時間: サービスバンドルは npm run build コマンドで数秒で完了します。
    • バンドルサイズ: Hermes バイトコードバンドルはわずか約120キロバイトという小ささです。全体でも200キロバイト未満に抑えられています。
    • ロード時間: バンドルは1秒未満でロードされます。
    • デプロイ頻度: 1日に40回以上のデプロイを行っています。
  • 開発体験: 開発時には npm rundev を実行することで、馴染みのある開発体験が得られます。
  • OTA (Over-the-Air) インフラストラクチャ:
    • サービスバンドルを提供するために、OTA (Over-the-Air) のための特別なインフラストラクチャが必要でした。
    • Toss は、AWS上でホストできる独自の OTA インフラストラクチャを提供しています。
    • これは Pulumi を使用した Infrastructure as Code として構築されており、AWS認証情報を提供するだけでインフラ全体が自動的にプロビジョニングされます。

オープンソースプロジェクト「granite」

  • Toss がブラウンフィールド統合のために構築したものは、「granite」という名前でオープンソース化されています。
  • このプロジェクトには、バンドル分割、ESU (Expo Service Updates と思われる) 統合、そして先述のインフラストラクチャコンポーネントが全て含まれています。
  • 興味のある開発者は、GitHub上の toss granite リポジトリでコードを確認できます。

Sojin Park 氏は、自身の役職が Toss のフロントエンドエンジニアリング責任者であり、約100人のフロントエンド開発者を管理していることに言及しました。また、Toss のフロントエンドチームの活動を X (旧 Twitter) でフォローできることも告知しました (アカウント名は Tossf)。

彼のセッションは、非常に大規模で複雑な環境でも React Native を既存のネイティブアプリに効果的に統合し、高速な開発サイクルと優れたパフォーマンスを実現できることを示すものでした。特に、彼らが開発しオープンソース化したツールやインフラストラクチャは、同様の課題に直面している他の企業にとって大きな価値があると言えます。