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

空のプロジェクト

内容のないプロジェクトフォルダーだけを取得するには、このオプションを選択します。 ロケーション フィールドにプロジェクトフォルダーへのパスを指定し、 作成 をクリックします。

Angular CLI

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

右側のペインで：

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

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

3. Angular CLI リストから npx --package @angular/cli ng を選択してください。

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

4. オプション:

   • 追加パラメーター フィールドに、Angular CLI に渡す追加の ng new オプション を指定します。 このフィールドではコード補完を使用できます。オプションの名前の入力を開始するか、 Ctrl+Space を押すと、WebStorm に使用可能なオプションとその説明が表示されます。

   • Angular バージョン 16(英語) 以降を使用している場合は、 スタンドアロンのコンポーネントを使用した新規プロジェクトの作成 チェックボックスを選択することもできます。 詳細については、 Angular オフィシャル Web サイト(英語)を参照してください。

Bootstrap

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

右側のペインで：

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

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

Cordova

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

右側のペインで：

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

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

Express

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

右側のペインで：

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

2. Node.js ランタイムについては、 ローカル Node.js ランタイムの構成を参照してください。

3. 使用するパッケージマネージャー - npm または Yarn 。詳細は npm、pnpm、Yarn を参照してください。

4. express -generator(英語)。

   ジェネレーターをダウンロードして実行する npx(英語) の使用をお勧めします。 そのためには、 express -generator リストから npx --package express-generator express を選択してください。

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

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

   • Dust(英語)

   • 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(英語) フレームワークに基づいていくつかのソースを生成するには、このオプションを選択します。 Meteor から詳細を参照してください。

右側のペインで：

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

2. Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。

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

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

Next.js

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

右側のペインで、プロジェクト名と作成先のフォルダー、使用する Node.js ランタイム、使用する create-next-app パッケージ（リストから npx create-next-app を選択することをお勧めします）を指定します。 詳しくは Next.js を参照してください。

Node.js

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

右側のペインで、プロジェクトフォルダーと使用する Node.js ランタイムを指定します。 詳細は、 ローカル Node.js ランタイムの構成 を参照してください。

React

左側のペインで、 Vite を選択します。

右側のペインで：

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

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

3. Vite リストから npx create-vite を選択してください。

4. テンプレート リストから react を選択してください。

5. オプション:

   JSX の代わりに TSX を使用するには、 TypeScript プロジェクトの作成 チェックボックスを選択します。 WebStorm は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。

React Native

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

右側のペインで：

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 パッケージが保存されているフォルダーを選択します。

Vite

Vite(英語) モジュールバンドラーを使用するようにスキャフォールディングされたプロジェクトを作成するには、このオプションを選択します。 Vite の詳細をご覧ください。

Vue.js

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

右側のペインで：

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

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

3. Vue CLI リストから、 npx create-vue (推奨) または npx --package @vue/cli vue を選択します。

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

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

Yeoman

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

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