「Angularでアプリ作ってみたい！」と思ったら、まず最初にやることは開発環境づくり。 このページでは、Windows PC に Angular の開発環境を一からセットアップする手順を、なるべくつまずかないように解説していきます。
必要なものをインストールして、ng serve で画面が出るところまで一緒にやってみましょう ✨
今回インストールするもの
| ツール | ざっくり言うと |
|---|---|
| Node.js | Angularを動かすための土台 |
| npm | パッケージ（部品）をダウンロードする道具（Node.jsに付属） |
| Angular CLI | プロジェクト作成やビルドをコマンド一発でやってくれる子 |
| Git | ソースコードの変更履歴を管理するツール |
| VS Code | コードを書くエディタ |
順番にインストールしていきます。
1. Node.js をインストールする
Angular CLIは Node.js の上で動いているので、まずはここから。
- https://nodejs.org/ にアクセス
- LTS版（安定版）のインストーラー（.msi）をダウンロード
- ダブルクリックしてインストール開始 → 基本は「Next」を押していくだけでOK
- インストールが終わったら、コマンドプロンプトかPowerShellを開いて確認
node -v
npm -v
バージョンが表示されればOK！ npmはNode.jsを入れると一緒についてくるので、別でインストールする必要はありません。
💡 迷ったらLTS版（安定版）を選べば間違いなしです。最新版（Current）は新しい機能がある反面、不安定なこともあるので開発初心者にはLTSがおすすめ。
2. Git をインストールする
コードの変更履歴を管理するのに必須のツール。GitHubを使う人はほぼ必須です。
- https://git-scm.com/ からWindows用インストーラーをダウンロード
- インストーラーを実行 → 基本デフォルト設定のままでOK
- 確認コマンド
git --version
3. Angular CLI をインストールする
ここからが本番！ Angular CLIは、プロジェクト作成やビルド、開発サーバーの起動などを全部コマンドでやってくれる超便利ツールです。
npmを使ってインストールします。
npm install -g @angular/cli
-g は「グローバルにインストールする」という意味で、これでPCのどこからでも ng コマンドが使えるようになります。
インストールできたか確認👇
ng version
こんな感じでバージョン情報がずらっと表示されればOKです。
⚠️ 「アクセスが拒否されました」的なエラーが出たら、PowerShellを管理者として実行し直してから、もう一度試してみてください。
4. VS Code をインストールする
コードを書くためのエディタ。無料で軽くて使いやすいので、Angular開発でも定番です。
- https://code.visualstudio.com/ からダウンロード
- インストール時、「PATHへの追加」にチェックを入れておくと後々便利です
- インストール後、拡張機能（左側のアイコン）から以下を入れておくと快適に開発できます
- Angular Language Service（Angular公式の補完・エラー表示）
- ESLint（コードの書き方をチェックしてくれる）
- Prettier – Code formatter（コードを自動で整形してくれる）
5. さっそくプロジェクトを作ってみる
ツールが揃ったら、実際にAngularプロジェクトを作って動かしてみましょう。
作業したいフォルダに移動して…
cd C:\Users\ユーザー名\projects
プロジェクトを新規作成！
ng new my-app
いくつか質問されるので（スタイルはCSS？SCSS？とか）、わからなければ Enterキーでデフォルトのまま進めてOK です。
作ったプロジェクトのフォルダに入って…
cd my-app
開発サーバーを起動！
ng serve
ブラウザで以下にアクセスしてみましょう。
http://localhost:4200
🎉 Angularのロゴが出たロケット画面が表示されたら、環境構築は完了です！おめでとうございます！
うまくいかないときは？
ng コマンドが「認識されません」って言われる
→ Node.jsをインストールした後にPATHがうまく通っていないことが多いです。PCを再起動してもダメなら、Node.jsを入れ直してみましょう。
PowerShellで「スクリプトの実行が無効になっています」と出る
→ Angular CLIはPowerShellのスクリプトとして動くので、実行ポリシーの制限に引っかかることがあります。管理者権限でPowerShellを開いて、以下を実行してみてください。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
npm install でエラーが出る
→ だいたいNode.jsのバージョンが古いのが原因。node -v で確認して、LTS版に入れ替えてみましょう。
まとめ
Windowsで Angular 開発を始めるために必要なのは、この4つだけ！
- ✅ Node.js
- ✅ Git
- ✅ Angular CLI
- ✅ VS Code
インストールが終わったら ng new → ng serve の2コマンドで、もうAngularアプリが動かせます。 思ったより簡単だったんじゃないでしょうか？ ここから先はコンポーネントを作ったり、いろいろ触って遊んでみてください✨
