【Angular】Angular CLIでWebフロントを5分で爆速構築する

概要

Angular CLI を利用して、Angular アプリケーションを簡単に構築する手順の備忘録。
約5分で Web フロントの構築が完了する。

前提

• Angular CLI： v15.0.4
• Angular： v15.0.0

Angular とは

Angular（アンギュラー）とは、Googleによって作られたフロントエンドWebアプリケーションのフレームワーク。
オープンソースのフレームワークやライブラリとして、同様の領域の技術でよく名前があがるのが「Vue」や「React」であり、たびたび比較記事などが出回ったりしている。

大きな特徴としては、Googleが開発した技術で、多くのプロジェクトでも使用されていること、また、「フルスタックフレームワーク」であり、単独でフロントエンド開発に必要な機能が初めから一通り揃っていることである。
登場して間もない頃は、.js ファイルを基本に書く技術だったが、現在では TypeScript（.ts）が基本となっている。

手順

Angular CLI をグローバルインストール

npm install -g @angular/cli

新規プロジェクト作成

# ng new 任意のプロジェクト名
ng new my-angular

対話形式で各種設定について質問されます（下記の回答は一例なので、ご自身の都合に合わせてください）

# 自動補完機能を有効にするか？ 初めて Angular CLI を利用する場合に聞かれる.
? Would you like to enable autocompletion? This will set up your terminal so 
pressing TAB while typing Angular CLI commands will show possible options and 
autocomplete arguments. (Enabling autocompletion will modify configuration files
 in your home directory.) (Y/n)
  # -> Y を入力して Enter キー

# Yes にすると表示される補足情報
Appended `source <(ng completion script)` to `/Users/ユーザ名/.zshrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)

# ルーティング機能を追加するか？
? Would you like to add Angular routing? (y/N) 
  # -> y を入力して Enter キー

# スタイルシート言語に何を使うか？
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org     
  # -> SCSS を選択して Enter キー

# 以下の表示がされれば作成完了
✔ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

動作確認

ローカルサーバ起動

npm run start

Webブラウザで localhost:4200 にアクセスし、以下の様な画面が表示されればOK

サーバは Control ＋ C （Windows なら Ctrl ＋ C ）で停止可能

Angular アプリは以上で初期構築完了！
この後は、画面を追加したりライブラリを追加導入したりして、アプリを拡充していきましょう。

VScode 拡張機能

AngularのプロジェクトをVisual Studio Code（VScode）で編集しようとすると、以下の拡張機能を推奨されることがあります。こちらはお好みで導入してください。