フレームワークテンプレートからプロジェクトを生成

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 Project ダイアログが開きます。

2. 左側のペインで、 AngularJS を選択します。

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

4. 作成 をクリックすると、PyCharm は AngularJS seed project に基づいて必要なすべての設定ファイルを含む AngularJS 固有のプロジェクト構造を生成します。

5. AngularJS コードと、開発とテストをサポートするツールを含む AngularJS の依存関係をダウンロードする: 埋め込まれた ターミナル （Alt+F12 ）で、次のように入力します。

   npm install

   readme.md ファイルの 依存関係のインストールセクションで依存関係のインストールに関する詳細を学びましょう。

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 Project ダイアログが開きます。

2. 左側ペインで、使用するテンプレートとアプリケーションに実装する機能に応じて、使用するテンプレートを選択します。

   • HTML5 ボイラープレート: HTML5 ボイラープレート(英語)テンプレートを使用するには、このオプションを選択してください。 これはあなたのニーズに合わせて簡単に調整できる最初のプロジェクトテンプレートです。

   • Bootstrap: 豊富な HTML、CSS、JavaScript をサポートする精巧なモジュールツールキットである Bootstrap(英語) テンプレートを使用するには、このオプションを選択します。

3. 右側ペインのコントロールのセットは、選択したテンプレートによって異なります。

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

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

Node.js アプリケーションを生成するには

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 Project ダイアログが開きます。

2. 左側のペインで、 Express を選択します。

3. 右側のペインで、次を指定します。

   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(英語).

4. 準備ができたら 作成 をクリックします。

   PyCharm は Express プロジェクトジェネレーター ツールを起動して、必要なデータをすべてダウンロードし、プロジェクト構造を設定し、選択内容に応じて現在のウィンドウまたは新しいウィンドウでプロジェクトを開きます。

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 Project ダイアログが開きます。

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

3. 右側のペインで：

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

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

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

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

   5. オプション:

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

4. 作成 をクリックすると、PyCharm は必要なすべての設定ファイルを含む React 固有のプロジェクトを生成します。

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 Project ダイアログが開きます。

2. 左側のペインで、 Vue.js を選択します。

3. 右側のペインで：

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

   2. ノードランタイム フィールドで使用する 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. プロジェクトテンプレート リストから、使用する Vue.js テンプレート(英語)を選択します。

4. 作成 をクリックすると、PyCharm はプロジェクトに追加できるツール（リンターやテストランナーなど）についていくつか追加の質問を行います。 これらの質問は、選択したテンプレートによって異なります。 その後、PyCharm は必要なすべての設定ファイルを含む Vue.js 固有のプロジェクトを生成します。