VSCodeを用いたAngular7開発環境構築からアプリケーションの実行まで

概要

TesseractやRaspberry Piについての記事が途中なのですが、
急遽Angularを使用することになり、開発中に色々と不明点が多く出てきていました。
一旦開発が落ち着いたので備忘録兼ねてAngularの構築からアプリケーションの実行までを記事にまとめておきたいと思います。
開発中に詰まったことはまた別の記事として投稿したいと思います。

前提

AngularはTypeScriptベースのWebアプリケーションフレームワークです。
よく比較されているものとしてはReactとVue.jsが挙げられると思います。
今回はAngularで開発を行ったのでAngularしか取り上げませんが、他のフレームワークに興味がある場合は調べてみると良いかもしれません。
この記事ではAngularの開発を行うための前提条件および、開発ツールを一通り構築するための手順をまとめています。
なお、この記事では開発エディタにVisual Studio Code(以後VSCode)を指定していますが、他のエディタを使用したい方は適時読み替えを行ってください。

インストール

この記事ではAngular CLIをインストールするのでnpmのインストールを行う必要があります。

Node.jsのインストールまで

バージョン管理を行う必要がない場合はNode.jsをそのままダウンロードしてインストールを行いますが、
アプリケーション開発を行う場合は基本的にバージョン管理を行うことが多いです。
なのでNode.jsだけでなく、バージョン管理ツールも一緒にインストールを行う形で記載します。

1. Macの場合

Macでのバージョン管理ツールはnodebrewを使用する場合が多いと思います。
nodebrewをインストールするためにはhomebrewが必要になるので、この二つのツールのインストールを実施します。

1.1. homebrewのインストール

homebrew公式サイトでインストール手順が説明されている

ターミナルを起動後、以下のコマンドを実行
注記
インストール手順および実行コマンドは変更される可能性があるのでできる限り公式サイトを確認してそちらの手順を実行すること

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

実行後、バージョン確認を行い正常にインストールされていることを確認する

brew --version

# インストールされている場合下記が出力される
Homebrew 2.1.4
Homebrew/homebrew-core (git revision 35b8; last commit 2019-05-30)

1.2. nodebrewのインストール

1.2.1. インストール
homebrewがインストールされたことを確認したら、nodebrewをインストールする

brew install nodebrew

1.2.2. nodebrewのPATHを設定する

インストール直後の状態だとnodebrewへのパスが設定されていないため環境変数PATHに実行ファイルまでのパスを追加する
上記設定を行うことでターミナル上でnodebrew xxといったコマンドが実行できるようになる

# home/.bash_profileが作成されていない場合、homeディレクトリに移動後に先にこちらのコマンドを実行する
touch ~/.bash_profile

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH

完了後、.bash_profileを再読み込みする

source ~/.bash_profile

完了したら正常にインストールされていることを確認する

nodebrew --version

1.2.3. Node.jsの最新バージョンもしくは指定したバージョンのインストールおよび切り替え
以下のコマンドを実行して最新バージョンもしくは指定したバージョンのnode.jsをインストールする

# 最新バージョンをインストールする場合
nodebrew install-binary latest

# バージョンを指定してインストールする場合
nodebrew install-binary 12.4.0

# 現在インストール可能なバージョンを表示する
nodebrew ls-remote

〜省略〜
v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0  v11.13.0  v11.14.0
v11.15.0  

v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0

※nodebrew install-binary latestで失敗する場合、予めディレクトリを作成しておくこと
Node.jsのインストールに失敗する時の解決策（No such file or directory）

# ホームディレクトリで実行する
mkdir -p ~/.nodebrew/src

完了後、インストールされたバージョンを確認する

nodebrew list

# 現在インストールされているバージョンの一覧と、currentに現在使用しているバージョンが表示される
v12.2.0
v12.4.0

current: v12.2.0

初回インストール時または、バージョンを切り替える場合は以下のコマンドを使用する

nodebrew use  v12.4.0

# 正常に切り替えができているかを確認する
nodebrew list

# 切り替えができている場合currentが指定したものに切り替わっている
v12.2.0
v12.4.0

current: v12.4.0

1.2.4. Node.jsのPATHを設定する

上記のままだとnodeやnpmコマンドがそのままでは実行できないのでパスを通す

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH

完了後、.bash_profileを再読み込みする

source ~/.bash_profile

完了したら正常にインストールされていることを確認する

node --version

# パスが正常に通っている場合バージョンが表示される
v12.2.0

npm --version

# パスが正常に通っている場合バージョンが表示される
6.9.0

2. Windowsの場合

Windows10の場合はWSLが使用可能なのでMacと同様にhomebrew + nodebrewで構築が可能ですが、
WSLを使用しない場合やWindows10以外の場合は別のバージョン管理ツールが必要になります。
調べたところnodistが主流のようなので今回はこちらを元に記載します。

2.1. nodistのインストール

2.1.1. インストール
nodist公式サイト

上記サイトにアクセスを行い、「Installation」項目内のfrom the releases pageをクリック

「Releases」タグ内の最新バージョンの項目(今回はv0.9.1)内のexeファイルをクリックしてダウンロード

インストール後、下記コマンドを実行して先程インストールしたnodistのバージョンが表示されることを確認する

nodist -v
0.9.1

2.1.2. Node.jsとnpmのバージョン切り替え

下記コマンドで現在インストールが可能なNode.jsのバージョン一覧が確認できる

nodist dist

指定したバージョンのNode.jsをインストール

nodist + 12.2.0

インストールが完了後、Node.jsのバージョンを切り替える

nodist 12.2.0

最新のNode.jsに合ったバージョンのnpmをインストールする
追記
nodistのバージョンが0.8.8の場合、下記コマンドが失敗するとのこと
最新のバージョンで実行すること

nodist npm match

2.1.3. バージョン確認

下記コマンドをそれぞれ実行し、nodeとnpmのバージョンの確認及び、インストールが完了していることを確認する

Node.jsのバージョン確認

node --version

npmのバージョン確認

npm --version

nodistにインストールされているNode.jsと現在指定されているバージョンの確認

nodist ls

VSCodeのインストール

Angularのコード修正を行うためにVSCodeをインストールします。

1. インストール

VSCode公式サイトにアクセスして「Download for XX」をクリック

1.1. Macの場合
VSCode-darwin-stable.zipがダウンロードされるので解凍する
解凍後、Visual Studio Code.app作成されるのでアプリケーションフォルダに格納後、実行する

1.2. Windowsの場合
VSCodeUserSetup-x64-1.35.1.exeがダウンロードされるので実行する

「次へ」をクリック

「同意する」にチェックを入れた後「次へ」をクリック

インストール先を変更したい場合は変更後のパスを入力後に「次へ」をクリック

プログラムグループを作成しない場合はあまり無いと思われるのでそのまま「次へ」をクリック

追加したいアクションがある場合はそれぞれチェックをして「次へ」をクリック
※今回は「デスクトップ上にアイコンを作成する」にチェックを入れた

内容を確認して「インストール」をクリック

正常にインストールが完了した場合「完了」をクリックして終了する

2. 拡張機能の追加

VSCodeのインストールが完了後、Angularの開発を行いやすくするための拡張機能をインストールする

2.1. 拡張機能の追加方法

拡張機能を追加する場合は左枠の中にある、下の図の垢枠で示しているアイコンをクリックした後に「拡張機能」下のテキスト欄で任意の拡張機能を検索する

2.2. 必須の拡張機能

Angularで開発を行う上で使いやすい拡張機能が一式まとめてインストールできる拡張機能が出ている
Angular Essentials
この拡張機能を入れれば下記の拡張機能が全てインストールされる
個別もしくは一部のみインストールを行いたい場合は各自インストールすること

• Angular2 Inline
• Angular Language Service
• Angular Snippets
• Angular Console
• Chrome Debugger
• Editor Config
• Material Icon Theme
• npm
• Peacock
• Prettier
• tslint
• Winter is Coming

2.3. 日本語化

日本語化を行いたい場合は以下の拡張機能をインストール

Japanese Language Pack for Visual Studio Code

2.4. その他おすすめ

下記の記事でAngular以外でも便利になる拡張機能が説明されているので、必要であればインストールを行う
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

3. 設定変更

VSCodeで変更を行った方がよい設定があれば随時追記。

Angular CLIのインストール

ここまでが完了したらAngular CLIのインストールを行います。
今回はver.7のインストールを行いますが、既に8がリリースされているので状況によっては8のインストールをお勧めします。
https://angular.jp/guide/releases

1. グローバルインストールとローカルインストールについて

複数開発を行っている場合、プロジェクトによってAngularのバージョンが異なる場合があると思います。
グローバルのAngularと異なるAngularのバージョンを入れたい時や、複数のバージョンをインストールしたい場合は
ローカルにインストールした方が良いでしょう。

2. グローバルにインストール(ローカルに入れない場合は必須)

2.1. インストール

以下のコマンドでAngularをグローバルにインストールする

npm install -g @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install -g @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

2.2. バージョン確認

インストールが完了した場合、以下のコマンドでバージョンを確認する

ng --version

# 正常にインストールされている場合以下が出力される
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.9
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.9
@angular-devkit/core         7.3.9
@angular-devkit/schematics   7.3.9
@schematics/angular          7.3.9
@schematics/update           0.13.9
rxjs                         6.3.3
typescript                   3.2.4

3. ローカルにインストール(任意)

試してみたところ、グローバルにインストールした場合でもローカルにインストールは可能みたいです。

3.1. インストール

作成予定のプロジェクトに対するフォルダを作成後、そのフォルダに移動

mkdir 【プロジェクト名】
cd 【プロジェクト名】

作成後、Angularをインストール(-gオプションは付けない)

npm install @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

3.2. バージョン確認

インストールが完了した場合、以下のコマンドでバージョンを確認する
※下記ではグローバルと異なるバージョンを入れるためにver.8をインストールした

npx ng --version

# 正常にインストールされている場合以下が出力される

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.4
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.4
@angular-devkit/core         8.0.4
@angular-devkit/schematics   8.0.4
@angular/cli                 8.0.4
@schematics/angular          8.0.4
@schematics/update           0.800.4
rxjs                         6.4.0

プロジェクトの作成及び実行確認

Angular CLIが正常にインストールされたことを確認するためにプロジェクトを作成して実行します。
プロジェクトは作成した直後に実行が可能な状態で生成されるので、一旦何も変更をせずに実行をしてみたいと思います。

1. プロジェクトの作成

以下のコマンドで新しいワークスペースを作成する

# グローバルにインストールした場合
ng new 【出力パスを含めたプロジェクト名】

# 例
ng new C:/Angular/AngularProject

# ローカルにインストールした場合
# プロジェクト直下に移動していない場合は移動しておくこと
cd 【プロジェクト名】
npx ng new 【プロジェクト名】 --directory=./

2019年10月23日追記
Windowsでnodist経由でNode.jsをインストールしている場合、ローカルインストール時にnpxのコマンドを実行時に'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。と出る場合はnpm install -g npxを実行後に再度プロジェクトの作成を行ってください。

作成時にルーティング機能を追加する場合はyを入力する
追加した場合、ワークスペース内にapp-routing.module.tsが追加されている

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

CSSを拡張したメタ言語で記載する場合はCSS以外を選択
今回はSCSSを選択する

? Which stylesheet format would you like to use? (Use arrow keys)
  CSS 
❯ SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ] 

これらの設定は以下のオプションを設定することと同様となる

# グローバルの場合
ng new 【出力パスを含めたプロジェクト名】 --routing=true --style=scss

# ローカルの場合
npx ng new 【プロジェクト名】 --directory=./ --routing=true --style=scss

コマンドの実行が終了後、正常にワークスペースが作成されていることを確認する

2. プロジェクトの実行

VSCodeを起動して先ほど作成したワークスペースを開く
例の場合、「フォルダを開く」を選択後にC:/Angular/AngularProjectを選択して「開く」ボタンをクリックする

画面下部に「統合ターミナル」内の「ターミナル」タブをクリックして以下のコマンドを実行したあと、ブラウザでhttp://localhost:4200を開く

# グローバルの場合
ng serve

# ローカルの場合
npx ng serve

# 起動時に自動的に対象のアプリケーションをブラウザに開きたい場合はオプションをつける
ng serve --open

統合ターミナルが表示されていない場合はメニューの「表示」、「ターミナル」をクリックして表示する

正常に起動できた場合、ブラウザで以下の画面が表示される

自動整形

上の作業でAngular自体の環境構築は終了しました。
開発するだけなら上記設定だけで問題ないですが、複数人で開発を行う場合はコードスタイルに沿っているかが重要になります。
ですので開発時に自動的に構文チェックを行うようにします。
以下はプロジェクトを作成するごとに行う作業です。
プロジェクト毎に設定する理由として、他の言語で行う場合にそれぞれ反する設定が混じらないようにするためです。

TSLintを設定する

メニューの「Code」(Windowsの場合は「ファイル」)をクリックして「基本設定」、「設定」をクリック
設定画面が表示されるので「ワークスペース」タブをクリック後、いずれかの項目の「settings.jsonで編集」をクリックする

settings.jsonを開いた後、以下のように書き換えることでTypeScriptに対してLintが行われるようになる

settings.json

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "tslint.configFile": "tslint.json",
  "[typescript]": {
    // ファイル保存時に自動フォーマットをしないようにする
    "editor.formatOnSave": false,
    // 貼り付けた内容に対して自動フォーマットをしないようにする
    "editor.formatOnPaste": false,
    // 入力後に行に対して自動フォーマットをしないようにする
    "editor.formatOnType": false,
    "editor.codeActionsOnSave": {
      // 保存時に対して行われるアクションにtslintを設定する
      "source.fixAll.tslint": true
    }
  }
}

TypeScriptに対してルールを設定したい場合、[プロジェクト配下]/tslint.jsonを修正する
※追加した方が良いルールがある場合随時追記する

npxまたはngコマンドの実行に失敗する(Windows10のみ)

(npx) ng generate component 【コンポーネント名】などのコマンドを実行した場合に「このシステムではスクリプトの実行が無効になっているため～」というエラーが発生する場合、スクリプトの実行ポリシーに制限がかかっている。

制限がかかっているかの確認を行うにはPowerShellを起動後、以下のコードを実行する。

>Get-ExecutionPolicy
# スクリプト実行に制限あり
Restricted

スクリプト実行を許可する場合はRemoteSignedなど、スクリプト実行が許可される実行ポリシーに変更する。
※Bypassはセキュリティリスクが向上するので避けること

実行ポリシーを変更する場合、管理者権限でPowerShellを起動後、以下のコードを実行する。

>Set-ExecutionPolicy RemoteSigned
# 実行後、ポリシーを再確認する。変更に成功している場合は指定したポリシーが表示される
>Get-ExecutionPolicy
RemoteSigned

最後に

アプリケーションの実行まで完了した場合、以降はAngular公式のチュートリアルを
順に実行するとAngularについての理解が深まると思います。
Angularチュートリアル

参考

Macにnode.jsをインストールする手順。
【Mac】node.jsインストール方法
.bash_profileと.bashrcのまとめ
Node.jsのインストールに失敗する時の解決策（No such file or directory）
nodistでNode.jsをバージョン管理
nodistでnpm6.2.0以降にアップデート出来なかった話
MacにVSCode (Visual Studio Code)をインストールする方法
WindowsにVSCode (Visual Studio Code) をインストールする方法
[Mac] Angular開発環境構築
Angular をやるのに欠かせない VSCode Extension
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)
[TypeScript] VSCodeでファイル保存時にtslint.jsonに沿った整形を行う
Angular6のプロジェクトを作ったらまずやっとくこと
グローバルにAngular CLIをインストールしないでng newする方法
npxでローカルパッケージを実行できるんです！
【Windows10】nodistでnodeをインストール
Powershellを楽に実行してもらうには