0Pricing
Angular Academy · レッスン

新しいプロジェクトの生成

ng newでアプリを作成し、オプションを確認します。

「新しいプロジェクトの生成」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

Angular CLI

Angular CLIは、Angularアプリの作成、ビルド、配信、テストを行う公式のコマンドラインツールです。コマンドは ng で始まります。

CLIのインストール

npmでグローバルにインストールすると、どこからでもngコマンドを使用できるようになります。

npm install -g @angular/cli

ng newによるプロジェクトの作成

ng new コマンドを使うと、新しいAngularワークスペースとアプリケーションのひな形が作成されます。

ng new my-app

ng newの動作

フォルダーを作成し、依存関係をインストールして、TypeScript、ビルド設定、テストランナー、Standaloneアプリのひな形を準備し、gitリポジトリを初期化します。

対話形式のプロンプト

デフォルトでは、ng newはいくつか質問します。たとえば、Angularのルーティングを追加するか、どのスタイルシート形式(CSS、SCSS、Sass、Less)を使用するかなどです。

ルーティングの追加

ルーティングの質問に回答することも、フラグを渡してあらかじめ決めておくこともできます。

ng new my-app --routing

スタイル形式の選択

styleフラグでスタイルシートの言語を選択します。

ng new my-app --style=scss

インストールまたはGitのスキップ

依存関係のインストールやgitの初期化をスキップするフラグが便利です。CIやスクリプト化した環境で役立ちます。

ng new my-app --skip-install --skip-git

デフォルトではスタンドアロン

最近の CLI バージョンでは、デフォルトでスタンドアロンアプリケーションがスキャフォールディングされます。main.ts では bootstrapApplication を使用し、プロバイダーは app.config.ts に定義されます。

プロジェクトに移動する

作成後、新しいディレクトリに移動して、続けてコマンドを実行します。

cd my-app

ヘルプを表示する

すべてのコマンドで、利用可能なオプションを一覧表示する help フラグを使用できます。

ng new --help

クイックチェック: ng new

プロジェクトを作成します。

振り返り: 新しいプロジェクト

Angular CLI(ng)では、ng new my-app を実行してアプリを作成できます。必要に応じて、ルーティングやスタイルシートの形式も設定できます。依存関係をインストールし、スタンドアロンのスターターアプリをスキャフォールディングします。次は、生成された構造について学びます。

よくある質問

「新しいプロジェクトの生成」レッスンは無料ですか?

はい。「新しいプロジェクトの生成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「新しいプロジェクトの生成」で何を学びますか?

ng newでアプリを作成し、オプションを確認します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「新しいプロジェクトの生成」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか?

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 新しいプロジェクトの生成
  2. プロジェクト構造の解説
  3. ng generateによるコード生成
  4. ビルドとサーブ
← Angular Academyに戻る