React Native
React Native を使用すると、JavaScript および React を使用して、iOS および Android 用のネイティブモバイルアプリケーションを開発できます。これは Facebook によって作成され、Instagram、Airbnb などの有名なアプリで使用され、現在は JetBrains 独自の YouTrack mobile(英語) アプリケーションで使用されています。React Native オフィシャル Web サイト(英語)の詳細を参照してください。
PyCharm は、React Native アプリケーションの作成、編集、リント、実行、デバッグ、保守を支援します。PyCharm は、React および Flow シンボルに対してコード補完も提供します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
新しい React Native アプリケーションの作成
メインメニューからをクリックします。または、ウェルカム画面の左側のペインでをクリックします。
新規プロジェクトダイアログが開きます。
左側のペインで、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パッケージが保存されているフォルダーを選択します。
作成をクリックすると、PyCharm は必要なすべての設定ファイルを含む React Native -specific プロジェクトを生成し、依存関係をダウンロードして、デフォルト設定でタイプ React Native の実行 / デバッグ構成を作成します。
既存の React Native アプリケーションから開始する
既存の React Native アプリケーションの開発を継続するには、PyCharm で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面の左側のペインでオープンをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面の左側のペインでクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
または、エディターの package.json のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。
React Native の使用を開始するには、他のツール（iOS シミュレーターなど）をインストールします。これらのツールのリストは、オペレーティングシステムと、アプリケーションのターゲットとなるモバイルプラットフォームによって異なります。詳細なインストール手順については、React Native Getting Started ガイド(英語)を参照してください。
プロジェクトのセキュリティ
PyCharm の外部で作成され、そこにインポートされたプロジェクトを開くと、PyCharm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PyCharm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PyCharm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PyCharm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PyCharm 機能が使用可能になることを意味します。
開かない : この場合、PyCharm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
コーディング支援
PyCharm は、React API にコード補完を提供し、JavaScript コードに JSX(英語) を提供します。コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどに対して機能します。詳細については、React: コードの補完を参照してください。
React Native アプリケーションの実行とデバッグ
物理デバイス上またはシミュレータ上でアプリケーションを実行およびデバッグできます。アプリケーションを起動する前に、シミュレータがすでに実行されていることを確認するか、物理デバイスを使用している場合は、すでにコンピューターに接続されていることを確認してください。
PyCharm は、React Native アプリケーションの実行とデバッグを非常に柔軟にします。例: 初めてアプリケーションを起動する場合は、実行セッションまたはデバッグセッションの一部として、React Native バンドラの実行、アプリケーションのビルド、シミュレータ上でのオープンを選択できます。すでに実行中の場合はバンドルを起動しないでも、以前の実行以降にネイティブコードに変更を加えていない場合はアプリケーションのビルドを拒否することもできます。
React Native 実行 / デバッグ構成を作成する
ツールバーの実行 / デバッグ構成ウィジェットから実行構成の編集を選択し、新規構成の追加ボタン (
) をクリックして、リストから React Native を選択して構成設定を開きます。
PyCharm でアプリケーションをビルドして起動するかどうかを選択します。
最初にアプリケーションを起動している場合、または前回の実行後にネイティブコードを更新した場合は、ビルドと起動チェックボックスを選択します。
前回のビルド以降、アプリケーションのネイティブコードに変更を加えていない場合は、このチェックボックスをオフにします。
デバッグを開始すると、PyCharm は、React Native オフィシャル Web サイト(英語)に従って、リモートデバッグが有効になっているシミュレーターでアプリケーションを開くのを待機します。
ビルドと起動チェックボックスを選択した場合は、ターゲットプラットフォーム、Android または iOS を選択します。
選択に応じて、PyCharm は
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"を使用してシミュレーターの型を指定します。使用するブラウザーを指定します。
React Native アプリケーションのデバッグでは、PyCharm は React Native 自体が使用する Chrome ランタイムに依存します。DevTools(英語) を PyCharm と一緒に使用することもできます。デバッグセッションを開始すると、PyCharm は新しい Chrome インスタンスを起動してそれにアタッチします。
Bundler ホストフィールドで、React Native バンドルが実行されるホストを指定します。デフォルト値は localhost です。
Bundler ポートフィールドで、React Native バンドルが実行されるポートを指定します。デフォルトでは 8081 が選択されています。React Native オフィシャル Web サイト(英語)の詳細を参照してください。
使用する Node.js ランタイムを指定します。
プロジェクトエイリアスを選択した場合、PyCharm は JavaScript ランタイムページのノードランタイムフィールドにあるプロジェクトのデフォルトインタープリターを自動的に使用します。ほとんどの場合、PyCharm はプロジェクトのデフォルトランタイムを検出し、そのフィールドに自動的に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。react-native-cli へのパスとアプリケーションの作業ディレクトリ(英語)を指定します。必要に応じて、
react-native run-androidまたはreact-native run-iosの環境変数を入力します。デフォルトでは、実行 / デバッグ構成を呼び出すと、PyCharm が自動的に React Native バンドラを起動します。コマンドラインから PyCharm の外部からバンドラを起動した場合は、停止して再起動せずに再利用することができます。起動前領域でバンドラを選択し、
をクリックします。
すべての実行 / デバッグ構成に共通の設定の詳細については、「実行 / デバッグ構成」を参照してください。
デバイスまたはシミュレーターを準備する
Android デバイスを使用している場合、アプリケーションで作業を開始するたびにデバイスを準備する必要があります。
iOS シミュレーターは 1 回だけインストールする必要があります。その後、PyCharm が react-native run-ios で自動的に起動します。
Android デバイスを準備するには、Android 仮想デバイス(英語)を起動するか、USB 経由でデバッグを有効にして、USB 経由で物理 Android デバイスに接続します。
React Native オフィシャル Web サイト(英語)の詳細を参照してください。
iOS シミュレーターを準備するには、埋め込まれたターミナル（Alt+F12）を開き、次のように入力します。
<nmp_path>\npm install --global ios-sim
アプリケーションの実行
ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成された React Native 構成を選択し、その横にある 
をクリックします。PyCharm は実行ツールウィンドウを開き、最初に新しい React Native タブで React Native バンドラーを起動します。
その後、選択したターゲットプラットフォームに応じて、react-native run-ios または react-native run-android コマンドが実行されます。ビルドが成功すると、シミュレーターはアプリケーションを表示します。
関連ページ：
プラグインのインストール
プラグインは PyCharm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケット...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：PyCharm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の場...
npm、pnpm、Yarn
PyCharm は、npm、pnpm、Yarn、Yarn 2、Yarn 3、Bun と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。PyCharm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。PyCharm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその...
プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、PyCharm では、プロジェクトのソースがわからない場合にプロジェクトを開く方法を決定できます。PyCharm は、オープニングプロセス中に実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く：プロジェクトを開くと、PyCharm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示さ...
React のサポート
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。PyCharm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブで...
JavaScript ランタイム
推奨ランタイム：このエリアでは、使用するランタイムを選択します。利用可能なランタイムのセットは、インストールされているプラグインによって異なります。パッケージマネージャー：このフィールドでは、現在のプロジェクトのパッケージマネージャー (npm、Yarn、pnpm、bun) を選択します。PyCharm は、これらのマネージャーへの現在のシステムパスに、、エイリアスを使用します。カスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選択...