サンプルコードで身につける: 開発環境の準備 — Node.jsとAngular CLI

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1Node.jsとnpmのバージョン確認

環境構築でつまずいたら、まず疑うのはNode.jsのバージョンです。Angularの開発にはv20以上が必要で、npmはNode.jsに同梱されています。エラーが出る前に最初に確認しておくのが安全です。

# Node.js のバージョン確認(v20以上が必要)
node --version
# => v22.12.0

# npm は Node.js に同梱されている
npm --version
# => 10.9.0

# バージョンが古い・コマンドが見つからない場合は、
# Node.js 公式サイトから LTS 版をインストールし直す

2Angular CLIのインストールと動作確認

-g はグローバルインストールの指定で、どのフォルダからでも ng コマンドが使えるようになります。インストール後に ng version が動けば成功です。CLIはプロジェクト作成から雛形生成まで開発全体を支えます。

# Angular CLI をグローバルにインストール
# (-g を付けると、どのフォルダからでも ng コマンドが使える)
npm install -g @angular/cli

# 動作確認。バージョンが表示されれば成功
ng version

# 「ng: command not found」と出る場合は
# ターミナルを開き直すか、npm のパス設定を確認する

3ng new の質問と答え方

ng new を実行するとスタイルの形式などをいくつか質問されます。最初はすべてEnterで既定のまま進めて問題ありません。質問の意味が分かるようになってから、好みに合わせて変えれば十分です。

ng new my-app

# 実行すると、こんな質問が順に出る(すべてEnterでよい):
#
# ? Which stylesheet format would you like to use?
#   → CSS のままEnter(スタイルの書き方。まずは普通のCSSで十分)
#
# ? Do you want to enable Server-Side Rendering (SSR)?
#   → No のままEnter(サーバーサイドレンダリング。学習中は不要)
#
# 質問が終わると my-app フォルダが作られ、
# 必要なライブラリのインストールまで自動で行われる

4ng serve で開発サーバーを起動する

ng serve はビルドと開発サーバーの起動をまとめて行うコマンドです。表示されるURLをブラウザで開くと初期画面が確認できます。サーバーはターミナルを占有し続けるので、開発中は起動したままにします。

cd my-app
ng serve

# 成功するとこんな出力が出る:
# Initial chunk files | Names         | Raw size
# main.js             | main          | 20.06 kB
# ...
# Watch mode enabled. Watching for file changes...
# ➜ Local:   http://localhost:4200/

# ブラウザで http://localhost:4200 を開くと初期画面が表示される
# 停止するときはこのターミナルで Ctrl + C

5最初に覚えるngコマンド4つ

CLIには多くのコマンドがありますが、学習の序盤で使うのは4つだけです。まずこの4つを手に馴染ませれば、日々の開発は回ります。それぞれの詳しい使い方は後のレッスンで順に登場します。

# 最初に覚える4コマンド

# 1. プロジェクトを新規作成する
ng new my-app

# 2. 開発サーバーを起動する(開発中はずっと起動したまま)
ng serve

# 3. コンポーネントなどの雛形を生成する
ng generate component user-card

# 4. バージョンや環境を確認する(トラブル時の最初の一手)
ng version