概要
Angular CLIを使って雛形プロジェクトを作成し、ローカルサーバーで起動確認する流れを整理する。
雛形プロジェクトには、Angularアプリに必要な設定ファイル、ソースフォルダ、ビルド設定があらかじめ用意される。最初に生成物の意味を押さえておくと、後続のフォルダ構成やコンポーネントの理解につながる。
ここでは、プロジェクト作成、ルーティングとスタイル形式の選択、ローカルサーバー起動までを確認する。
この記事の構成
- 対象環境と利用上の注意
本文記載時の環境と現在そのまま利用できない箇所を確認。 - 作業時の注意点
設定変更やコマンド実行前に確認しておきたい注意点を整理。 - 雛形プロジェクトの作成
雛形プロジェクトの作成の手順と確認ポイントを整理。 - ローカルサーバーの実行確認
ローカルサーバーの実行について、確認する項目と結果の見方を整理。
対象環境と利用上の注意
- 本文記載時の環境
Angular CLI 13.2.0、Node.js 16.13.1、npm 8.3.2、TypeScript 4.5.5、Windows x64で、NgModuleベースのプロジェクトを生成したときの画面と出力。 - 確認時期
2026年8月。Angular公式資料を照合して記載内容を見直した。
掲載したコマンドと画面は現行環境で再実行していない。 - 現在そのまま利用できない箇所
現在のng newはstandalone APIを標準とし、SSR/SSG、zoneless、テストランナーなどの選択肢や生成ファイル名も旧画面と異なる。
以下は旧NgModule構成を読むための記録として扱い、新規作成時は実際に表示される質問と公式ドキュメントを確認する。
作業時の注意点
- プロジェクト名
後で参照しやすい名前にしておく。説明ではtemplate-pjを使う。 - ルーティング
画面遷移を扱う場合は追加しておくと後続の開発が楽になる。 - ローカルサーバー
起動中のターミナルを閉じると確認用サーバーも停止。
雛形プロジェクトの作成
以下、雛形プロジェクトの作成手順を確認する。
-
プロジェクトフォルダの作成
コマンドプロンプトから下記フォルダ作成コマンド（mkdir）を実行し、ユーザーフォルダ直下にプロジェクトフォルダangular-pjを作成。
※ プロジェクトフォルダの作成場所とフォルダ名は任意だが、解説的な利便性上、上記のパス/プロジェクトフォルダ名とする。
> mkdir %UserProfile%\angular-pj
-
雛形プロジェクトの作成
下記手順で雛形プロジェクトの作成を行う。-
フォルダ移動
コマンドプロンプトから下記カレントのディレクトリ移動コマンド（cd）を実行し、プロジェクトフォルダangular-pjに移動。> cd %UserProfile%\angular-pj
-
雛形プロジェクト作成
コマンドプロンプトから下記プロジェクト作成コマンド（ng new）を実行し、雛形プロジェクトを作成。
※ プロジェクト名は任意だが、解説的な利便性上、template-pjとする。> ng new template-pj
-
ルーティング機能の追加確認
Angularのルーティング機能を追加するか（Would you like to add Angular routing?）入力待ち状態となる。
ルーティング機能とは、リクエストURLと以降で説明するコンポーネントの紐付けを行う仕組みのことで開発効率的にメリットが多いため、追加（y）を入力。
-
スタイルシート形式の確認
スタイルシート形式を選択する（Which stylesheet format would you like to use?）入力待ち状態となる。
選択は任意であり、この例ではSCSSを選択。
※ 下記、各スタイルシート形式の概要。-
CSS
Webページのスタイルを指定するための、ブラウザが直接認識できる言語。
以降のSCSS、Sass、Lessは、全てコンパイルによってCSS化されブラウザが認識。 -
SCSS
CSSを拡張したもので記法は、SCSS記法（CSSに似た記法）で記述。 -
Sass
CSSを拡張したもので記法は、SASS記法（Rubyに似た記法）で記述。 -
Less
CSSを拡張したもので、動的なスタイルシートを定義できる。
-
-
インストール確認
パッケージが正常にインストールされました。（packages installed successfully.）が表示されれば正常終了。
※ Gitを使わないことを意図している場合は、エラーを放置せずng new template-pj --skip-gitのように明示する。Gitを使う場合は、先にGitをインストールしてユーザー情報を設定する。
-
以上で、雛形プロジェクトの作成が完了。
ローカルサーバーの実行確認
以下、ローカルサーバーの実行確認手順を確認する。
-
雛形プロジェクトを開く
Visual Studio Codeを起動し、[作業の開始]タブ内にある[フォルダーを開く]をクリックし、上記で作成した雛形プロジェクトのtemplate-pjを開く。
-
ターミナルを開く
メニューの[ターミナル]をクリック後、[新しいターミナル]を選択。
-
ローカルサーバーを起動。
ターミナルから下記サーバー起動コマンド（ng serve）を実行。
※--openは、ローカルサーバーを起動後、ブラウザでアプリを開くオプション。ng serve --open
-
ローカルサーバーの起動確認
ターミナルにビルドエラーがなく、表示されたローカルURLをブラウザで開いて初期画面が表示されれば、開発サーバーを起動できている。Compiled successfully.などの文言や初期画面はAngular CLIの版によって異なる。
-
ローカルサーバーの停止方法
停止方法は、基本ターミナルでCtrl + Cを押下して停止。
（ターミナル（Powershell）で実行中のローカルサーバー起動コマンドを中断すれば停止するため、ターミナルやVisual Studio Code自体を閉じても停止。）
※ ターミナルでCtrl + C押下後、ローカルサーバー起動コマンドを中断し、入力待ち状態となる。
まとめ
- ng newでAngularの雛形プロジェクトを作成できる。
- ルーティングやスタイル形式はプロジェクト作成時に選択。
- ng serve --openでローカルサーバーを起動し、初期画面を確認。