Angular + Node.js + Visual Studio Code 開発環境構築手順

今回構築した環境の各バージョン

Angular： 18.2.3
Node.js： 22.8.0
Visual Studio Code： 1.92.2

　

開発ツール インストール

Visual Studio Code

https://code.visualstudio.com/download から Visual Studio Codeをダウンロードしインストール。
※Angular開発のコードエディタは Visual Studio Code 一択。

　

Node.js

https://nodejs.org/en/about/previous-releases から v22.8.0（2024年9月時点の最新安定版）のインストーラーをダウンロード。

ダウンロードしたインストーラー（node-v22.8.0-x64.msi）を実行。
※古いNode.jsがインストール済みでもアンインストールせずに上書きインストール可能。

「Next」をクリック。

「accept」を選択し「Next」をクリック。

「Next」をクリック。

「Next」をクリック。

「Next」をクリック。

「Install」をクリック。

「Finish」クリック。

インストール済み Node.js のバージョンを確認。

　

Angular CLI

最新の Angular CLI をインストール。

インストール済みの Angular CLI のバージョンを確認。

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

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

　

Angularプロジェクト

Angularプロジェクト作成

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

上下キーを押してスタイルシートを選択。今回はSCSSを選択。
※SCSSの修正は、VS Codeでデバッグ実行中でも反映される。

「Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?」は SSR が選択されるよう「y」を入力。

インストール完了。

　

作成したAngularプロジェクトを Visual Studio Code で開く

「フォルダーを開く…」を選択。

「フォルダーの選択」をクリック。

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

　

パッケージインストール

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

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

Visual Studio Code のターミナルで下記コマンドを実行し、package.json に書かれているパッケージを全て Angular プロジェクトにインストールする。ターミナルは「ctrl + @」キーで開ける。

　

Angularプロジェクト実行

Visual Studio Code で「F5」キーを押下すると「npm run start」がデバッグ実行され、Angularプロジェクトの Webページが表示される。
ソースコードは GitHub で公開しています。

　

Visual Studio Code でよく使うショートカット

• F5
  以前は npm run start した後、更に「F5」キーを押すことで Angularのソースコードをデバッグ実行していましたが、最新では「F5」キーのみでデバッグ実行できる。
  デバッグ実行では、Visual Studio Code上で AngularのTypeScriptコードにブレークポイントを貼って止めたり、ステップ実行したり、実行中に変数の値を確認したりできる。
  デバッグ実行中は下記キーを実行できる。
  「F10」でステップオーバー。
  「F11」でステップイン。
  「shift + F11」キーでステップアウト。
  「ctrl + shift + F5」デバッグ実行を再起動。
  「shift + F5」デバッグ実行を停止。
• ctrl + B
  サイドバーを開く/閉じる。
• ctrl + p
  ワークスペース内ファイル検索。
• ctrl + shift + F
  ワークスペース内文字列検索。
• ctrl + @
  コマンド操作ターミナルを開く/閉じる。
• ctrl + c 
  ターミナルで実行中のコマンドを停止。
• ctrl + /
  選択行を纏めてコメントアウト。
• Alt + Z
  現在開いているファイルの右端折り返しを切り替える。
• Alt + \
  現在開いているテキストエディタの画面を分割して表示。
• shift + alt + F12
  参照箇所を全てリストアップ。
• ctrl + shift + p
  ワークスペース内単語検索。
• F12
  定義へ移動。
• shift + alt + F12
  参照箇所をリストアップ。
• Shift+Alt+H
  メソッドの呼び出し階層を表示。
• cls
  ターミナルに表示されている履歴をクリア。
  ターミナルに「cls」を入力し Enterキーを押す。