【Angular】Angular開発のための環境構築

2021年12月11日

Angularで開発するにあたって必要なもののインストール方法を紹介します。

スポンサーリンク

必要になるもの

必須となるもの
1Node.jsJavaScriptのランタイムエンジンです。
AngularはNode.jsを使って開発を行っていきますので、必須になります。
Angular以外でもJavaScriptを使った開発では大体必要になるので、この機にとりあえず入れておいたほうが良いです。
2Angular CLIコマンドラインのプログラムで、Angular用のファイルを作成したりできます。
Node.jsを使ってインストールしていくので、Node.jsの後に実施してください。
あったほうが良いもの
1Visual Studio Codeマイクロソフトの開発ツールです。
Angular以外の開発においても便利なので、とりあえず入れておくのもよいと思います。
本項では、入れておいたほうが良い拡張機能についても紹介します。
2Gitファイルのバージョン管理用のツールです。
Angularに限らず、大体の開発に必要なものになるので、入れておいたほうが良いと思います。

必須となるもの

Node.js

以下のURLからNode.jsをダウンロードできます。

https://nodejs.org/ja/

「推奨版」「最新版」があると思いますが、私としては推奨版をおすすめします。
(もちろん最新版でも問題はありません)
ダウンロードしたインストーラを起動して、メッセージに従ってインストールしてください。
基本的に特に設定変えずにNextとかを押していれば問題ないです。

インストールが終わったら、一応Node.jsが動いているか確認してみましょう。
以下コマンドをコマンドプロンプト(macOSの場合はターミナル)から実行してみてください。
上手くインストールできていればバージョンが表示されます。

node –version

Angular CLI

(Node.jsを使うので、Node.jsインストール後に実施してください。)
コマンドプロンプト (macOSの場合はターミナル) より以下コマンドを実行してください。
Angular CLIがインストールされます。

npm install -g @angular/cli

インストールが完了したら、以下コマンドを実行してみてください。
Angular CLIのバージョンを確認できます。

ng –version

あったほうが良いもの

Visual Studio Code

開発ツールとして入れておいたほうが良いと思うので紹介します。
(他のツールを使っている場合は飛ばしても問題ありません)

以下URLからVisual Studio Codeをダウロードできます。

https://code.visualstudio.com/

ダウンロードしたインストーラを起動して、メッセージに従ってインストールしてください。
基本的に特に設定変えずに「次へ」とかを押していれば問題ないです。
(結構時間かかります)

拡張機能

Visual Studio Codeに入れておくと便利な拡張機能を紹介します。

1Japanese Language Pack for Visual Studio CodeVisual Studio Codeはインストールしたままの状態では、英語表示になっています。
こちらの拡張機能を入れておくと日本語表示になるのでオススメです。
2Angular Language ServiceAngularのオートコンプリートなどができるようになります。
効率的に開発するためにも入れておいたほうが良いでしょう。
3Angular SupportHTML<=>Typescriptの双方向に定義の参照をすることができるようになります。
かなりコード読むのが楽になるので、個人的にかなりオススメです。

Git

以下URLからGitをダウンロードできます。

https://gitforwindows.org/

ダウンロードしたインストールを起動してGitをインストールしてください。
Git Bash、Git GUIなどの必要なものは一式で手に入ります。

終わりに

ここまでで最低限必要なものの準備は完了です。
次はAngularのプロジェクトの作成について紹介します。

スポンサーリンク

Angular開発

Posted by 社畜林檎