スポンサーリンク
スポンサーリンク

Angular + Node.js + Visual Studio Code 開発手順

AngularNode.jsSPAVisual Studio Code

開発ツール インストール

Visual Studio Code

Angular + Node.js 開発のコードエディタは、Visual Studio Code 一択です。
最新の Visual Studio Codeを事前にインストールしておきます。
Visual Studio Codeダウンロード

 

Node.js

Node.js バージョンは、開発対象のバージョンと一致するものをインストールする。
今回は、Node.js 14.6 をインストールしています。
※既にサービスインしていて、本番環境がDockerなら、使用している Node.js のバージョンは、Dockerfileで確認できます。
Node.jsリリース一覧

今回は Windows 10 x64 ターゲットのインストーラをダウンロードしています。
※インストール時のウィザードは、全てデフォルト設定のままで問題無い。
Node.js v14.6.0 ダウンロード

 

Angular CLI

コマンドプロンプトで、Angular CLI ver.11.0.7 をインストールしています。
※Angularはバージョン指定でインストールする。11系だと 11.0.7が最新バージョン。
※Node.jsとAngularは、マイナーバージョン間でも依存関係があり、Node.js 14.x 系の最新版をインストールしていた場合、Angular CLI ver.11.0.7 で npm install コマンドを実行時にエラーが発生し、依存関係があるパッケージのインストールに失敗する。

※グローバルにインストールした Angular CLI は、下記コマンドでアンインストールできる。

※グローバルにインストールした Angular CLI の実態は下記にフォルダにある。

 

Angularプロジェクト作成

Angularプロジェクト新規作成

任意のフォルダへ移動し、新しい Angularプロジェクト(ワークスペース)を作成する。
※インストールした AngularとNode.jsのバージョンに互換性が無いと、この処理でエラーが発生する。

 

Materialデザインパッケージをインストール

今回は、Angular標準で無料のMaterialデザインパッケージをインストールする。
※有料のMaterialデザインパッケージだと、Ignite UI for Angularというのもある。

 

Selectコントロール(ドロップダウン)

・Angular標準だと Basic mat-select コンポーネント。

・Ignite UI for Angularだと Select コンポーネント。

 

ソース管理

Angularプロジェクトのソース管理はGitが対象になっていて、Angularプロジェクト新規作成時に、プロジェクトフォルダ内にデフォルトでGit管理用のファイルが配置される。

.gitignoreファイルに列挙されているこれらのフォルダ、ファイルは、標準でGitソース管理対象外になる。
Angularプロジェクトと依存関係のあるパッケージは node_modules フォルダにインストールされますが、node_modules フォルダもソース管理対象になっている。

 

Visual Studio Code でプログラミング

作成したAngularプロジェクトのフォルダを、Visual Studio Code で開く

Visual Studio Codeのエクスプローラーに、作成したAngularプロジェクトが展開される。

 

初回セットアップ

※Angularプロジェクトを新規作成したPCのフォルダ内には、依存関係のあるNode.jsのパッケージがインストール済みですが、Gitからソースコードのみ取得した他のPCには、依存関係のあるNode.jsのパッケージはインストールされていないので、最初にインストールする。

※Angular CLI はグローバルにインストールしたものとは別に、プロジェクト内の依存関係パッケージとしてもインストールされる。

※UIが使用している Node.js のパッケージは、全て package.json に書かれている。

Visual Studio Code のターミナルで下記コマンドを実行し、package.json に書かれているパッケージを全て、Angular プロジェクトにインストールする。
※インストールしたパッケージの有効範囲は、Visual Studio Code で開いているワークスペース(プロジェクト)のみ。

 

Angularプロジェクト実行

Visual Studio Code のターミナルで下記コマンドを実行し、Angular+Node.js WEBサイトを起動する。

http://localhost:4200/ をブラウザで開くと、実行中の Angular+Node.js WEBサイトが表示される。

 

Angularプロジェクト実行停止

Visual Studio Code のターミナルで、ctrl + c を押し、確認メッセージで yを入力する。

 

よく使うショートカット

Visual Studio Code でコーディングする際によく使う、むしろ知らないとやばいショートカット。

  • F5
    npm run start した後、F5で Angularのソースコードをデバッグ実行できる。
    Visual Studio Code上で Angularのソースコードにブレークポイントを貼って止めたり、ステップ実行したり、実行中に変数の値を確認したりできる。
  • ctrl + B
    サイドバーを開く/閉じる。
  • ctrl + p
    ワークスペース内ファイル検索。
  • ctrl + shift + F
    ワークスペース内文字列検索。
  • ctrl + @
    コマンド操作ターミナルを開く/閉じる。
  • ctrl + c 
    ターミナルで実行中のコマンドを停止。
  • ctrl + /
    選択行を纏めてコメントアウト。
  • Alt + Z
    現在開いているファイルの右端折り返しを切り替える。
  • Alt + \
    現在開いているテキストエディタの画面を分割して表示。
  • shift + alt + F12
    参照箇所を全てリストアップ。
  • ctrl + shift + p
    ワークスペース内単語検索。
  • F12
    定義へ移動。
  • shift + alt + F12
    参照箇所をリストアップ。
  • Shift+Alt+H
    メソッドの呼び出し階層を表示。

 

プログラミング

環境が整ったら、Angularのライブコーディング動画をいくつか見て、実際にプログラムを書いてみることで、開発できるようになります。

https://youtu.be/F5sSI6P5uJo

 

コメント

タイトルとURLをコピーしました