IntelliJ IDEA 2021.1 ヘルプ

React Native

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

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

始める前に

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

  2. 設定 / 環境設定 | プラグインページで JavaScript と TypeScript バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

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

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

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ウェルカム画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。

  3. 右側のペインで、React Native を選択し、次へをクリックします。

  4. ウィザードの 2 ページ目で、プロジェクト名と作成するフォルダーを指定します。

    Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

    React Native リストから、npx --package react-native-cli react-native を選択します。

    または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12npm install -g react-native-cli を実行して、react-native-cli パッケージを自分でインストールします。アプリケーションを作成するときに、react-native-cli パッケージが保存されているフォルダーを選択します。

  5. Finish をクリックすると、IntelliJ IDEA は必要なすべての設定ファイルを含む React Native -specific プロジェクトを生成し、依存関係をダウンロードして、デフォルト設定でタイプ React Native の実行 / デバッグ構成を作成します。

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

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

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

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

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

バージョン管理からアプリケーションのソースを確認してください

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

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

プロジェクトから android および iOS フォルダーを除外するには

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

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

    ws_react_native_mark_as_excluded.png

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

コーディング支援

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

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

ws_react_native_style_sheet_properties_completion.png

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

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

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

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

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

  1. メインメニューで実行 | 実行構成の編集に移動し、Icons general add をクリックしてリストから React Native を選択します。実行 / デバッグ構成: React Native が開きます。

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

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

    • 前回のビルド以降、アプリケーションのネイティブコードに変更を加えていない場合は、このチェックボックスをオフにします。デバッグを開始すると、IntelliJ IDEA は、React Native オフィシャル Web サイト(英語)に従って、リモートデバッグが有効になっているシミュレータでアプリケーションを開くのを待ちます。

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

  3. ビルドと起動チェックボックスを選択した場合は、ターゲットプラットフォーム、Android または iOS を選択してください。選択に応じて、IntelliJ IDEA は react-native run-ios または react-native run-android でバンドラーを実行します。

    必要に応じて、React Native に渡す引数を入力します。たとえば、‑‑ simulator フラグを使用してシミュレータの種類を指定します(‑‑ simulator="iPhone 4s")。

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

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

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

  6. 使用する Node.js インタープリターを選択します。これは、ローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

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

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

    React Native Run/Debug Configuration

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

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

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

アプリケーションの実行

  • ツールバーの実行 / デバッグ構成を選択リストで新しく作成した React Native 設定を選択し、その隣にある the Run button をクリックします。IntelliJ IDEA は実行ツールウィンドウを開き、最初に新しい React Native タブで React Native バンドラーを起動します。その後、選択したターゲットプラットフォームに応じて、react-native run-ios または react-native run-android コマンドが実行されます。ビルドが成功すると、シミュレータはあなたのアプリケーションを表示します。

    ws_react_native_packager_running.png

アプリケーションのデバッグ

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

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

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

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

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

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

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

    The React Native app is running on the simulator

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

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

    React Native sebugging session

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

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

  • Expo を実行するスクリプトを作成し、このスクリプトを React Native 実行 / デバッグ構成で起動タスクの前として指定します。

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

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

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

  2. 上記の説明に従って新しい 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
  3. 新しく作成した設定を選択し、the Debug button をクリックします。

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

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

IntelliJ IDEA に Chrome ヘッドレスを設定するには

  1. デバッグ用のブラウザーフィールドの横にある the Browse button をクリックします。ウェブブラウザーダイアログが開きます。

  2. Chrome を選択し、Copy をクリックして、コピーした構成の名前を Chrome ヘッドレスなどに変更します。

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

  4. 実行 / デバッグ構成で、デバッグ用のブラウザーリストから新しい Chrome ヘッドレス設定を選択します。

    Configuring Headless Chrome

関連ページ:

プラグインを管理する | IntelliJ IDEA

プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を学ぶのに役立ちます、プラグイン設定を開く設定 / 環境設定ダイアログで、プラグインを選択します。マーケットプレースタブを使用して...

npm、pnpm、Yarn | IntelliJ IDEA

IntelliJ IDEA は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。IntelliJ IDEA では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。IntelliJ IDEA は、package.jso...

React | IntelliJ IDEA

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

Flow | IntelliJ IDEA

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

Node.js | IntelliJ IDEA

Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。IntelliJ IDEA は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.j...

中断されたプログラムを調べる | IntelliJ IDEA

デバッガーセッションの開始後、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティブなメ