sigma-se

概要

Angular CLIを使って雛形プロジェクトを作成し、ローカルサーバーで起動確認する流れを整理する。

雛形プロジェクトには、Angularアプリに必要な設定ファイル、ソースフォルダ、ビルド設定があらかじめ用意される。最初に生成物の意味を押さえておくと、後続のフォルダ構成やコンポーネントの理解につながる。

ここでは、プロジェクト作成、ルーティングとスタイル形式の選択、ローカルサーバー起動までを確認する。

この記事で扱うこと

ng newでAngularプロジェクトを作成する流れ。
ルーティング追加とスタイル形式選択の意味。
ng serveでローカルサーバーを起動する方法。
初期画面が表示されるまでの確認観点。

作業前に確認すること

確認項目	内容
Angular CLI	ngコマンドを実行できる状態にしておく。
作業フォルダ	プロジェクトを作成する親フォルダを決めておく。
選択項目	ルーティングの有無とスタイル形式を選ぶ場面がある。

作業時の注意点

作業時の注意点	確認する観点
プロジェクト名	後で参照しやすい名前にしておく。説明では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 に関するコマンドエラーが表示されるが、git をインストールしてないが故の想定内のエラー。

以上で、雛形プロジェクトの作成が完了。

ローカルサーバーの実行確認

以下、ローカルサーバーの実行確認手順を確認する。

雛形プロジェクトを開く
Visual Studio Codeを起動し、[作業の開始]タブ内にある[フォルダーを開く]をクリックし、上記で作成した雛形プロジェクトの template-pj を開く。
ターミナルを開く
メニューの[ターミナル]をクリック後、[新しいターミナル]を選択する。
ローカルサーバーを起動する。
ターミナルから下記サーバー起動コマンド（ng serve）を実行する。
※ --open は、ローカルサーバーを起動後、ブラウザでアプリを開くオプション。
```
ng serve --open
```
ローカルサーバーの起動確認
ターミナルに Compiled successfully. が表示され、ブラウザでアプリの起動画面（template-pj app is running!.）が表示されれば、正常にローカルサーバーが起動できている。
ローカルサーバーの停止方法
停止方法は、基本ターミナルで Ctrl + C を押下して停止する。
（ターミナル（Powershell）で実行中のローカルサーバー起動コマンドを中断すれば停止するため、ターミナルやVisual Studio Code自体を閉じても停止する。）

※ ターミナルで Ctrl + C 押下後、ローカルサーバー起動コマンドを中断し、入力待ち状態となる。