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

はじめに

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

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

よく見かけます。。。

 

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

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

 

そこで、

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

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

Angular + TypeScriptを見つけました。

 

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

 

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

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

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

 

ということで、

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

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

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

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

 

 

環境

  • OS:Windows 10 64bit

 

 

手順

  1. nodejsインストール
  2. Angular CLIインストール
  3. Visual Studio Codeインストール

 

1.nodejsインストール

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

 

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

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

 

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

command
> node -v
v6.10.3
> npm -v
3.10.10
nodeとnpmのバージョンが確認できればnodejsのインストールは完了です。

 

2.Angular CLIインストール

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

commmand
> npm install -g @angular/cli
コマンドプロンプトからAngular CLIが正常にインストールできたか確認します。
command
> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64
バージョンが確認できたらAngular CLIのインストールは完了です。

 

3.Visual Studio Codeインストール

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

 

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

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

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

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください