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 シンボルに対してコード補完も提供します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
JavaScript デバッガー プラグインを 設定 | プラグイン ページの Marketplace タブでインストールして有効化し、 JetBrains Marketplace からプラグインをインストールする の説明に従ってください。 プラグインは、Ultimate サブスクリプションを利用している IntelliJ IDEA でのみ使用できます。
新しい React Native アプリケーションの作成
IntelliJ IDEA で React Native アプリケーションを作成する推奨方法は、専用のプロジェクトジェネレーター（たとえば React Native CLI(英語) ）を使用することです。
メインメニューから を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。
新規プロジェクト ダイアログで、左側のペインで React を選択します。
ウィザードの右側で、プロジェクト名と作成先のフォルダーを指定します。
プロジェクトタイプ 領域で、 React Native を選択します。
ノードランタイム フィールドで、使用する Node.js ランタイムを指定します。 リストから構成済みのランタイムを選択するか、 追加 を選択して新しいランタイムを構成します。
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パッケージが保存されているフォルダーを選択します。作成 をクリックすると、IntelliJ IDEA が必要なすべての構成ファイルを含む React Native 固有のプロジェクトを生成し、依存関係をダウンロードし、デフォルト設定の React Native タイプの実行構成を作成します。。
React Native の使用を開始するには、他のツール（iOS シミュレーターなど）をインストールします。 これらのツールのリストは、オペレーティングシステムと、アプリケーションのターゲットとなるモバイルプラットフォームによって異なります。 詳細なインストール手順については、 React Native Getting Started ガイド(英語)を参照してください。
Expo を使用する React Native アプリケーションを作成する
IntelliJ IDEA では、 Expo フレームワーク を使用してフルスタックの React Native アプリケーションを開発することもできます。
コマンドライン シェルまたは埋め込み ターミナル （Alt+F12 ）を開きます。
アプリケーションを作成したい親フォルダーに移動してください。 それを行うには、次を入力します：
cd <parent_folder>アプリケーションの生成を開始するには、次を入力します：
npx create-expo-app@latest <application name>ウィザードの質問に答えます。 例えば、
create-expo -appパッケージのインストールを提案された場合は承諾するか、使用する Expo SDK のバージョン を選択します。
既存の React Native アプリケーションから開始する
既存の React Native アプリケーションの開発を継続するには、IntelliJ IDEA で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面で 開くまたはインポート をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面で リポジトリのクローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行 または 実行 'yarn install' をクリックします。
npm(英語)、 Yarn 1(英語) 、または Yarn 2(英語) を使用できます。詳細については、 npm および Yarn を参照してください。
または、エディターの package.json のコンテキストメニューや プロジェクト ツールウィンドウ (Alt+1) から 'npm install' の実行 または 実行 'yarn install' を選択します。
プロジェクトから android フォルダーと iOS フォルダーを除外する
プロジェクト ツールウィンドウ（Alt+1 ）で、 android または iOS フォルダーを選択します。
選択のコンテキストメニューから ディレクトリをマーク を選択し、次に Excluded を選択します。
React Native の使用を開始するには、他のツール（iOS シミュレーターなど）をインストールします。 これらのツールのリストは、オペレーティングシステムと、アプリケーションのターゲットとなるモバイルプラットフォームによって異なります。 詳細なインストール手順については、 React Native Getting Started ガイド(英語)を参照してください。
プロジェクトのセキュリティ
IntelliJ IDEA の外部で作成され、そこにインポートされたプロジェクトを開くと、IntelliJ IDEA は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー: この場合、IntelliJ IDEA はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを閲覧することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行することはできません。
IntelliJ IDEA はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼: この場合、IntelliJ IDEA はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての IntelliJ IDEA 機能が使用可能になることを意味します。
開かない: この場合、IntelliJ IDEA はプロジェクトを開きません。
プロジェクトのセキュリティ の詳細を参照してください。
コーディング支援
IntelliJ IDEA は、React API にコード補完を提供し、JavaScript コードに JSX(英語) を提供します。 コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、 React イベント(英語) 、コンポーネントプロパティなどに対して機能します。 詳細については、 React: コードの補完を参照してください。
React Native StyleSheet プロパティのコード補完も利用できます。
プロジェクトで Flow を使用している場合、IntelliJ IDEA はエディターでこの型チェッカーからのエラーをハイライトできます。 詳細については、 IntelliJ IDEA での Flow の構成および WebStorm で Flow を使用する(英語)を参照してください。
React Native アプリケーションの実行
アプリケーションは物理デバイスやシミュレータ上で実行できます。 アプリケーションを起動する前に、シミュレータがすでに実行されていることを確認するか、物理デバイスを使用している場合は、すでにコンピューターに接続されていることを確認してください。
IntelliJ IDEA では React Native アプリケーションの実行が柔軟に行えます。 例として、初めてアプリケーションを起動する場合、React Native バンドラの実行、アプリケーションのビルド、シミュレータ上でのオープンを実行セッションの一部として選択できます。 すでに実行中の場合はバンドルを起動しないでも、以前の実行以降にネイティブコードに変更を加えていない場合はアプリケーションのビルドを拒否することもできます。
React Native 実行構成の作成
ツールバーの 実行 / デバッグ構成 ウィジェットから 実行構成の編集 を選択し、 新規構成の追加 ボタン (
) をクリックして、リストから React Native を選択して 構成設定を開きます。
IntelliJ IDEA でアプリケーションをビルドして起動するかどうかを選択します。
最初にアプリケーションを起動している場合、または前回の実行後にネイティブコードを更新した場合は、 ビルドと起動 チェックボックスを選択します。
最後のビルド以降にアプリケーションのネイティブコードを変更していない場合は、このチェックボックスをクリアしてください。
ビルドと起動 チェックボックスを選択した場合は、ターゲットプラットフォーム、Android または iOS を選択します。
選択に応じて、IntelliJ IDEA は
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"。使用するブラウザーを指定します。
Bundler ホスト フィールドに、React Native バンドラが実行されるホストを指定します。デフォルト値は localhost です。
Bundler ポート フィールドで、React Native バンドルが実行されるポートを指定します。デフォルトでは
8081が選択されています。詳しくは React Native の公式サイト を参照してください。使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページの ノードランタイム フィールドからプロジェクトの既定のインタープリターを自動で使用します。 ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のランタイムを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。react-native-cli へのパスとアプリケーションの 作業ディレクトリ(英語)を指定します。 必要に応じて、
react-native run-androidまたはreact-native run-iosの環境変数を入力します。デフォルトでは、実行構成を呼び出すと IntelliJ IDEA が自動的に React Native バンドラを起動します。
コマンドラインから IntelliJ IDEA の外部からバンドラを起動した場合は、停止して再起動せずに再利用することができます。 その場合は、 起動前 エリアでバンドラを選択し、
をクリックしてください。
すべての実行構成に共通する設定の詳細については、 実行 / デバッグ構成 を参照してください。
デバイスまたはシミュレーターを準備する
Android デバイスを使用している場合、アプリケーションで作業を開始するたびにデバイスを準備する必要があります。
iOS シミュレーターは 1 回だけインストールする必要があります。その後、IntelliJ IDEA が react-native run-ios で自動的に起動します。
Android デバイスを準備するには、 Android 仮想デバイスを起動するか、USB で物理 Android デバイスを接続してください。
React Native オフィシャル Web サイトの詳細を参照してください。
iOS シミュレーターを準備するには、コマンドラインシェルまたは埋め込まれた ターミナル （Alt+F12 ）を開き、次のように入力してください：
npm install --global ios-sim
アプリケーションの実行
ツールバーの 実行 / デバッグ構成 ウィジェットリストから、新しく作成した React Native 構成を選択し、その横にある 
をクリックします。 IntelliJ IDEA は 実行 ツールウィンドウを開き、最初に新しい React Native タブで React Native バンドラーを起動します。
その後、選択したターゲットプラットフォームに応じて、 react-native run-ios または react-native run-android コマンドが実行されます。 ビルドが成功すると、シミュレーターはアプリケーションを表示します。
