【Angularアプリ開発】Angularアプリの開発環境を構築します

5350 ワード
Angular JavaScript Mac framework Node.js JavaScript テキストリンク

本稿では、Angularアプリ開発を巡って、プロジェクトの稼働環境や必要になる技術ポイントなどを解説してみたいと思います。

前提

最近、Node.jsを利用しハイブリッドようなプロジェクトを動かしているユースケースが多くなってそうです。今回、AngularアプリにもNode.jsから稼働したいと思っておりますので、まず、プロジェクトを作る前に、Node.jsのインストールを行いましょう。

Node.jsインストール

Node.jsのインストールの順番として、Node.jsのバージョン管理ツールとしているnpmをインストールすることが必要です。やり方は以下の通り。

# nodebrewをインストル
$ brew install nodebrew
# Node.jsとnpmのインストール
$ nodebrew install-binary latest
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
# 以下が表示
  Fetching: https://nodejs.org/dist/v11.12.0/node-v11.12.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

上記のコマンドで最新版がインストールされます。
Node.jsを有効にします。

# バージョンの一覧を確認
$ nodebrew list
# バージョンの一覧が表示
  v11.12.0
  current: none
# current: noneとなっているため、必要なバージョンを有効化する。
  nodebrew use v11.12.0
# バージョンの一覧を再確認
$ nodebrew list
# 以下が表示
  v11.12.0
  current: v11.12.0

nodebrewが使いやすいように環境パスを通します。
インストルした結果を確認します。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
# node.jsがインストル済かどうかを確認
  node -v
# 以下が表示
  v11.12.0
# npmがインストル済かどうかを確認
$ npm -v
# 以下が表示
  6.7.0

上記ような各バージョーンが表示されたらNode.jsのインストールが終わりします。

AngularCLIインストール

以下コマンドでAngulerCLIをインストールします。

$ npm install -g @angular/cli
# 以下の内容が表示されたら、インストールがOK
  + @angular/[email protected]
  added 363 packages from 197 contributors in 22.591s

Angularのバージョンを確認しましょう。

VSCodeに連携

VSCodeに、Anguler拡張機能をインストールします。
🌾Angular Essentials
Angular Essentials拡張機能は、Angularの開発がしやすくなります。

インストール方法
VSCodeの拡張機能→Angular Essentials→インストール

Angular Essentialsに含まれる拡張機能

  • Angular v4 Snippets
  • Angular Language Service
  • Editor Config
  • tslint
  • Chrome Debugger
  • Bracket Pair Colorizer
  • Path Intellisense
  • Angular Inline

- Angular Material Theme

🌾Auto Import
Auto Import拡張機能は、TypescriptとTSXで動作する拡張機能で、WebStormのように、インポート文を自動で追加され、より高速に開発ができます。

インストール方法
VSCodeの拡張機能→Auto Import→インストール

Angulerアプリ作成

VSCodeのターミナルからAngulerアプリを作ります。

$ ng new coolesson

サーバを起動します。

$ cd coolesson
$ ng serve 
# 以下が表示されます
  ** Angular Live Development Server is listening on localhost:4200, open your browser on 
  http://localhost:4200/ **
  Date: 2019-04-24T13:12:14.814Z
  Hash: a27f36c54306bf454f91
  Time: 9382ms
  chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] 
  [rendered]
  chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
  chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
  chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
  chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
  chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]

任意ブラウザーで、URL欄にlocalhost:4200を打つと、以下の画面が表示されるはずです。