Next.js
PhpStorm は、Next.js(英語) React フレームワークと統合されています。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Next.js のサポートに必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
新しい Next.js アプリケーションを作成する
新しい Next.js アプリケーションの構築を開始するための推奨される方法は、PhpStorm が npx(英語) を使用してダウンロードして実行する create-next-app パッケージです。その結果、開発環境は Next.js を使用するように事前構成されています。
もちろん、自分で create-next-app をダウンロードすることも、空の PhpStorm プロジェクトを作成して Next.js をインストールすることもできます。
create-next-app で Next.js アプリケーションを生成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Next.js を選択します。
右側のペインで:
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。
create-next-app リストから、npx create-next-app を選択します。
または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12 で
npm install --save-dev next react react-domを実行して、create-next-appパッケージを自分でインストールします。アプリケーションを作成するときに、create-next-appパッケージが保存されているフォルダーを選択します。オプション:
JavaScript の代わりに TypeScript を使用するには、TypeScript テンプレートの使用チェックボックスを選択します。PhpStorm は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、PhpStorm は、必要なすべての構成ファイルを含む Next.js -specific プロジェクトを生成し、必要な依存関係をダウンロードします。PhpStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
空の PhpStorm プロジェクトに Next.js をインストールする
この場合、ビルドパイプラインを自分で構成する必要があります。Next.js 公式サイト(英語)からプロジェクトに Next.js を追加する方法については、こちらを参照してください。
空の PhpStorm プロジェクトを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、PHP 空プロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに Next.js をインストールする
Next.js を使用する空のプロジェクトを開きます。
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --save-dev next react react-dom
既存の Next.js アプリケーションから開始する
既存の Next.js アプリケーションの開発を続けるには、それを PhpStorm で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
または、エディターの package.json のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない : この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
Next.js アプリケーションの実行とデバッグ
React アプリケーションを実行するおよび React アプリケーションをデバッグするを参照してください。
関連ページ：
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：PhpStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
npm、pnpm、Yarn
PhpStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。PhpStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。PhpStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...
プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、PhpStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。PhpStorm は、実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く：プロジェクトを開くと、PhpStorm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、...
React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。PhpStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブ...
React Native
React Native を使用すると、JavaScript および React を使用して、iOS および Android 用のネイティブモバイルアプリケーションを開発できます。これは Facebook によって作成され、Instagram、Airbnb などの有名なアプリで使用され、現在は JetBrains 独自の YouTrack mobile アプリケーションで使用されています。React Native オフィシャル Web サイトの詳細を参照してください。PhpStorm は、React...