WebStorm 2026.2 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 and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。

新しい 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 ガイド(英語)を参照してください。

Expo を使用する React Native アプリケーションを作成する

WebStorm を使えば、 Expo フレームワークを利用してフルスタックの React Native アプリケーションも開発できます。

  1. コマンドラインシェルまたは組み込みの ターミナル （Alt+F12 ）を開きます。

  2. アプリケーションを作成したい親フォルダーに移動します。 それを行うには、次を入力します：

    cd <parent_folder>

  3. アプリケーションの生成を開始するには、次を入力します：

    npx create-expo-app@latest <application name>

  4. ウィザードの質問に答えます。 例えば、 create-expo -app パッケージのインストール提案を承認したり、使用する Expo SDK のバージョン を選択したりできます。

    Expo アプリの作成

既存の 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 実行構成を作成する

React Native 実行構成

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

    Start creating a run/debug configuration

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

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

    • 最終ビルド以降にアプリケーションのネイティブコードを変更していない場合は、このチェックボックスをオフにしてください。

  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. 使用するブラウザーを指定します。

  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 の外部でバンドラーを起動している場合、例えばコマンドラインから、停止や再起動なしで再利用できます。 そのような場合は、 起動前 領域でバンドラを選択し、 削除 をクリックします。

    Before Launch からバンドラを削除

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

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

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

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

  • Android デバイスを準備するには、 Android 仮想デバイスを起動するか、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 パッケージャーが実行されています
2026 年 7 月 14 日
PrismaSvelte