JetBrains Rider 2024.1 ヘルプ

言語およびフレームワーク: React Native

React Native を使用すると、JavaScript および React を使用して、iOS および Android 用のネイティブモバイルアプリケーションを開発できます。これは Facebook によって作成され、Instagram、Airbnb などの有名なアプリで使用され、現在は JetBrains 独自の YouTrack mobile(英語) アプリケーションで使用されています。React Native オフィシャル Web サイト(英語)の詳細を参照してください。

JetBrains Rider は、React Native アプリケーションの作成、編集、リント、実行、デバッグ、保守を支援します。JetBrains Rider は、React および Flow シンボルに対してコード補完も提供します。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. 設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および JavaScript デバッガーに必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

新しい React Native アプリケーションの作成

JetBrains Rider で React Native アプリケーションを作成する推奨方法は、専用のプロジェクトジェネレーター（たとえば React Native CLI(英語)）を使用することです。

既存の React Native アプリケーションから開始する

既存の React Native アプリケーションの開発を継続するには、JetBrains Rider で開き、必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム画面で開くをクリックするか、メインメニューからファイル | 開く | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ウェルカム画面で VCS から取得をクリックします。

    または、メインメニューから Git | クローン…または VCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

依存関係をダウンロードする

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。

プロジェクトから android フォルダーと iOS フォルダーを除外する

  1. プロジェクトツールウィンドウで、android または iOS フォルダーを選択します。

  2. 選択のコンテキストメニューからディレクトリをマークを選択し、次に除外を選択します。

    Mark IOS folder as excluded

React Native の使用を開始するには、他のツール（iOS シミュレーターなど）をインストールします。これらのツールのリストは、オペレーティングシステムと、アプリケーションのターゲットとなるモバイルプラットフォームによって異なります。詳細なインストール手順については、React Native Getting Started ガイド(英語)を参照してください。

プロジェクトのセキュリティ

JetBrains Rider の外部で作成され、そこにインポートされたプロジェクトを開くと、JetBrains Rider は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、JetBrains Rider はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    JetBrains Rider はエディター領域の上部に通知を表示し、プロジェクトを信頼…リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、JetBrains Rider はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての JetBrains Rider 機能が使用可能になることを意味します。

  • 開かない : この場合、JetBrains Rider はプロジェクトを開きません。

コーディング支援

JetBrains Rider は、React API にコード補完を提供し、JavaScript コードに JSX(英語) を提供します。コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどに対して機能します。詳細については、React: コードの補完を参照してください。

React Native StyleSheet プロパティのコード補完も利用できます。

Completion for React Native StyleSheet properties

プロジェクトで Flow を使用している場合、JetBrains Rider はエディターでこの型チェッカーからのエラーをハイライトできます。詳細については、JetBrains Rider での Flow の構成および WebStorm で Flow を使用する(英語)を参照してください。

React Native アプリケーションの実行とデバッグ

物理デバイス上またはシミュレータ上でアプリケーションを実行およびデバッグできます。アプリケーションを起動する前に、シミュレータがすでに実行されていることを確認するか、物理デバイスを使用している場合は、すでにコンピューターに接続されていることを確認してください。

JetBrains Rider は、React Native アプリケーションの実行とデバッグを非常に柔軟にします。例: 初めてアプリケーションを起動する場合は、実行セッションまたはデバッグセッションの一部として、React Native バンドラの実行、アプリケーションのビルド、シミュレータ上でのオープンを選択できます。すでに実行中の場合はバンドルを起動しないでも、以前の実行以降にネイティブコードに変更を加えていない場合はアプリケーションのビルドを拒否することもできます。

React Native 実行 / デバッグ構成を作成する

  1. ツールバーの実行 / デバッグ構成ウィジェットから実行構成の編集を選択し、新規構成の追加ボタン (the Add New Configuration button) をクリックして、リストから React Native を選択して構成設定を開きます。

    Start creating a run/debug configuration

  2. JetBrains Rider でアプリケーションをビルドして起動するかどうかを選択します。

    • 最初にアプリケーションを起動している場合、または前回の実行後にネイティブコードを更新した場合は、ビルドと起動チェックボックスを選択します。

    • 前回のビルド以降、アプリケーションのネイティブコードに変更を加えていない場合は、このチェックボックスをオフにします。

      デバッグを開始すると、JetBrains Rider は、React Native オフィシャル Web サイト(英語)に従って、リモートデバッグが有効になっているシミュレーターでアプリケーションを開くのを待機します。

    • アプリケーションが Expo(英語) を使用している場合は、このバンドラーがプロセス自体を処理するため、チェックボックスをオフにします。Expo を使用する React Native アプリケーションをデバッグするを参照してください。

  3. ビルドと起動チェックボックスを選択した場合は、ターゲットプラットフォーム、Android または iOS を選択します。

    選択に応じて、JetBrains Rider は react-native run-ios または react-native run-android でバンドラーを実行します。

    • Android プラットフォームをエミュレートするには、Android 仮想デバイスを使用します。

    • iOS プラットフォームをエミュレートするには、ios-sim コマンドラインツールをグローバルにインストールする必要があります。これは、オペレーティングシステムに応じて、Node パッケージマネージャー (npm) を介して行うか、npm、pnpm、Yarn を参照するか、sudo npm install ios-sim -g コマンドを実行して行うことができます。

    React Native オフィシャル Web サイト(英語)の詳細を参照してください。

    オプションで、引数フィールドに、React Native に渡される引数を入力します。たとえば、‑‑ simulator フラグ‑‑ simulator="iPhone 4s" を使用してシミュレーターの型を指定します。

  4. 使用するブラウザーを指定します。

    React Native アプリケーションのデバッグでは、JetBrains Rider は Chrome ランタイムに依存しています。これは React Native 自体で使用されます。DevTools(英語) と JetBrains Rider を併用することもできます。デバッグセッションを開始すると、JetBrains Rider は新しい Chrome インスタンスを起動し、それに接続します。新しい Chrome ウィンドウを見たくない場合は、Chrome ヘッドレスモードを使用してください。

  5. Bundler ホストフィールドで、React Native バンドルが実行されるホストを指定します。デフォルト値は localhost です。

  6. Bundler ポートフィールドで、React Native バンドルが実行されるポートを指定します。デフォルトでは 8081 が選択されています。React Native オフィシャル Web サイト(英語)の詳細を参照してください。

    アプリケーションで Expo を使用している場合は、Expo の構成に応じて、ポートを 19000 または 19001 に変更する必要がある場合があります。以下の Expo を使用する React Native アプリケーションをデバッグするを参照してください。

  7. 使用する Node.js インタープリターを指定します。

    プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、the Browse button をクリックして新しいインタープリターを構成することもできます。

  8. react-native-cli へのパスとアプリケーションの作業ディレクトリ(英語)を指定します。必要に応じて、react-native run-android または react-native run-ios の環境変数を入力します。

  9. デフォルトでは、実行 / デバッグ構成を呼び出すと、JetBrains Rider が自動的に React Native バンドラを起動します。コマンドラインから JetBrains Rider の外部からバンドラを起動した場合は、停止して再起動せずに再利用することができます。起動前領域でバンドラを選択し、Remove をクリックします。

React Native Run/Debug Configuration

すべての実行 / デバッグ構成に共通の設定の詳細については、「実行 / デバッグ構成」を参照してください。

デバイスまたはシミュレーターを準備する

Android デバイスを使用している場合、アプリケーションで作業を開始するたびにデバイスを準備する必要があります。

iOS シミュレーターは 1 回だけインストールする必要があります。その後、JetBrains Rider が react-native run-ios で自動的に起動します。

  • Android デバイスを準備するには、Android 仮想デバイス(英語)を起動するか、USB 経由でデバッグを有効にして、USB 経由で物理 Android デバイスに接続します。

    React Native オフィシャル Web サイト(英語)の詳細を参照してください。

  • iOS シミュレーターを準備するには、埋め込まれたターミナル（Alt+F12）を開き、次のように入力します。

    npm install --global ios-sim

アプリケーションの実行

ツールバーの実行 / デバッグ構成リストから、新しく作成した React Native 構成を選択し、その横にある the Run button をクリックします。JetBrains Rider は実行ツールウィンドウを開き、まず新しい React Native タブで React Native バンドラーを起動します。

その後、選択したターゲットプラットフォームに応じて、react-native run-ios または react-native run-android コマンドが実行されます。ビルドが成功すると、シミュレーターはアプリケーションを表示します。

React Native packager is running

React Native アプリケーションをデバッグする

JetBrains Rider を使用すると、ネイティブ React Native バンドラを使用するアプリケーションと、Expo(英語) を使用するアプリケーションをデバッグできます。

React Native アプリケーションのデバッグでは、JetBrains Rider は Chrome ランタイムに依存しています。これは React Native 自体で使用されます。DevTools(英語) と JetBrains Rider を併用することもできます。デバッグセッションを開始すると、JetBrains Rider は新しい Chrome インスタンスを起動し、それに接続します。新しい Chrome ウィンドウを見たくない場合は、Chrome ヘッドレスモードを使用してください。

ネイティブバンドラーを使用する React Native アプリケーションをデバッグする

  1. 必要に応じて、コードにブレークポイントを設定します。

  2. 上記の説明に従って、新しい React Native 実行 / デバッグ構成を作成します。バンドラーがすでに JetBrains Rider の外部で実行されている場合は、起動前領域でバンドラーを選択し、除去ボタン (the Remove button) をクリックします。

  3. ツールバーの実行 / デバッグ構成リストから、新しく作成した React Native 構成を選択し、その横にある the Run button をクリックします。JetBrains Rider はウィンドウを実行するを開き、新しい React Native タブでバンドラーを実行します。

  4. ビルドが完了し、アプリケーションがシミュレーターアプリ内デベロッパーメニューを開く(英語)に表示されたら、JS をリモートでデバッグするを選択します。React オフィシャル Web サイト(英語)の詳細を参照してください。

    組み込みの JetBrains Rider デバッガーがシミュレータに接続します。

  5. 最初のブレークポイントに到達したら、デバッグセッションに進みます - ブレークポイントをステップスルーし、フレームを切り替え、値をオンザフライで変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。

Expo を使用する React Native アプリケーションをデバッグする

JetBrains Rider を使用すると、いくつかの方法でこのような React Native アプリケーションのデバッグを開始できます。

  • package.json ファイルの scripts セクションで、Expo を実行するスクリプトを作成します。次に、このスクリプトを React Native 実行 / デバッグ構成で起動タスクの前として指定します。

  • 最初に Expo を手動で、または package.json のスクリプトを介して実行し、次に Expo 関連のタスクを起動する前になしでデバッグセッションを開始します。

いずれの場合も、Expo の構成方法によっては、デフォルトのバンドラーポートを変更する必要がある場合があります。

  1. package.json ファイルを開き、scripts セクションを見つけて、Expo を起動するスクリプトを追加します。

  2. 必要に応じて、コードにブレークポイントを設定します。

  3. 上記の説明に従って新しい React Native 実行 / デバッグ構成を作成し、デフォルト設定を次のように変更します。

    1. このバンドラはプロセス自体を処理するため、ビルドと起動チェックボックスをクリアします。

    2. Bundler ホストフィールドで、Metro バンドラー設定の Connection フィールドで選択されている内容に応じて、デフォルトの localhost 設定を 127.0.0.1 または外部 IP アドレスに変更します。

    3. Bundler ポートフィールドで、Expo 構成に応じて、デフォルトの 8081 設定を 19000 または 19001 に変更します。

    4. 起動前領域で、デフォルトの React Native Bundler の起動タスクを選択し、除去ボタン (the Remove button) をクリックします。

      React Native Debug configuration for debugging with Expo: Remove default Start bundler task

      スクリプトを使用して Expo を自動的に開始するには、追加ボタン (the Add button) をクリックし、リストから npm スクリプトの実行を選択します。

      React Native Debug configuration for debugging with Expo: Add Run npm script task

      NPM スクリプトダイアログで、Expo を開始する npm スクリプトを選択します。

      React Native Debug configuration for debugging with Expo: Select npm script to run Expo

  4. ツールバーの実行 / デバッグ構成を選択リストから、新しく作成した 構成を選択し、その横にある the Debug button をクリックします。

  5. 携帯電話またはシミュレーターで Expo クライアント(英語)アプリケーションを開き、現在のアプリケーションを選択します。詳細については、Expo オフィシャル Web サイト(英語)を参照してください。

  6. 最初のブレークポイントに到達したら、ネイティブバンドラーを使用するアプリケーションをデバッグするときと同じように進めます。

JetBrains Rider で Chrome ヘッドレスを構成する

  1. メインメニューから実行 | 実行構成の編集を選択します。

  2. 実行 / デバッグ構成ダイアログで、React Native 構成を選択

  3. デバッグ用のブラウザーフィールドの横にある参照ボタン (the Browse button) をクリックします。Web ブラウザーとプレビューダイアログが開きます。

  4. Chrome を選択し、コピー (the Copy button) をクリックして、コピーした構成の名前を、たとえば Chrome ヘッドレスに変更します。

  5. 新しいブラウザー構成を選択し、編集ボタン (the Edit button) をクリックして、Chrome 設定ダイアログで macOS および Linux の場合は --headless、Windows の場合は --headless --disable-gpu と入力します。

  6. 実行 / デバッグ構成で、デバッグ用のブラウザーリストから新しい Chrome ヘッドレス構成を選択します。/Users/varvara.zaikina/Library/Application Support/JetBrains/WebStorm2023.3/chrome-user-data

    Configuring Headless Chrome
npm、pnpm、Yarn 言語およびフレームワーク: シェルスクリプト

関連ページ：

プラグインのインストール

プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...

GitHub でホストされているプロジェクトを管理する

解決策を確認する (クローン)：貢献したいリポジトリを JetBrains Rider から直接複製し、それに基づいて新しいソリューションを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の場合は、...

npm、pnpm、Yarn

JetBrains Rider は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。JetBrains Rider では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。JetBrains Rider は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと...

React

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。JetBrains Rider は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインス...

Flow

Flow は、JavaScript に型アノテーションをもたらす静的型チェッカーです。JetBrains Rider は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。始める前に：Node.js をダウンロードしてインストールします。Flow のインストールと構成：埋め込まれたターミナルで、次のいずれかのコマンドを入力します。を使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための、Flow オフィシャル W...

実行 / デバッグ構成

JetBrains Rider は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、デプロイ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — エディターから .NET 静的メソッドを実行 / デバッグするたびに作成されます。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されます。永続的な構成は、削除するま...