Angular の環境を構築する

Angular の環境を構築する

こんばんは。七色メガネです。

今日は JavaScriptフレームワークである Angular の環境構築を行なっていきたいと思います。

Angular ってなに?

Angular とは、Google が開発している  JavaScriptフレームワークです。類似のフレームワークとしては、React.js などが存在します。
Angular は2012年に AngularJS として公開されて以降、かなり早いペースでの開発が進められているフレームワークで(メジャーアップデートが半年に一度でスケジューリングされている)、2019年11月現在では Angular 9 が最新のバージョンになっています。

Angular の特徴としては、JavaScript を拡張した TypeScript を使用できること、依存性の注入ができること、MVCモデルを採用していること、双方向のデータバインディングをサポートしていることなどが挙げられます。

環境構築

前提

  • Macである。
  • homebrew が install 済みである。

手順メニュー

  1. nodebrew を install する
  2. node.js を install する
  3. Angular CLI を install する
  4. Angular プロジェクトを作成する

用語解説

Angular CLI

Angular の公式コマンドラインツール。これを使用するとコマンド1つでアプリの骨格を生成することなどができるため、大変便利。今回の手順では、このツールを取得し、提供されるコマンドを使ってプロジェクトを生成するのがゴール。

nodebrew

node.js のバージョン管理を行うツール。Angular CLI を install するためには node.js が install されている必要があるので、node.js を扱うために nodebrew が必要になる。というのも、 Angular CLI の install は node.js のパッケージ管理ツールである npm を使用するためである。
とりあえず、 Angular CLI の用意に必要であるのだ。

npm

node.js のパッケージ管理ツール。

1. nodebrew を install する

はじめに nodebrew を install します。homebrew を通して install を実行します。

install が成功したら(成功したかどうかを確かめる場合は、 brew list を実行してください)、nodebrew の setup を行います。

上記コマンドを実行すると以下のようなメッセージが出力されます。
export … の部分をコマンドラインで実行し、PATH に追加しましょう。PATH への追加を反映させるために、 source コマンドも併せて実行します。なお以下のコマンドは、bash_profile を配置している場所での実行を想定しています。

2. node.js を install する

nodebrew を用意できたら、それを使って node.js を install します。

次のコマンドを実行しましょう。

‘stable’ は安定板を install するためのオプションです。

install 直後では使用する node の version が指定されていないため、node コマンドはまだ使用できません。

次のコマンドで使用 version を指定することにより、 上記の current 部分が設定され、node コマンドを実行できるようになります。

これで node.js 及び npm の install が終了しました。最後に次のコマンドで version を確認しましょう。

 3. Angular CLI を install する

npm を用意することができたので、npm を使って Angular CLI を install しましょう。

次のコマンドを実行します。 -g オプションを使用すると、グローバル領域への install が行われます。

これで Angular CLI が使用できるようになりました。
CLI では ng コマンドを用います。次のコマンドで、 install されたツールの version を確認しましょう。

4. Angular プロジェクトを作成してみる

全ての準備が終了しました。
最後に、Angular のプロジェクトを作成してみましょう。

Angular CLI が提供する ng new コマンドを使用すると、それだけでプロジェクトが作成されます。

作成されたプロジェクトの中身をみてみると、正常にプログラムが生成されていることがわかります。

この場所で次のコマンドを実行することで、ローカルサーバーを起動することができます。

ローカルの 4200 番にアクセスすると、正常にサーバーを立ち上げられていることが確認できました。

参考

https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7

https://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b

https://www.atmarkit.co.jp/ait/articles/1706/05/news144.html

便利なパッケージ管理ツール!npmとは【初心者向け】

 

Angularカテゴリの最新記事