WebStorm 2026.1 Help

React Native

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

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

始める前に

  1. コンピューターに Node.js(英語) があることを確認してください。

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

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

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

React Native アプリを作成する

  1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

  2. 左側のペインで、 React Native を選択します。

  3. 右側のペインで：

    1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

    2. ノードランタイム フィールドで使用する Node.js ランタイムを指定します。 リストから設定済みのランタイムを選択するか、 追加 を選択して新しいランタイムを設定してください。

    3. React Native リストから npx --package react-native-cli react-native を選択してください。

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

  4. 作成 をクリックすると、WebStorm は必要な設定ファイルがすべて含まれた React Native 専用プロジェクトを生成し、依存関係をダウンロードして、デフォルト設定の React Native タイプの実行/デバッグ構成を作成します。。

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

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

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

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

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

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

  1. ようこそ 画面で リポジトリのクローン をクリックします。

    あるいは、メインメニューから ファイル｜新規｜バージョン管理からプロジェクト…、 Git｜クローン…、 VCS | バージョン管理から取得​ を選択します。

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

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

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

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

    アプリケーションを開いて依存関係をダウンロードする

    npm、 Yarn 1 または Yarn 2 を利用可能です。詳細は npm と Yarn を参照してください。

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

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

  1. プロジェクト ツールウィンドウ（Alt+1 ）で、 android または iOS（アイオーエス）​ フォルダーを選択します。

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

    IOS フォルダーを除外としてマークする

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

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

WebStorm の外部で作成されインポートしたプロジェクトを開くと、WebStorm は未知のソースコードをどう扱うか選択できるダイアログを表示します。

信頼できないプロジェクトの警告

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

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

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

  • プロジェクトを信頼 ：この場合、WebStorm はプロジェクトを開いてロードします。 つまり、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が利用可能になります。

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

詳細は プロジェクトのセキュリティ をご覧ください。

コーディング支援

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

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

React Native スタイルシートプロパティの補完

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

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

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

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

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

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

    Start creating a run/debug configuration

  2. WebStorm でアプリケーションをビルドして起動するかどうかを選択してください：

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

    • 最終ビルド以降にアプリケーションのネイティブコードを変更していない場合は、このチェックボックスをオフにしてください。 デバッグを開始すると、WebStorm は React Native 公式 Web サイト の説明通りにリモートデバッグを有効にしてシミュレーターでアプリケーションを開くのを待機します。

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

    選択に応じて、WebStorm は 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 アプリケーションのデバッグ時、WebStorm は React Native が利用する Chrome ランタイムに依存します。 DevTools も WebStorm と一緒に使用できます。 デバッグセッションを開始すると、WebStorm が新しい Chrome インスタンスを起動し、それに接続します。 新しい Chrome ウィンドウを表示したくない場合は、 Chrome Headless モードを使用してください。

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

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

  7. 使用する Node.js ランタイムを指定します。

    プロジェクト エイリアスを選択した場合、WebStorm は JavaScript Runtime ページの ノードランタイム フィールドにあるプロジェクトのデフォルトインタープリターを自動的に使用します。 ほとんどの場合、WebStorm はプロジェクトのデフォルトランタイムを検出し、自動的にフィールドに入力します。

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

    詳細については、「リモート Node.js ランタイムの構成」、「ローカル Node.js ランタイムの構成」、「Linux の Windows サブシステムで Node.js を使用する 」を参照してください。

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

  9. デフォルトでは、実行/デバッグ構成を起動すると WebStorm が自動的に React Native バンドラーを開始します。 すでに WebStorm の外部でバンドラーを起動している場合、例えばコマンドラインから、停止や再起動なしで再利用できます。 起動前 領域でバンドラを選択し、 削除 をクリックします。

React Native 実行 / デバッグ構成

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

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

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

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

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

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

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

    npm install --global ios-sim

アプリケーションの実行

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

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

React Native パッケージャーが実行されています

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

WebStorm を利用すると、ネイティブ React Native バンドラーを使うアプリケーションと Expo を使うアプリケーションをデバッグできます。

React Native アプリケーションのデバッグ時、WebStorm は React Native が利用する Chrome ランタイムに依存します。 DevTools も WebStorm と一緒に使用できます。 デバッグセッションを開始すると、WebStorm が新しい Chrome インスタンスを起動し、それに接続します。 新しい Chrome ウィンドウを表示したくない場合は、 Chrome Headless モードを使用してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Configuring Headless Chrome
2026 年 6 月 8 日
PrismaSvelte