Angular + Node.js + Visual Studio Code 開発手順

開発ツールインストール
Angularプロジェクト作成
Visual Studio Code でプログラミング
プログラミング

開発ツールインストール

Visual Studio Code

Angular + Node.js 開発のコードエディタは、Visual Studio Code 一択です。
最新の Visual Studio Codeを事前にインストールしておきます。
Visual Studio Codeダウンロード

Node.js

Node.js バージョンは、開発対象のバージョンと一致するものをインストールする。
今回は、Node.js 14.6 をインストールしています。
※既にサービスインしていて、本番環境がDockerなら、使用している Node.js のバージョンは、Dockerfileで確認できます。
Node.jsリリース一覧

今回は Windows 10 x64 ターゲットのインストーラをダウンロードしています。
※インストール時のウィザードは、全てデフォルト設定のままで問題無い。
Node.js v14.6.0 ダウンロード

Angular CLI

コマンドプロンプトで、Angular CLI ver.11.0.7 をインストールしています。
※Angularはバージョン指定でインストールする。11系だと 11.0.7が最新バージョン。
※Node.jsとAngularは、マイナーバージョン間でも依存関係があり、Node.js 14.x 系の最新版をインストールしていた場合、Angular CLI ver.11.0.7 で npm install コマンドを実行時にエラーが発生し、依存関係があるパッケージのインストールに失敗する。


> npm install -g @angular/cli@11.0.7

> npm install -g @angular/cli@11.0.7

※グローバルにインストールした Angular CLI は、下記コマンドでアンインストールできる。


> npm uninstall -g @angular/cli

> npm uninstall -g @angular/cli

※グローバルにインストールした Angular CLI の実態は下記にフォルダにある。


C:\Users\（ユーザ名）\AppData\Roaming\npm\node_modules\@angular\cli

C:\Users\（ユーザ名）\AppData\Roaming\npm\node_modules\@angular\cli

Angularプロジェクト作成

Angularプロジェクト新規作成

任意のフォルダへ移動し、新しい Angularプロジェクト（ワークスペース）を作成する。
※インストールした AngularとNode.jsのバージョンに互換性が無いと、この処理でエラーが発生する。


> cd （任意のフォルダ）
> ng new pokemon-books

> cd （任意のフォルダ）

> ng new pokemon-books

Materialデザインパッケージをインストール

今回は、Angular標準で無料のMaterialデザインパッケージをインストールする。
※有料のMaterialデザインパッケージだと、Ignite UI for Angularというのもある。


> cd pokemon-books
> ng add @angular/material

> cd pokemon-books

> ng add @angular/material

Selectコントロール（ドロップダウン）

・Angular標準だと Basic mat-select コンポーネント。

・Ignite UI for Angularだと Select コンポーネント。

ソース管理

Angularプロジェクトのソース管理はGitが対象になっていて、Angularプロジェクト新規作成時に、プロジェクトフォルダ内にデフォルトでGit管理用のファイルが配置される。

.gitignoreファイルに列挙されているこれらのフォルダ、ファイルは、標準でGitソース管理対象外になる。
Angularプロジェクトと依存関係のあるパッケージは node_modules フォルダにインストールされますが、node_modules フォルダもソース管理対象になっている。


# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db

# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output

/dist

/tmp

/out-tsc

# Only exists if Bazel was run

/bazel-out

# dependencies

/node_modules

# profiling files

chrome-profiler-events*.json

speed-measure-plugin*.json

# IDEs and editors

/.idea

.project

.classpath

.c9/

*.launch

.settings/

*.sublime-workspace

# IDE - VSCode

.vscode/*

!.vscode/settings.json

!.vscode/tasks.json

!.vscode/launch.json

!.vscode/extensions.json

.history/*

# misc

/.sass-cache

/connect.lock

/coverage

/libpeerconnection.log

npm-debug.log

yarn-error.log

testem.log

/typings

# System Files

.DS_Store

Thumbs.db

Visual Studio Code でプログラミング

作成したAngularプロジェクトのフォルダを、Visual Studio Code で開く

Visual Studio Codeのエクスプローラーに、作成したAngularプロジェクトが展開される。

初回セットアップ

※Angularプロジェクトを新規作成したPCのフォルダ内には、依存関係のあるNode.jsのパッケージがインストール済みですが、Gitからソースコードのみ取得した他のPCには、依存関係のあるNode.jsのパッケージはインストールされていないので、最初にインストールする。

※Angular CLI はグローバルにインストールしたものとは別に、プロジェクト内の依存関係パッケージとしてもインストールされる。

※UIが使用している Node.js のパッケージは、全て package.json に書かれている。

Visual Studio Code のターミナルで下記コマンドを実行し、package.json に書かれているパッケージを全て、Angular プロジェクトにインストールする。
※インストールしたパッケージの有効範囲は、Visual Studio Code で開いているワークスペース（プロジェクト）のみ。


> npm install

> npm install

Angularプロジェクト実行

Visual Studio Code のターミナルで下記コマンドを実行し、Angular+Node.js WEBサイトを起動する。


> npm run start

> npm run start

http://localhost:4200/ をブラウザで開くと、実行中の Angular+Node.js WEBサイトが表示される。

Angularプロジェクト実行停止

Visual Studio Code のターミナルで、ctrl + c を押し、確認メッセージで yを入力する。

よく使うショートカット

Visual Studio Code でコーディングする際によく使う、むしろ知らないとやばいショートカット。

ctrl + B
サイドバーを開く/閉じる。
ctrl + p
ワークスペース内ファイル検索。
ctrl + shift + F
ワークスペース内文字列検索。
ctrl + @
コマンド操作ターミナルを開く/閉じる。
ctrl + c
ターミナルで実行中のコマンドを停止。
ctrl + /
選択行を纏めてコメントアウト。
Alt + Z
現在開いているファイルの右端折り返しを切り替える。
shift + alt + F12
参照箇所を全てリストアップ。
ctrl + shift + p
ワークスペース内単語検索。
F12
定義へ移動。
shift + alt + F12
参照箇所をリストアップ。
Shift+Alt+H
メソッドの呼び出し階層を表示。

プログラミング

環境が整ったら、Angularのライブコーディング動画をいくつか見て、実際にプログラムを書いてみることで、開発できるようになります。

https://youtu.be/F5sSI6P5uJo