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

空のプロジェクト

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

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

4. オプション:

   • 追加パラメーターフィールドに、Angular CLI に渡す追加の新しいオプション(英語)を指定します。このフィールドではコード補完を使用できます。オプションの名前を入力し始めるか、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 になります。

Dart

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

Express

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

右側のペインで:

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

2. Node インタープリターについては、ローカル 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 インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

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

4. テンプレートリストから react を選択します。

5. オプション:

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

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

Vite

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

Vue.js

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

右側のペインで:

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

2. Node インタープリターフィールドに、使用する 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 の説明に従います。