ふわりAngular

このサイトはAngularで作られています。

Angular初心者なので玄人向けの情報はありません。

初心者の方、理解レベルが同じくらいの方のお役に立てれば幸いです。

2016/11/20

必要なツールをインストールしよう


Angularを始めるにあたり、必要なツールがいくつもありますのでひとつずつインストールしましょう。


私は最初、Windows 7でやろうとしたのですが、コンパイルが通らず結局できませんでした。
いろいろ調べた結果、StackOverflow に英語で

「Windows 7? そんな古いOSのことなんて知らねーよ」

と書いてあったので、Windows10 にアップデートして再インストールをしたら、ようやくできました。

Mac の場合は少し違いますので注意してください。


各種ツール


  • Git bash
  • Python2.7
  • Ruby
  • Visual Studio 2015 Community
  • Windows 10 SDK
  • nodist, Node.js
  • angular-cli
  • Visual Studio Code

Git bash


Windows で Git を利用するためのツール。

Git for Windows https://git-for-windows.github.io/


※画像をクリックすると拡大表示します。


Python2.7


npm ライブラリの中の一部で、Pythonを利用しているため。

3系ではなく2系ですので注意してください。

Git for Windows https://www.python.org/downloads/

インストール後、環境変数PATHを追加する必要があります。


※画像をクリックすると拡大表示します。


Ruby


Sassコンパイルで利用されています。

Downloads の中にいくつかありますが、「RubyInstallers」を使います。
バージョンは(2.3.1)です

Ruby Installer for Windows


※画像をクリックすると拡大表示します。


Visual Studio 2015 Community


MacではXcodeを利用しますが、WindowsではVisulalStudioを利用します。

Microsoft Visual Studio Community

node-gypのGitHubに、Visulal C++ や Python2.7 が必要なことが書かれてますので、こちらも参考に。
Node.jsをWindowsで動かすガイドラインも載っています。

nodejs/node-gyp #Installation

Microsoft's Node.js Guidelines for Windows #compiling-native-addon-modules


※画像をクリックすると拡大表示します。


Windows 10 SDK


Microsoft's Node.js Guidelines for Windows によると、SDK も必要とのことですので、インストールします。

Windows 10 SDK


※画像をクリックすると拡大表示します。


nodist


Macでは nodebrew を利用しますが、Windows では nodist を利用します。

marcelklehr/nodist #Installation


※画像をクリックすると拡大表示します。

インストール後、環境変数にPATHを追加します。

また、npm を動かすため、~/.bash_profile に次の設定を追記します。
set NODIST_X64=0
npm config set python "Python.exeのPATH"
npm config set msvs_version 2015

nodist,npm のバージョンを設定します。
nodist 6.7.0
nodist npm 3.10.8

node,nodist,npm のバージョンを確認します。
nodist
> 6.7.0 (global: 6.7.0)
nodist npm
> 3.10.8 (global: 3.10.8)


angular-cli


以下コマンドを実行し、angular-cli をインストールします。

npm cache clean
npm install -g angular-cli
npm cache clean
npm install -g node-gyp
npm install -g node-pre-gyp
npm install -g angular-cli
ng --help

※確認方法はなんでもいいですが、今回はヘルプ表示で確認。


Visual Studio Code


エディタは基本的になんでもよいです。

今回はその場のノリで、Visual Studio Code を使ってみます。

Visual Studio Code


※画像をクリックすると拡大表示します。

起動が早いのでちょっとした開発には良さそうです。