目次：Webアプリ開発ロードマップ

第2回：Angularの環境構築

今回からAngularアプリを作っていきます。
まず、Angularの元となるNode.jsをインストールします。

Node.jsをインストールする

紹介

Node.jsはChromeエンジンを利用したJavascriptランタイムです。
通常、JavaScriptはブラウザ内に読み込まれて動作しますが、Node.jsを利用することでコマンドラインからJavaScriptプログラムを動かすことができます。
また、Node.jsはnpm (Node Package Manager)を具備しており、GitHubからOSSなモジュールを取得し、利用することができます。

注意事項

Node.jsはNode.js公式サイトからインストールしたいところですが、一度インストールしてしまうとアンインストールが面倒な代物です。
開発プロジェクトによって利用するNode.jsのバージョン指定がありますので、簡単にバージョンを切り替えられるようにインストールしましょう。
Node.jsのバージョン管理を行えるNodebrew(mac)やNodist(win)など他にもあるようですが、ここではNodebrewを使ってインストールしていきます。

インストール

1. 下記のコマンドを実行し、nodebrewをインストールしてください。
   brewコマンドが使えないmacユーザはHomebrew公式サイトからインストールしてください。

$ brew install nodebrew

1. コマンドラインが使えるように、環境変数PATHを通します。
   ~/.zprofileに下記の一文を書き足します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

1. 下記のコマンドでnodebrewのインストールが正常に行われたか確認します。

$ nodebrew -v
nodebrew 1.0.1

1. 次にnodebrewを使ってNode.jsをインストールしていきます。
   下記のコマンドで利用できるNode.jsのバージョン一覧を表示します。

$ nodebrew ls-remote

1. バージョンを指定してNode.jsをインストールします。今回はv14.9.0を利用します。

$ nodebrew install-binary v14.9.0
Fetching: https://nodejs.org/dist/v14.9.0/node-v14.9.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

1. Node.jsがインストールされたことを確認します。
   下記のコマンドでPCにインストールされているNode.jsのバージョンを確認できます。

$ nodebrew list
v14.9.0

current: v14.9.0

currentのところに表示されるのが現在利用しているNode.jsのバージョンです。

1. 複数インストールされたバージョンのうち、利用するバージョンを切り替えるには下記のコマンドを実行します。

$ nodebrew use v14.9.0

1. Node.jsが正常にインストールされたか確認する。

$ node -v
v14.9.0
$ npm -v
6.14.8

Angularをインストールする

紹介

AngularはNode.jsを利用して作られたWebアプリフレームワークです。
また、Angular用のソースコードを一般的なhtml/css/jsにビルドする機能や、動作確認用にサービングする機能を持っています。

インストール

Angularのパッケージである@angular/cliをインストールします。
cliはCommand Line Interfaceの意味です。

1. まず下記のコマンドで公開されているバージョンを確認します。

$ npm info @angular/cli versions

1. 下記のコマンドでインストールします。今回は10.0.8をインストールします。
   -gオプションはglobalの意味合いがあります。通常、npmでインストールされるモジュールは、ローカルで作業しているパッケージの中にインストールされますが、
   -gでインストールすることでシステム内にインストールことになり、パッケージの内外から利用できるようになります。
   cliは基本的に-gでインストールすると考えていてください。

$ npm install -g @angular/cli@10.0.8

1. 下記のコマンドで@angular/cliが正常にインストールされたかを確認します。
   aNGularのNGコマンドです。

$ ng version

Angularプロジェクトを作成する

下記のコマンドでAngularのプロジェクトを作成します。
frontという名前のプロジェクトが作成されます。

$ ng new front
? Would you like to add Angular routing? (y/N) -> y
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 

• 1つ目の問い：Angularのルーティングを生成するか。
  後で自作することもできますが、作ってもらいます「y」を選択
• 2つ目の問い：cssのフォーマットに何を利用するか。
  scssを選択。css以外はcssを高度にしたもので、そのままではブラウザで読み込むことができないため、ビルドを通す必要があります。

しばらく待っているとプロジェクトの作成が完了します。
下記のファイルが生成されます。

node_modules/

このフォルダはnpmによってインストールされたモジュールがインストールされます。
このフォルダを削除しても、$ npm installをパッケージ内で実行することで、再度node_modulesは作られますので、gitに登録するときはこのフォルダは除外します。

package.json, package-lock.json

pakage.jsonのdependenciesやdevDependenciesにパッケージに必要なモジュールがバージョン指定で記載されています。ただし、"^6.0.0"のような指定で、バージョン6以上など、範囲指定がされているため、利用していたモジュールを完全に再現するためにはpackage-lock.jsonが必要になります。

Angularでサービングする

1. Angularが必要としているモジュールをインストールする

$ cd front
$ npm install

1. サービングする

$ ng serve

1. ブラウザでアクセスしてみる

ブラウザから http://localhost:4200 にアクセスしてみましょう
下記のように空のWebアプリが表示されれば成功です。

ちなみに下記のコマンドを実行することで、ビルドが行われ、distフォルダにビルド結果が出力されます。

$ ng build

今回はここまでです。次回はログインページを作っていきます。
今回開発したソースコードはGitHubに入っています。