新規プロジェクトの作成ダイアログ

プラグインは PhpStorm にバンドルされており、デフォルトでアクティブになっています。プラグインが無効になっている場合は、プラグインの管理に従って、設定 / 環境設定 | プラグインページでプラグインを有効にします。

Composer テンプレートを使用してプロジェクトスタブを作成するには、このオプションを選択します。

右側のペインで：

1. Composer.phar 領域に、プロジェクト作成で使用する composer.phar コマンド定義ファイルを指定します。

   • 既存の composer.phar を使用する : 以前にダウンロードした composer.phar からのコマンドを使用し、フィールドにその場所を指定するには、このオプションを選択します。

   • getcomposer.org から composer.phar をダウンロードする Composer の新しいインスタンスをダウンロードするには、このオプションを選択します。ダウンロードした composer.phar ファイルはプロジェクトのルートフォルダーに保存されます。

2. パッケージ領域で、プロジェクトの作成時にインストールするパッケージを指定します。

   • 使用可能なパッケージ : このリストからインストールするパッケージを選択します。必要に応じて検索フィールドを使用します。入力したとおりに検索文字列の入力を開始すると、リストが動的に縮小され、入力したパターンに一致するパッケージが表示されます。

   • 説明 : この読み取り専用フィールドは、選択したパッケージの機能を簡単に説明しています。

   • インストールするバージョン : このリストからパッケージのバージョンを選択します。リストの内容は特定のパッケージによって異なります。

3. 設定領域では、プロジェクトスタブを生成してパッケージをインストールするための高度な設定を行います（依存関係）。

   • PHP 実行ファイルへのパス : このフィールドでは、PHP エンジンのインストールフォルダーの場所を指定します。

   • コマンドラインパラメーター : このフィールドに、追加のコマンドラインパラメーターを入力します。

プラグインはデフォルトで有効になっています。プラグインが無効になっている場合は、プラグインを管理する説明に従って、プラグインページでプラグインを有効にします。

Drupal モジュール(英語)を作成してセットアップするには、このオプションを選択します。

右側のペインで：

1. Drupal インストールパスフィールドで、Drupal インストールのルートフォルダーを指定します。パスを手動で入力するか、参照 をクリックして表示されるダイアログで関連するフォルダーを選択します。

プラグインはデフォルトで有効になっています。プラグインが無効になっている場合は、プラグインを管理する説明に従って、プラグインページでプラグインを有効にします。

Joomla!(英語) コンテンツ管理システムを使用してアプリケーションを開発するためのプロジェクトスタブを取得するには、このオプションを選択します。

右側のペインで：

1. Joomla! インストールパスには、Joomla! がインストールされているフォルダーを指定します。

2. プロジェクトタイプリストから、プロジェクトで開発するアプリケーションの Joomla! ユニットタイプを選択します。この選択に従って、PhpStorm はスタブを構成し、必要なソースをダウンロードします。使用可能なオプションは次のとおりです。

   • Joomla! 成分 (英語)

   • Joomla! モジュール (英語)

   • Joomla! プラグイン (英語)

   • 空の Joomla! プロジェクト : Joomla! -specific 構造なしで空のプロジェクトフォルダーを作成するには、このオプションを選択します。

プラグインはデフォルトで有効になっています。プラグインが無効になっている場合は、プラグインを管理する説明に従って、プラグインページでプラグインを有効にします。

WordPress を使用してアプリケーションを開発するためのプロジェクトスタブを取得するには、このオプションを選択します。詳細については、WordPress を参照してください。

右側のウィンドウで、プロジェクトの場所を入力し、WordPress がインストールされているフォルダーを指定します。このフォルダーには、wp-admin および wp-includes のサブディレクトリが含まれている必要があります。

Angular CLI

このオプションを選択して、後で Angular CLI(英語) コマンドラインインターフェースを使用して、クラス、コンポーネント、ルート、パイプ、サービスなどの特定の構造を自動的に生成できるスタブを取得します。

右側のペインで：

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

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

3. Angular CLI リストから、npx --package @angular / cli ng を選択します。

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

AngularJS

プロジェクト構造を設定し、いくつかのソースを AngularJS フレームワーク(英語)テンプレートに基づいて生成するには、このオプションを選択します。

右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。

Bootstrap

プロジェクトを作成し、その構造を設定し、Bootstrap(英語) テンプレートに基づいていくつかのソースを生成するには、このオプションを選択します。

右側のペインで：

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

2. バージョンリストから、使用するテンプレートのバージョンを選択し、作成をクリックします。

Cordova

プロジェクト構造を設定し、PhoneGap(英語) または Apache Cordova(英語) フレームワークに基づいていくつかのソースを生成するには、このオプションを選択します。

右側のペインで：

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

2. 実行可能ファイルの場所を指定します。オペレーティングシステムとターゲットプラットフォームに応じて、これは phonegap , phonegap.cmd , cordova または cordova.cmd になります。

Dart

プロジェクト構造をセットアップし、Dart(英語) アプリケーション用にいくつかのソースを生成するには、このオプションを選択します。

エクスプレス

プロジェクト構造を設定し、いくつかのプロジェクトソースをエクスプレス(英語)フレームワークに基づいて生成するには、このオプションを選択します。

右側のペインで：

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

2. ノードインタープリターは、ローカル Node.js インタープリターの構成を参照してください。

3. パッケージマネージャーを使用する - NPM(英語) や Yarn(英語) を、npm、pnpm、Yarn を参照してください。

4. エクスプレス -generator(英語)。

   ジェネレーターをダウンロードして実行する npx(英語) を使用することをお勧めします。これを行うには、エクスプレス -generator リストから npx --package express-generator エクスプレスを選択します。

   または、埋め込まれたターミナル（ Alt+F12 ）を開いて npm install --g express-generator と入力し、ダウンロードしたジェネレーターを express-generator リストから選択します。

5. 使用する Express テンプレートエンジン(英語)。テンプレートエンジンリストから、以下のいずれかを選択します。

   • ほこり

   • EJS(英語)

   • Handlebars(英語)

   • Hogan.js(英語)

   • Pug(英語) ( Pug(Jade)(英語) )

   • Twig(英語)

   • Vash(英語)

   • 静的な HTML

6. 使用する CSS エンジン CSS エンジンリストから、以下のいずれかを選択します。

   • 平らな CSS(英語)

   • Stylus(英語)

   • Less(英語)

   • Sass(英語).

HTML5 ボイラープレート

プロジェクト構造を設定し、いくつかのソースを HTML5 ボイラープレート(英語)テンプレートに基づいて生成するには、このオプションを選択します。

既存のプロジェクトで HTML5 ボイラープレートの使用を開始するには、HTML5 Boilerplate 公式 Web サイト(英語)から最新の安定版リリースをダウンロードし、プロジェクトで抽出します。または、埋め込みターミナル（ Alt+F12 ）を開き、コマンドプロンプトで npm install html5-boilerplate と入力します。

右側のペインで：

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

2. バージョンリストから、使用するテンプレートのバージョンを選択し、作成をクリックします。

Meteor

プロジェクト構造を設定し、いくつかのソースを Meteor(英語) フレームワークに基づいて生成するには、このオプションを選択します。

右側のペインで：

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

2. Meteor 実行ファイルの場所を指定してください（Meteor のインストール参照）。

3. テンプレートリストから、生成するサンプルを選択します。基本的なプロジェクト構造を生成するには、デフォルトオプションを選択します。

4. ファイル名フィールドに、相互に関連した .js , .html ファイルと生成される .css ファイルの名前を入力します。このフィールドは、テンプレートドロップダウンリストからデフォルトサンプルタイプが選択されている場合にのみ使用可能です。

Node.js

単純な Node.js アプリケーションを起動するには、このオプションを選択します。PhpStorm は npm init コマンドを実行して package.json ファイルを追加し、Node.js コア API に対してコード補完を有効にするだけです。

右側のペインで、プロジェクトフォルダー、Node.js インタープリター、およびパッケージマネージャー（ npm(英語) または Yarn(英語)、詳細については npm、pnpm、Yarn を参照）を指定します。

React

グローバルにインストールされた create-react-app(英語) パッケージを使用してプロジェクトを生成するためにこのオプションを選択してください。詳細については create-react-app を使用した React アプリケーションの生成を参照してください。

右側のペインで：

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

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

3. create-react-app リストから、npx create-react-app を選択します。

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

React Native

React Native(英語) アプリケーションを作成するには、このオプションを選択します。

右側のペインで：

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

2. Node インタープリターフィールドに、使用する 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 パッケージが保存されているフォルダーを選択します。

Vue.js

Vue CLI(英語) を使用して Vue.js(英語) アプリケーションを作成するには、このオプションを選択します。

右側のペインで：

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

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

3. Vue CLI リストから、npx --package @vue / cli vue を選択します。

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

4. babel(英語) と ESLint(英語) を使用してアプリケーションをブートストラップするには、デフォルトのプロジェクトセットアップを使用するチェックボックスを選択します。

Yeoman

Yeoman(英語) ツールを使用してフレームワーク固有のプロジェクトスタブを生成するためのインターフェースを取得するには、このオプションを選択します。

右側のペインには、以前にインストールされた Yeoman ジェネレーター(英語)がすべて表示されます。リストから必要なジェネレーターを選択し、次へをクリックして、Yeoman の説明に従います。