SIGMA-SE Math & Tech Library

SIGMA-SE Math & Tech Library


数学と情報技術をテーマに、書籍や教材だけではつかみにくい考え方を具体例とともに簡潔にわかりやすく伝える解説サイトです。
技術の歴史や背景、関連知識の整理、学習のための覚書や要約記事も掲載しています。

Webシステム開発 - Angular基礎：3/6 開発環境の構築

システム開発 Webシステム開発 Angular Node.js TypeScript Webシステム
作成日： 更新日：

概要

Angular開発に必要なVisual Studio Code、Node.js、Angular CLI、TypeScriptの環境構築手順を整理する。

環境構築では、インストール作業そのものよりも、各ツールが正しく使える状態になっているかを確認することが重要になる。

ここでは、Windows環境を中心に、エディタ、Node.js、Angular CLI、TypeScriptの導入とバージョン確認までを順番に扱う。

この記事の構成

対象環境と利用上の注意

  • 本文記載時の環境
    Angular CLI 13.2.0、Node.js 16.13.1、npm 8.3.2、TypeScript 4.5.5、Visual Studio Code 1.63.2、Windows x64。
    画像はNgModuleベースのプロジェクトを生成していた当時の画面となる。
  • 確認時期
    2026年8月。Angular、Node.js、Visual Studio Codeの公式資料を照合して記載内容を見直した。
    掲載した手順は現行環境で再実行していない。
  • 現在そのまま利用できない箇所
    Node.js 16はサポート終了済みであり、新規環境へ導入しない。
    利用するAngularと互換性のあるサポート中のNode.jsを公式の対応表から選ぶ。
    現在のAngular CLIはstandalone APIを使うプロジェクトを標準で生成するため、後続記事の画面・ファイル構成・質問内容は異なる。

作業時の注意点

  • PATH設定
    インストール後にコマンドが見つからない場合はPATHを確認。
  • npmの-gオプション
    グローバルに使いたいコマンドか、プロジェクト内だけで使いたいパッケージかで使い分ける。
  • バージョン差異
    Angular CLIやNode.jsのバージョン差で表示や警告が変わることがある。

Visual Studio Codeのダウンロード

以下、Visual Studio Codeのダウンロード手順を確認する。

  • 公式サイトにアクセス
    Visual Studio Code公式サイトにアクセスし、[Download for Windows]アコーディオンを展開し、[Other downloads]をクリック。

    ※ [Stable]は安定版、[Insiders]は開発途中版を意味する。
    pid67_1

  • インストーラーのダウンロード
    [System Installer]の[64 bit]をクリックし、任意の場所にダウンロード。

    ※「VSCodeSetup-x64-1.63.2.exe」というファイル名でダウンロードされる。
    ※ 全ユーザーアカウントがVSCodeを利用できるSystem Installer版以外にも、特定のユーザーアカウントのみVSCodeを利用できるUser Installer版と自動アップデートができない落としきりの.zip版がある。
    pid67_2

Visual Studio Codeのインストール

以下、Visual Studio Codeのインストール手順を確認する。 ダウンロードしたインストーラー「VSCodeSetup-x64-1.63.2.exe」を起動し、下記手順でインストールする。

  • 使用許諾契約書の同意
    「同意する(A)」、「次へ(N)」をクリック。 pid67_3

  • インストール先の設定
    標準設定「C:\Program Files\Microsoft VS Code」のまま「次へ(N)」をクリック。

    ※ インストール先は任意。
    pid67_4

  • プログラムグループの指定
    スタートメニューにショートカットを作成。標準設定「Visual Studio Code」のまま「次へ(N)」をクリック。

    ※ ショートカットの作成有無は任意。
    pid67_5

  • 追加タスクの選択
    起動オプションの設定を行う。標準設定では有効化されていない上部3つの追加タスクも利便性上有効にし、「次へ(N)」をクリック。

    ※ 各設定の有効/無効は任意。
    pid67_6

  • インストール準備完了
    設定内容を確認し、間違いなければ「インストール(I)」をクリック。
    pid67_7

  • セットアップウィザードの完了
    標準設定の「Visual Studio Code を実行する」を無効化し、「完了(F)」をクリック。

    ※ 有効/無効は任意。
    pid67_8

以上で、Visual Studio Code のインストールが完了。

Visual Studio Codeの初期設定

以下、Visual Studio Codeの初期設定を確認する。

  • Visual Studio Codeの日本語化設定
    下記手順で日本語化設定を行う。

    • 多言語対応の追加設定画面を表示
      Visual Studio Code を起動し、メニューの[View]から[Command Palette]を選択後（または、[Shift + Ctrl + P]）、[Configure Display Language] → [Install Additional Language]と続けて選択。
      pid67_9

    • 多言語対応の追加設定画面
      pid67_10

    • 日本語化パッケージをインストール
      サイドメニューから[Japanese Language Pack for Visual Studio Code]の[Install]をクリック。 pid67_11

    • Visual Studio Codeの再起動
      インストールが完了すると右下に [Restart Now]が表示される。
      [Restart Now]をクリックし、Visual Studio Codeを再起動。 pid67_12

    • 日本語化されているかの確認
      下記キャプチャーのように日本語化されていれば、正常に日本語化設定ができている。 pid67_13

  • Visual Studio Codeターミナルの実行ポリシー設定
    PowerShellの実行ポリシーによってnpmのスクリプトを実行できないエラーが出た場合だけ、現在の設定と組織の管理方針を確認して対応する。すべてのWindows環境で変更が必要なわけではなく、VSCodeのsettings.jsonへ環境変数を書いて回避しない。

    • 現在の実行ポリシーを確認
      Get-ExecutionPolicy -List
    • 現在のユーザーだけをRemoteSignedへ変更
      内容と影響を理解し、端末や組織の管理方針で許可されている場合に限って実行する。 
      Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Node.jsのダウンロード

以下、Node.jsのダウンロード手順を確認する。

  • Node.jsのダウンロード
    Node.js公式ダウンロードページとAngularのバージョン対応表を確認し、利用するAngularと互換性のあるActive LTSまたはMaintenance LTS版を選ぶ。
    画像のNode.js 16.13.1は旧環境の記録であり、サポート終了済みのため新規環境へ導入しない。

    ※ Node.js公式サイトのダウンロードボタンは、アクセスしたOSに最適なインストーラーが設定されるため、別端末の環境構築する場合に注意。 pid67_16

Node.js のインストール

以下、Node.jsのインストール手順を確認する。

※ 注意：Macの場合は、「Node.js のインストール (Mac)」を参照。
以降の画像はnode-v16.13.1-x64.msiを使った旧画面の記録となる。新規環境では、上記で選んだサポート中のNode.jsのインストーラーを使い、実際の画面と公式手順に従う。

  • Node.jsのインストール

    • セットアップウィザードの開始：「Next」をクリック。
      pid67_17

    • エンドユーザーライセンスの同意：「I accept the terms in the License Agreement」を有効化し、「Next」をクリック。
      pid67_18

    • インストール先の設定：標準設定「C:\Program Files\nodejs\」のまま「Next」をクリック。
      ※ インストール先は任意。
      pid67_19

    • インストール内容の設定：標準構成のまま「Next」をクリック。
      ※「Node.jsの実行環境」、「npmパッケージマネージャ」、「オンライン説明文章へのショートカット」のインストールと「環境変数PATHへの登録」が設定される。
      pid67_20

    • ネイティブモジュールツールのインストール設定：これまでの設定内容に間違いなければ、「Install」をクリック。

      ※ 一部のnpmモジュールは、インストール時にC/C++からコンパイルする必要があるため、対象のモジュールをインストールしたい場合に有効化。 pid67_21

    • インストールの開始：これまでの設定内容に間違いなければ、「Install」をクリック。 pid67_22

    • インストールの完了：「Finish」をクリック。
      pid67_23

  • Node.js のインストール (Mac)
    Macでは、公式インストーラーのほか、パッケージ管理ツールHomebrewからNode.jsを導入できる。以下はHomebrewを使う場合の例となる。

    • HomeBrewのインストール

      $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

      • 上記でインストールで下記の Warning がでる場合
        Next stepsを実施。 

        Warning: /opt/homebrew/bin is not in your PATH.
Instructions on how to configure your shell for Homebrew
can be found in the 'Next steps' section below.

      • Next steps

        $ echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/XXXXX/.zprofile    # XXXXXは、ユーザー名
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/XXXXX/.zprofile   # XXXXXは、ユーザー名

    • Node.jsをインストール
      Angularのバージョン対応表で利用するAngularと互換性を確認してから、サポート中のNode.jsを導入する。次のコマンドはHomebrewの標準nodeパッケージを使う例であり、特定のAngularを利用する場合は対応するNode.jsの版を選ぶ。

      $ brew install node

      ※ Homebrewが表示する追加のPATH設定がある場合は、その環境に表示されたNext stepsへ従う。固定のユーザー名やバージョン付きパスをそのまま転記しない。

Angular CLI / TypeScriptのインストール

Node.jsに付属するパッケージ管理ツールnpmを用いて、Angular CLIをインストールする。Angularプロジェクトで使うTypeScriptは、対応する版がプロジェクトの依存パッケージとして導入されるため、グローバルインストールは必須ではない。

  • Angular CLIのインストール
    新規環境では、互換性のあるNode.jsを導入したうえでAngular CLIをインストールする。

    $ npm install -g @angular/cli

    旧環境を再現する場合は、現行版を無指定で導入せず、Node.js 16.13.1と互換性のあるAngular CLI 13.2.0を明示する。ただし、どちらもサポート終了済みのため学習用の隔離環境に限定する。

    $ npm install -g @angular/cli@13.2.0

    ※ コマンドプロンプトの起動
    Windowsキー + R で「ファイル名を指定して実行」を起動し、コマンド「cmd」を入力し、「OK」をクリック。
    pid67_24

    コマンドがエラーなく終了したことを確認する。脆弱性の件数は依存関係と確認時点で変わるため、\(0\) 件であることをインストール成功の条件にはしない。
    pid67_25

    • バージョン確認 コマンドプロンプトから下記バージョン確認コマンドを実行。

      $ ng version

      下記のようにAngular CLIのバージョン内訳が確認できる。
      pid67_26

  • TypeScriptのインストール
    この段階ではグローバルインストールしない。次の記事でng newを実行すると、Angularが対応するTypeScriptをプロジェクト内へ導入する。プロジェクト作成後は、そのフォルダでnpx tsc -vまたはng versionを実行して実際の版を確認できる。

  • npmコマンドの補足
    上記で実行したコマンドの補足を整理。

    • npm install
      引数なしのnpm installは、カレントディレクトリのpackage.jsonに記載された依存パッケージをまとめてインストールするコマンド。
      ※ グローバルパッケージの格納ディレクトリを確認するコマンド

      $ npm root -g

    • -g オプション
      -gオプションは、パッケージをnpmのグローバル領域へインストールする指定。-gを付けない場合は、通常、カレントディレクトリのプロジェクト依存関係としてnode_modulesへインストールされる。

      なお、実際の開発時は、同一の開発マシン内でバージョン別に動作確認する場合を想定し、あえて-gオプションなしでインストールする場合もある。

    • npm ls
      npm lsは、インストール場所とバージョン確認を表示するコマンド。

      • 例 : 下記、これまでにインストールしたモジュールのインストール場所とバージョン確認のコマンド。

        $ npm ls -g npm
$ npm ls -g @angular/cli

      • npm uninstall npm uninstallは、その名の通り、npm installでインストールしたモジュールをアンインストールするコマンド。

      • 例 : 以下、これまでにインストールしたモジュールのアンインストールコマンド。

        $ npm uninstall -g @angular/cli

まとめ

  • Angular開発ではVSCode、利用するAngularと互換性のあるNode.js、Angular CLIを準備し、TypeScriptはプロジェクトの依存関係として管理する。
  • インストール後は、コマンド実行とバージョン確認で動作を確認。
  • PATHやバージョン差異は環境構築でつまずきやすいポイントになる。

参考文献

この記事を共有
Xで共有 Facebookで共有 LINEで共有

「システム開発」の最新 5件
・VPSで作るDjangoサイト構築手順 - Nginx編：4/4 PostgreSQL・Django本番設定と起動確認
・VPSで作るDjangoサイト構築手順 - Nginx編：3/4 Python・Django・uWSGI設定
・VPSで作るDjangoサイト構築手順 - Nginx編：2/4 Nginx・SSL/TLS初期設定
・VPSで作るDjangoサイト構築手順 - Nginx編：1/4 VPS・DNS・SSH初期設定
・Webシステム開発 - Angular基礎：6/6 ルートコンポーネント表示までの流れ

システム開発 Webシステム開発 Angular Node.js TypeScript Webシステム
作成日： 更新日：
カテゴリー
タグ Python 応用情報技術 機械学習 NumPy Python基礎 ニューラルネットワーク 暗号技術 基礎理論 深層学習 VPS Angular Django 古典暗号 Webシステム Matplotlib Git タスク指向型対話 データベース ハードウェア GitHub Apache Nginx CentOS SSH デバッグ TypeScript uWSGI scikit-learn Telegram OpenWeatherMap Let's Encrypt PostgresSQL SSL/TLS DNS systemd 中学数学 0除算 SCXML MeCab LaTeX MathML MathJax venv Vim 共通鍵暗号 公開鍵暗号 現代暗号 耐量子暗号 換字式暗号 頻度分析 多表式暗号 近代暗号 軍事暗号 機械暗号 SQL Node.js データ構造 アルゴリズム OS UI/UX マルチメディア 乗算 除算 分数 逆数 算数 高校数学
Copyright SIGMA-SE All Rights Reserved.
s-hama@sigma-se.jp