【2023年最新版！】MacにAngular環境を構築しよう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はMacにAngular環境を構築する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

MacにAngularの環境が構築できる

MacにAngular環境を構築しよう！
Angularのアプリを作ろう！
まとめ

MacにAngular環境を構築しよう！

Homebrewのインストール

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

Macのパッケージマネージャツールだよ！
パスワードを聞かれたらPCのパスワードを入力してね！

nodebrewのインストール

brew install nodebrew
nodebrew setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile; source ~/.bash_profile
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile; source ~/.zprofile

Node.jsのインストール

nodebrew install-binary v18.10.0
nodebrew ls
nodebrew use v18.10.0

バージョンはAngularのバージョンと合うものを指定してね！
2023年9月時点では上記のバージョンでOKだよ！

Angular CLIのインストール

npm install -g @angular/cli
export PATH="$PATH:$HOME/.npm-global/bin"

これでAngular環境ができたよ！
ngコマンドが通らないときはPCを再起動してね！

Angularのアプリを作ろう！

ng new my-app

とターミナルで実行します。

? Would you like to add Angular routing? (y/N)

ルーティングファイルを設定するかどうかを聞かれているよ！
設定して使わなくても影響はないので、筆者はyにするよ！

? Which stylesheet format would you like to use?

スタイルファイルを設定するかどうかを聞かれているよ！
筆者はSCSSを選択するよ！

cd my-app
ng serve -o

これでこのような画面が開かれればAngularアプリの初期設定が完了したよ！

まとめ

Homebrewのインストール
nodebrewのインストール
Node.jsのバージョン指定
Angular-CLIのインストール

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram