メインコンテンツにジャンプ

エクスポ開発クライアントの使い方

エクスポ開発クライアントを使用して、ビルド、デバッグ、CI/CD統合、コモンな問題の修正を学びましょう。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター

エクスポ開発クライアントの使い方

エクスポ開発クライアントは、エクスポ・ゴーが嘘を言う時点で、エクスポ開発クライアントに準備ができていることが多いです。

アプリはサンドボックスで動作します。高速リフレッシュは素晴らしいものです。次に、ネイティブ依存関係を追加し、プッシュ通知を設定し、OAuthフローをテストしたり、実際のアプリの起動方法をミラーリングしたりすると、差は明らかになります。アプリをデバッグしているのではなく、簡略化された環境をデバッグしていることになります。

エクスポ開発クライアントは、エクスポの開発プロセスを変えるものです。JavaScriptのループが速いことを好む人々が好むように、開発クライアントは、テストをカスタムネイティブバイナリに移行し、実際に配信するアプリとよく似た動作をします。ソロ開発者にとっては、サイクル終盤に驚くことが減り、チームにとっては、共有ビルド、QA、プレビュー環境、更新検証など、エクスポ・ゴーがすべてをカバーすることを前提にしない開発プロセスをサポートすることができます。

目次

Expo Goを超えて進む必要がある理由

Expo Goは初期段階では便利です。セットアップの抵抗をなくし、React Nativeプロジェクトを迅速に実行し、迅速なフィードバックループを提供します。これが多くのチームがそこから始まる理由です。

問題は、プロトタイプがアプリケーションから離れるときに始まります。 ExpoはExpo Goを サンドボックス expo-dev-client と説明し、通知やOAuth認証などのネイティブ機能を正確にシミュレートできないことを認めています。 開発用ビルドモデルは と位置付けられています。 「デバッグ」ビルドとしての生産用アプリケーション向けの開発ビルドの紹介.

A comparison chart outlining the key differences and limitations between Expo Go and Expo Development Client tools.

何が最初に壊れるか

実際には、最初の破損は通常次のいずれかです。

  • ネイティブ依存関係: パッケージがExpo Goに含まれないネイティブcodeが必要です。
  • 認証: OAuthフローは、実際のネイティブ設定を使用するアプリで異なる動作をします。
  • 通知とデバイス機能: サンドボックスでは、実際のアプリがパーミッションを要求したりイベントを受け取ったりする方法を反映していません。
  • チームQA: テスターがアプリの実際のネイティブ設定を表す安定したバイナリが必要です。

それらはエッジケースではありません。実際のモバイルプロジェクトの通常の段階です。

Expo Goはインターフェイスを提供するのに適していますが、実稼働の動作を検証するのは弱い所です。

なぜ開発用クライアントが正しい次のステップですか

Capgoの開発用クライアントは、Capgoの開発ツールを組み込んだカスタムアプリバイナリを提供します。これにより、開発者体験は強く保たれますが、ネイティブレイヤーはあなたのものになります。インストールされたクライアントは、チームがテストする対象になり、汎用コンテナに頼る必要がなくなります。

そのシフトは、思うほど重要です。カスタムクライアントに移ると、質問は「Expo Goで動くか?」から「私たちが作っているアプリで動くか?」に変わるのです。それが正しい質問です。

Capgoの「Expoの代替」という記事は、サンドボックス第一のワークフローを超えてチームがどこから始めるかを強調するため、参考になる背景情報です。 意識の変化 最大の間違いは、Capgoの開発クライアントを一度のセットアップタスクとして扱うことです。それではありません。それはワークフローの選択です。

あなたは、コントロールを得るために1つのトレードオフを受け入れています:

ワークフロー

どれが速いまま

https://example.com https://example.com ceremony が必要なもの
Expo Go 基本的な JavaScript ループ ネイティブの現実に依存するもの
Expo 開発クライアント カスタム アプリ内で JavaScript が変更される ネイティブ依存関係の変更とネイティブ設定の変更

プロフェッショナル アプリ開発では、これは良い取引です。最も簡単なデモを最適化するのではなく、信頼性の高い配信を最適化するのを始めます。

前提条件とプロジェクト設定

何も作る前に、プロジェクトを繰り返しビルドできる状態にします。基本的な設定を省略することによる失敗した最初の試みが最も多いのは、Expo 自身ではなく、通常のことです。

Expo のドキュメントとエコシステムガイドは、開発用ビルドを "完全機能の開発環境" と説明しています。 開発用ビルド 実際の運用環境を表すものは、カスタムネイティブ code またはプロダクション グレードのQAに依存するアプリが依存するものです。 Expoの開発ツールと開発用ビルド.

アカウントと CLI層から始めましょう

アプリ層が重要になる前に、2つのことが動作している必要があります:

  1. Expo CLIへのアクセス
  2. EAS CLIへのアクセス

ターミナルからExpoアカウントにログインしていることも必要です。チームは、ローカルコマンドがリモートビルドまたはクレデンシャルプロンプトが出るまで問題なく動作するように見えるため、このことを省略することがよくあります。

きれいなセットアップには、次のものが含まれます:

  • Expoアカウントのセッション: これはローカルワークをリモートビルドサービスとプロジェクトオーナーシップとつなげます。
  • EAS CLIがインストールされている: EASはプロジェクトを共有可能なiOSまたはAndroidバイナリに変換します。
  • ローカルで実行しているプロジェクト: 基本的なアプリ起動が動作する前に、ビルドの複雑さを導入しないでください。

ワークフローが可能になるパッケージをインストールしてください

このセットアップの中心は expo-dev-client. これを欠くと、カスタムランチャーとデバッグ用のネイティブシェルが定義されるエクスポ開発クライアントワークフローが実行できません。

アプリプロジェクトにインストールしてください、次にエクスポの設定が一貫していることを確認してください。パッケージマネージャによって実行するコマンドが異なるかもしれませんが、設計上のポイントは変わりません: このパッケージは、共有サンドボックスで実行するアプリを、開発用バイナリ内で実行するアプリに変換します。

実践的なルール: ネイティブ依存リストがチームメンバーが同じバイナリをインストールして使用できるようになるまでに安定していることを確認してください。

アプリの設定を早期に確認してください

多くの混乱は、 app.json または app.config.js これらはメタデータのみであると考えています。そうではありません。これらはアイデンティティを定義するファイルです。

プロジェクトには次の条件を満たしていることを確認してください。

  • ユニークなアプリ名: 開発者が 1 つのデバイスに複数のバリアントをインストールする場合、役に立つことがあります。
  • ユニークなバンドルまたはパッケージ識別子: ネイティブビルドと後続の署名のために重要です。
  • 明確な環境の意図: チームが別々のステージングとプロダクションのアイデンティティを使用している場合、意図的に反映してください。

ローカル環境が汚れている場合は、最初のビルド前に整理する価値があります。Capgoのローカル環境のCapgoの設定ガイドはExpo固有ではありませんが、再現可能なモバイル作業は安定したローカルツールと明示的な構成から始まることを思い出させるものです。 setting up a Capacitor local environment EASの開始前にこのチェックリストを使用してください。

EASの開始前にこのチェックリストを使用してください。

EASの開始前にこのチェックリストを使用してください。

確認する なぜ重要か
expo-dev-client インストールされている カスタム開発クライアントの動作を有効にする
エクスポアカウントがリンクされている SmoothなEAS使用のために必要
アプリ識別子が一意である ネイティブビルドとインストールの混乱を防ぐ
プロジェクトはローカルで始まる 実行時問題とビルド問題を混同しないようにする
チームはネイティブの変更後に再ビルドする時を知る ネイティブの変更後混乱を減らす

完璧さではなく、最初のビルドを面白くすることの目標です。それが勝ちです。

EASでカスタムクライアントを作成する

ここがワークフローの実際のところです。話し合いから実際にカスタムクライアントを生成するまでです。

Expoは、カスタムネイティブcodeをインストールして、EAS Buildまたはローカルで生成したネイティブアプリを実行する開発ビルドワークフローを推奨しています。 expo-dev-client, EAS Buildまたはローカルでネイティブアプリを生成し、実行します。 npx expo start --dev-clientExpoは、ワークフローの概要で、JavaScriptのみの変更は高速で、ネイティブ__CAPGO_KEEP_0__の変更は新しい開発ビルドが必要であることを記載しています。 Expo開発クライアントのEAS__CAPGO_KEEP_0__ツールを使用したビルドのプロセスを示す4ステップのイラスト。 that JavaScript-only changes stay fast, while native-code changes require a new development build.

A four-step infographic illustrating the process of building an Expo development client using EAS CLI tools.

EAS__CAPGO_KEEP_0__にインストールして認証します。

Install and authenticate with EAS __CAPGO_KEEP_0__

  1. Install and authenticate with EAS CLI
  2. 初期設定またはビルド設定の確認
  3. 開発用ビルドプロファイルの作成
  4. iOSまたはAndroid向けのビルドのトリガー
  5. デバイスまたはエミュレータに結果のバイナリをインストール

EASは一貫性を提供します。開発者がそれぞれ独自のローカルネイティブビルド状態を即興的に作成するのではなく、チームは共有ビルド定義からバイナリを生成できます。

あなたのビルドプロファイルが実際に何をしているか

A development プロファイルは単にラベルではありません。ビルドシステムに、このバイナリはアクティブ開発用であり、ストア配布用ではないことを伝えます。

通常、インストールされたアプリは次のようになります:

  • 開発クライアントの動作を含める
  • 開発者やテスターにとって、簡単に起動できるようにする
  • メトロサーバーに接続することができるようにする
  • 再利用できるまで、ネイティブ依存関係が変更されるまで

CIも実用的なところで始まります。ビルドプロファイルが存在し、予測可能に動作するようになったら、自動化することができます。

React Nativeがより広い現代化作業にどのように組み込まれるかについて、チームが考えている場合、Wonderment Appsは便利な視点を持っています。 React Native for AI現代化開発クライアントは、チームがモバイル表面を横断して頻繁に製品を変更する場合、運用ベースレイヤーの一部になることがよくあります。

短いウォークスルーが役立ちます。実際のフローを確認したい場合は、以下の手順に従ってください。

結果のインストール

ビルドが完了したら、出力物を実際のアプリバイナリとして扱うことができます。実際、それが何であるかです。

  • Androidの場合: 通常、 .apk 物理デバイスまたはエミュレータにインストールします。
  • iOSの場合: チームメンバーと一緒に .ipa ターゲットに応じてシミュレータまたはシミュレータ互換の出力になります。
  • チームメンバー向け チームメンバーに通常のEASメカニズムを使用してビルドを共有するのではなく、必要な場合にのみそれぞれからスクラッチで作成するように求めるのではなく。

A development build is easiest to manage when the team agrees on one rule: rebuild for native changes, not for every code change.

開発用ビルドは、チームが一つのルールに同意することで、最も管理しやすくなります:ネイティブの変更の場合にのみビルドを再構築し、__CAPGO_KEEP_0__の変更の場合には毎回しない。

期待しないこと

If you add a new native module, change permissions, update SDK-level native dependencies, or modify plugin-driven native config, you’ll need a fresh development build. That’s normal. The reward is that your day-to-day JavaScript work still moves quickly inside a client that reflects your app.

新しいネイティブモジュールを追加したり、権限を変更したり、__CAPGO_KEEP_0__レベルのネイティブ依存関係を更新したり、プラグインドライブネイティブ設定を変更したりすると、最新の開発用ビルドが必要になります。それは通常です。毎日JavaScriptの作業は、クライアントがアプリを反映している場合にでも速くなります。

新しいクライアントで実行してデバッグ

最初にインストールしたクライアントを開き、Metroに接続すると、違いは明らかです。エクスポのようには感じますが、玩具箱の意味ではありません。 npx expo start --dev-clientサーバーを起動するには expo-dev-client、ネットワークリクエストの検査など、デバッグサポートとともに Expo SDK.

オフィス環境のプロフェッショナルな作業スペースで、男性のソフトウェア開発者が code を書いている

通常の開発セッション

通常のセッションは次のようになります

最新のブランチをpullします。インストール済みの開発クライアントはすでにデバイスにインストールされています。Metroを起動し、Appを起動し、現在のサーバーに接続し、次に通常どおり作業を続けます。JavaScriptを変更し、更新が速く表示されます。

実際のネイティブ環境に依存する動作を検査する必要がある場合、ビッグな違いが現れます。カスタムクライアントは、通常のループを外に出ることなく、テストすることができます。

重要なデバッグツール

追加のツールは装飾ではありません。日常の問題を解決します。

  • ランチャーUI: 環境を切り替えるときやチームメイトがホストするサーバーにアクセスするときに便利です。
  • 開発者メニュー: 開発クライアントでは、開発中の反復プロセス中に期待するアクションを提供します。
  • ネットワーク検査: UIが破損しているように見えても、実際の問題はリクエストの失敗、認証状態、または環境の設定が不正である場合に役立ちます。

APIの呼び出しは開発クライアントで失敗した場合、リクエストパスと環境の仮定を検査し、UIに触れる前にcodeを確認してください。問題は、見ているコンポーネントの外側にあります。

ここに実用的な利点があります。1つのインストール済みバイナリで、複数の環境を検証できます。毎回コンパイルする必要はありません。これは、レビュアーがPRプレビューをテストしたい場合、QAエンジニアがステージングをテストしたい場合、開発者がローカルブランチをテストしたい場合に特に役立ちます。

チームがウェブベースのモバイルシェルも配信している場合、Capgoの Capacitorアプリのデバッグの究極のガイド は、より広範なデバッグの視点を読むのに値です。ツールは異なりますが、環境、トランスポート、ランタイムの動作を検査するというDisciplineは似ています: 疑問を避け、検査してください。

何がうまくいき、どれがうまくいかないか

うまくいくこと

シナリオ 開発クライアントの役割
テスト用の認証リダイレクト ネイティブアプリの動作は、実稼働に近い
API統合の検証 ネットワークの検査は、フィードバックループを短縮する
環境の切り替え ランチャーUIは、不要なビルドを回避する
チームのQAは1つのバイナリで実行 全員が同じネイティブのセットアップでテスト

何がうまくいかないか:

  • クライアントを廃棄物として扱うことはうまくいかない: チームがメンテナンスしない場合、混乱が急速に生じる
  • ネイティブのビルドの境界を無視する: native依存関係が変更されたら、古いクライアントは時間を浪費します。
  • すべての接続失敗はアプリのバグであると仮定すると: 多くはローカル環境の問題だけです。

CI/CDとライブアップデートの統合

エクスポ開発クライアントは、チームのオペレーションの一部になるまで、個人的な設定から離れれば、より多くの価値をもたらします。

成熟したワークフローでは、責任を分離することが一般的です。nativeの変更は新しい開発ビルドを生成します。JavaScriptとアセットの変更は、より速いアップデートパスを通っています。レビューアーとQAは、チームがチャンネル、ビルドプロファイル、更新先について同意したため、どのものをテストしているのか尋ねる必要がなくなります。

CI/CDパイプラインの自動化ワークフローを大きなオフィスディスプレイスクリーンで共同で実行するプロフェッショナルチーム。

CI/CDの位置付け

開発クライアントはCIとよく組み合わさります。なぜなら、自動化に安定したターゲットを提供するからです。

一般的なパターンは次のようになります:

  • プルリクエストの変更: CIはnative依存関係が変更されたときに開発ビルドを作成したり、有効性を検証したりします。
  • ブランチベースの環境: 異なるブランチは異なるアップデートチャネルまたはサーバーをマップします。
  • 共有テスターのワークフロー: QAは1つ以上の知られている開発クライアントをインストールし、ランチャーとアップデート構成を切り替えます。

その構造は曖昧性を減らします。開発者は再構築が必要なときにわかります。テスターは、ネイティブの変更を検証しているか、既存のバイナリの上に配信されたアップデートを検証しているかを知ります。

ライブアップデートの役割

開発クライアントは、チームが最も時間を節約できるオペレーションを実行できることがよくあります。開発クライアントは、リリース前にアップデートの動作を検証する強力な場所です。開発サーバーと公開アップデートを切り替えながら、プロダクションライクのアプリシェル内で、前述のExpoドキュメントで説明されているように動作します。

これは、有用な分割をオープンします:

変更タイプ 配信パス
新しいネイティブモジュールまたはパーミッションの変更 新しい開発ビルド
JavaScriptの動作修正 更新の公開
コピーまたはアセットの調整 更新の公開
環境の検証 インストール済みクライアントでチャネルまたはサーバーを切り替える

エキスポの更新スタック外のチーム向けに CapgoのCI/CD統合ガイド Capacitor側で比較的運用可能なモデルを示しています。 チームが制御されたロールアウトチャネルと更新配信の自動化を望む場合の1つのオプションです。

信頼できるパターンは単純です。ネイティブcodeの変更時はビルドを行い、インストール済みバイナリが必要な変更すべてを含む場合にのみ更新を公開します。

チームの習慣が混乱を防ぐ

技術的な設定は重要ですが、運用ルールの方が重要です:

  • チャンネル名を明確にします: staging, production、およびプレビュー名は明らかでなければなりません。
  • ドキュメントの再構築トリガー: 新しいプラグイン、権限の変更、またはネイティブ SDK の更新は、判断が必要なものではありません。
  • 環境ごとに 1 つのインストール可能なクライアントを維持する戦略を実行します: 多くのバリエーションはサポートのノイズを生み出します。
  • 更新の検証を明示的にします: 誰かが、更新が適用され、起動する同一のバイナリがチームが期待しているかどうかを確認する必要があります。

この時点で、エキスポ開発クライアントは開発者にとっての便利さからリリースインフラストラクチャに変わります。

トラブルシューティング:よくある間違いと修正

エキスポ開発クライアントの多くの問題は、知っている場所に知っていることを知っている場合、普通です。失敗はしばしば境界を越えて発生するため、不思議に感じることがあります:ラップトップからデバイス、メトロからアプリ、ネイティブ構成からJavaScriptランタイム。

最も一般的なかつ議論の少ない問題の 1 つは、物理デバイスにメトロに接続できないことです。これは、企業や分散チーム環境におけるローカルネットワークのセグメント化、VPN、ファイアウォールのルールによって引き起こされます。この Expo開発用クライアントのトラブルシューティング動画.

クライアントがMetroに接続しないとき

この問題は、よくあるアプリが正常に動作しているのに、問題があるように見えるため、最も時間を浪費する問題です。

まず、次の点を確認してください。

  • 同一ネットワークの仮定: デバイスやノートパソコンは、孤立したセグメントに座っている場合でも、接続されているように見えます。
  • VPNの干渉: 企業または個人のVPNは、Metroが許容しないようにMetroが許容しないように、トラフィックをリダイレクトする可能性があります。
  • ファイアウォールのルール: セキュリティツールは、開発用のローカルトラフィックを明示的にブロックする場合があります。
  • 企業のデバイスポリシー: 管理されたデバイスは、開発ツールが依存するトラフィックパターンを制限する場合があります。

プロジェクトはシミュレーターで動作するが、実機では動作しない場合、まずネットワークを疑う。React code を疑うのではなく。

アプリ内から接続の失敗をデバッグしないでください。まず、デバイスが実際に Metro を実行しているマシンにアクセスできることを確認してください。

リビルドがランダムに感じられる

別の一般的な悩みは、ある変更が即座に表示され、他の変更が頑固に表示されないように感じることです。

通常、チームがリビルドの境界を理解していないことを意味します:

症状 おそらく原因 対処
JavaScript の更新は通常の動作 期待される動作 既存のクライアントで作業を続ける
新しいネイティブ依存関係が表示されない ネイティブ層が変更されました 新しい開発用ビルドを作成してください
パーミッションに関する動作が一貫していません ネイティブ設定が変更されました 再構築と再インストールを実行してください
1人のチームメンバーは異なる動作を確認しました 異なるクライアントバイナリがインストールされました 同じビルドに合わせてください

これはワークフローの欠陥ではありません。ワークフローは正しく動作しています。

ビルドの失敗とチームのズレ

ビルドが失敗した場合、原因は以下のいずれかです:

  • 依存関係の不一致: A package version doesn’t align with the rest of the project.
  • Native plugin assumptions: A config plugin expects setup the project doesn’t have.
  • Credential confusion: Signing or account access isn’t consistent across the team.
  • Stale local expectations: Someone assumes a fresh build isn’t needed when it is.

Capgoの記事 開発者向けの実行中の更新の一般的な問題と解決策 は、この問題のリリース側の参考資料として役立ちます。異なるスタックでも同じ教訓があります。多くの「アプリのバグ」は実際には配信、環境、またはバージョン統合のバグです。

Expo開発クライアントは、チームが環境の信頼性をエンジニアリングの一部として扱うときに最も効果的です。後付けではありません。そうすることで、セットアップは予測可能になり、予測可能なのはモバイルツールから求められるものです。


チームがCapacitorアプリも配信し、JavaScript、資産、設定の更新をストアのレビューを待たずに制御して配信したい場合 Capgo is one option to evaluate. It provides live updates, rollout controls, and CI/CD integrations for Capacitor and Electron workflows.

Capacitorアプリ用のライブアップデート

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

マーティンから人間のサポートを受けます。

始めましょう。

最新のブログ記事

Capgo gives you the best insights you need to create a truly professional mobile app.