【Angular入門（1）】開発環境をWindowsに構築してみる

この記事を読むのに必要な時間は約 6 分です。

はじめに

普段の仕事で、超マニアックなJava Scriptのソースコードや、

グローバル領域を汚しまくったり、めちゃくちゃしてるJava Scriptのソースコードなどを

よく見かけます。。。

Java Scriptは手軽に自由に書ける反面、書く人によって出来上がるものに差が出やすく、

メンテナンスがしずらくなることが。。。(実際に最近ひどい目に合いました、、)

そこで、

Javaのように型の定義がきっちりしていて、オブジェクト指向で、行儀の悪いことはできなくて、

誰がコードを書いてもある程度同じようになるフロントエンドのフレームワークを探していると、

Angular ＋ TypeScriptを見つけました。

そんな素敵なものがあるのか、、と思ったので勉強することにしました。

最終的に、はお試しで簡単なWebアプリのフロントエンドをAngularで作成して、

Spring Bootで作成したバックエンドのRest APIをコールして・・・

みたいなことをやってみようかなと思います。

ということで、

まず最初のステップとして

本記事ではAngular開発環境構築手順(for Windows)について説明します。

お使いのPCがMacの方は以下を参照ください。

【Angular入門（3）】開発環境をMacに構築してみる

環境

手順

１．nodejsインストール

nodejsのダウンロードページよりnodejsをダウンロードします。

ダウンロードしたインストーラをダブルクリックします。

ダイアログが開いたらインストールを進めて行きます。

コマンドプロンプトからnodejsが正常にインストールできたか確認します。

> node -v
v6.10.3
> npm -v
3.10.10

２．Angular CLIインストール

コマンドプロンプトからAngular CLIをインストールします。

> npm install -g @angular/cli

> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64

３．Visual Studio Codeインストール

Visual Studio CodeダウンロードページよりVisual Studio Codeをダウンロードします。

ダウンロードしたインストーラをダブルクリックします。

ダイアログが開いたらインストールを進めて行きます。

Visual Studio Codeが起動したらインストール完了です。

以上でAngular開発環境構築は完了です。