WebStorm 2019.3ヘルプ

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

ファイル | 新規プロジェクト

ようこそ画面 | 新規プロジェクトの作成

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。

ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。

プロジェクト・タイプ

説明

空のプロジェクト

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

HTML5 ボイラープレート

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

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

右側のペインで:

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

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

Web スターター・キット

プロジェクトを作成し、その構造を設定し、Web スターター・キット(英語)の要件に従っていくつかのソースを生成するには、このオプションを選択します。

右側のペインで:

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

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

React アプリ

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

右側のペインで:

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

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

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

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

  4. 必要に応じて、スクリプト・バージョンフィールドで、プロジェクト生成中にreact-scripts(英語)の代わりに使用するカスタムパッケージを指定します。これはreact-scriptsから分岐したパッケージの1つ、たとえばreact-awesome-scripts(英語)custom-react-scripts(英語)react-scripts-ts(英語)などです。

Bootstrap

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

右側のペインで:

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

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

Foundation

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

右側のペインで:

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

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

AngularJS

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

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

Angular CLI

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

右側のペインで:

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

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

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

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

React Native

React Native(英語)アプリケーションを開発するためのスタブを取得するには、このオプションを選択してください。

右側のペインで:

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

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

  3. React Nativeリストから、npx --package react-native-cli react-nativeを選択します。

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

Node.js

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

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

Node.js Expressアプリケーション

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

右側のペインで:

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

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

  3. -パッケージマネージャーを使用するには、NPM(英語)、またはYarn(英語)参照NPMとYarnを。

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

Cordovaアプリ

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

右側のペインで:

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

  2. 実行可能ファイル phonegap.cmdcordova.cmd、または ionic.cmdPhoneGap / Cordova / Ionicのインストールを参照)の場所を指定します。

Yeoman

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

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

Meteorアプリ

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

右側のペインで:

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

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

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

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

Vue.js

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

右側のペインで:

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

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

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

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

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

Dart

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

最終更新日: 2020年2月17日

関連ページ:

React

Reactは、カプセル化されたコンポーネントから複雑なインタラクティブユーザインターフェースを構築するためのJavaScriptライブラリです。ライブラリの詳細については、React公式サイトを参照してください。WebStormは、Reactと統合され、lintの設定、編集、実行、デバッグ、およびア...

npmおよびYarn

WebStormはnpmおよびYarnパッケージマネージャーと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、ビルトインターミナルのコマン...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

PhoneGap / Cordova

PhoneGap、Apache Cordova、Ionicは、単一のHTML、CSS、Javascript / Typescriptコードベースでモバイルアプリケーションを開発し、Androidを含むさまざまなモバイルプラットフォームをターゲットとするフレームワークです。始める前に:PhonGap