本章では、Angularの開発を始めるために必要な環境構築の手順を解説します。
Node.jsとnpmのインストールから、Angular CLIの導入、そして最初のアプリケーションを立ち上げるまでを実践形式で学びましょう。
1. Node.js と npmのインストール
Angularの開発には、Node.js（ノードジェイエス）と、そのパッケージ管理ツールであるnpmが必須です。
まずはこれらをインストールしましょう。
■ Node.jsとは？
Node.jsは、サーバーサイドでJavaScriptを動かすための実行環境です。
Angular自体はブラウザで動くフロントエンドのフレームワークですが、開発時のビルドやパッケージ管理にNode.jsが必要になります。
■ インストール手順
以下の公式サイトから、LTS（長期サポート版）をダウンロードしてください。
インストール後、ターミナル（コマンドプロンプト）で以下のコマンドを実行し、バージョン確認を行います。
node -v npm -v バージョンが表示されればインストール成功です。
例：
v18.17.0 9.6.7 2. Angular CLIの導入とプロジェクト作成
■ Angular CLIとは？
Angular CLI（Command Line Interface）は、Angularアプリの作成・ビルド・テストなどを効率化する公式ツールです。CLIを使うことで、複雑な設定を意識せずにプロジェクトの雛形を簡単に作成できます。
■ CLIのインストール
以下のコマンドでAngular CLIをグローバルインストールします。
npm install -g @angular/cliインストール後、バージョン確認を行いましょう。
ng version■ 新規プロジェクトの作成
次に、Angularアプリの初期プロジェクトを作成します。プロジェクト名は任意ですが、ここではmy-appとします。
ng new my-app実行すると、いくつか質問されます。
- Would you like to add Angular routing? → y（ルーティング追加）
- Which stylesheet format would you like to use? → CSS（お好みで選択）
これでプロジェクトフォルダが生成され、必要なファイルや依存パッケージが自動でインストールされます。
3. ng serve でアプリを起動
プロジェクトディレクトリに移動し、開発用サーバーを起動します。
cd my-app ng serve --open --openオプションを付けることで、ブラウザが自動的に起動し、http://localhost:4200 にアクセスされます。
以下の画面が表示されれば、Angularアプリの立ち上げ成功です！
✔ Welcome to Angular 🎉
まとめ
今回は、Angular開発の第一歩として、Node.jsとnpmのインストールから、Angular CLIによるプロジェクト作成、そしてng serveコマンドでのアプリ起動までを解説しました。
環境構築が完了したら、次はコンポーネント作成やルーティング設定に進んでいきましょう。
Angular CLIを使えば、開発の多くを効率化できますので、CLIコマンドも積極的に活用してください！
🔧 よくあるトラブルシューティング
- npmコマンドが認識されない：
環境変数のパス設定を確認。 - ngコマンドが動かない：
CLIインストール後はターミナルを再起動する。 - ポート4200が使えない：
別のポートで起動：ng serve --port 4300
