albatrosary's blog

UI/UXとエンタープライズシステム

Surface Pro 4買ったので、Web開発者に必要なツールをひと通り入れた

エンタープライズ的な的な仕事上、Windowsマシンが欲しかったので、いい時期でもありSurface Pro 4を購入した。メインはMac Book Proだがセカンドマシンとして威力を発揮してくれるのではと期待しての購入です。 仕事は基本的にエンタープライズWeb的な仕事がほとんどで、それなりにモダンWeb開発に必要なツールは入れとかないとという感じです。インストールしたものはこれです。

  • git bash
  • python2.7
  • Ruby
  • Visual Studio 2015 Community
  • Windows 10 SDK
  • nodist
  • nodejs
  • yo grunt-cli bower gulp live-server
  • Visual Studio Code

準備

買ったら普通にパスワードとか設定します。Windows10ではパスワードとは言わずPINと呼んでいます。Windows10、特にSurface Pro 4はタッチパネルで画面操作できるのが良いと思い、画面を購入時の状態ではなく「タブレットモード」にしました。好みの問題です(下記画像はイメージ)。

こちらが通常 f:id:albatrosary:20160217192645p:plain

こちらがタブレットモード f:id:albatrosary:20160217192755p:plain

これは[設定]-[システム]にあるタブレットモードで変更できます。

git bashのインストール

何はともあれWindowsマシンを利用するときに、必ず入れるのはこれ。

git-for-windows.github.io

exeをダウンロードしてインストールしますが設定が少しあります。重要なのが「Configuring the line ending conversions」でCheckout as-is, commit Unix-style line endingsを選択してます。

だいぶ前にもブログにしているのでこちらを参考にしてください

Windows で git(and github) を利用する - albatrosary's blog

ちなみにこちらでも同じexeが落ちてきます。

http://git-scm.com/

python2.7

python2.7をインストールします。npmライブラリの一部でpythonを利用していますので必須です(3系使わず2系)。

www.python.org

インストール出来たらPATHを追加しておきます。インストーラーなんだからやってくださいよと思うのだが自力で書き込みます。

Ruby

Sassコンパイルとかで利用されるRuby(安定版)も入れます。三種類インストーラーありますがRubyInstallerを使ってます。

RubyInstaller for Windows

こちらはパスの設定はインストーラーからできる

Visual Studio 2015 Community

MACでXcode、WindowsでVisual Studioって感じです

Visual Studio Community - Visual Studio

オプションのインストールに関してはnode-gypがコケまくる対策でこちらを見て下さい

github.com

node-gypの条件はWindows10の場合は下記で「Visual C++ チェック忘れるな」ということ。

  • Install the latest version of npm (3.3.6 at the time of writing)
  • Install Python 2.7
  • Install Visual Studio Community 2015 Edition. (Custom Install, Select Visual C++ during the installation)
  • Set the environment variable GYP_MSVS_VERSION=2015
  • Run the command prompt as Administrator
  • $ npm install (--msvs_version=2015) <-- Shouldn't be needed if you have set GYP_MSVS_VERSION env

WIdows 10 SDK

これも入れておこう

Windows 10 SDK – Windows アプリ開発

nodist

MACでnodejs入れるときにnodebrewで入れたように、WIndowsではnodistを入れます。こちらを参考にしてください

WindowsのnodistはMACでいうところのnodebrewみたいなの - albatrosary's blog

nodejs

nodistからnodejsを入れます。上記記事にしたがいます。

yo grunt-cli bower gulp live-server

基本的なnpmライブラリを入れます。

npm i yo grunt-cli bower gulp live-server -g

これ以外にもいつも利用するyeomanジェネレータは入れてます。

他あれば適当に。

Visual Studio Code

最後にエディタですが、最近は「Visual Studio Code」を利用しています。アプリ組むのに色々と便利なので。インストールに関してはこちらを見て下さい(MAC版ですが内容はあまり変わらないです)。

Visual Studio Codeをインストールしてみた - de:codeに感化されている今日このごろ - albatrosary's blog

最後に

といった感じでようやく開発環境もでき色々と評価できそうです。Windows10のHomeエディション以外にはHyper-Vがついています(と教えてもらった)。

Windows 10 エディションの比較

仮想環境を作りたければこちらを利用。

これ以外にも細かいのはそれぞれありますが、必要最低限ということでこれだけのものは必ず入れてます。ブラウザはChrome, Firefoxと入れてます。