Visual Studio 2013 で Bower を使う【準備編】
クロスワープの大鷲です。
Visual Studio の次期バージョンである Visual Studio 2015 の開発が着々と進んでいます。
現在は CTP6 というバージョンがダウンロードできるようになっていますが、まだ実運用環境での利用はサポートされておらず、製品の早期評価目的にのみ利用できます。
VS2015 では、ASP.NET MVC と Web API が統合されたり、Linux でも動くようになったりと、ASP.NET が大きく変わります。
変更点の一つに、Bower や Grunt、npm といったデファクト スタンダードな仕組みのサポートが挙げられています。
私はまだ 2015 を評価することができていませんので、2013 環境でこれらを試してみたいと思います。
Bower とは？
Bower とは、フロントエンド ライブラリのパッケージ マネージャーです。
フロントエンド ライブラリとは、主に JavaScript や CSS を中心とした、ブラウザ上で動くライブラリのことです。
たとえば jQuery や Bootstrap などが代表的なフロントエンド ライブラリにあたります。
敢えて対義語を挙げるならバックエンド ライブラリで、これは ASP.NET の場合、dll で提供され、Web サーバー上で動くものになるでしょう。
Visual Studio にはおなじみ NuGet というパッケージ マネージャーがあります。
現在は、jQuery や Bootstrap も、dll で提供されるバックエンド ライブラリも、NuGet で提供されています。
個人的には、VS2015 で Bower がサポートされるようになったからと言って、すぐに NuGet でのフロントエンド ライブラリの提供が止まるとは思いません。
が、VS の外の世界で広く使われているテクノロジーを知っておくことはメリットになります。
VS2015 以降では主流になると考えられますし、インターネット上に資料が豊富にあるという点も見逃せません。
サーバーサイドが ASP.NET だろうが Ruby だろうが PHP だろうが、フロントエンド ライブラリの使い方はだいたい共通だからです。
他にも、JavaScript ではなく TypeScript で書きたいとか、CSS の代わりに Sass を使いたいといった場合にも、VS 専用のツールを導入することなく対応できます（もちろん、専用ツールには専用ツールなりの良さがありますが）。
Bower を使う準備
npm のインストール
まず、Bower をインストールする必要があるのですが、そのためには npm が必要です。
npm は Node Package Manager の略で、元々は node.js というサーバーサイド JavaScript（ブラウザ上ではなく Web サーバー内で JavaScript を動かして Web アプリ等を作る仕組み）のための、これもパッケージ マネージャーです。
サーバーサイド用なのでどちらかと言えばバックエンド パッケージ マネージャーです（でした）。node.js 用の NuGet のようなものです。
今回はサーバーサイドは ASP.NET なので node.js は使いませんが、npm は便利なので node.js を使わない局面でも多用されます。
というわけで、まず node.js の公式サイトからインストーラーをダウンロードして実行しましょう。現在の最新版は v0.12 です。
npm のアップデート
npm は node.js とは独立してアップデートされます。
そこで、npm を最新版にしておきましょう。
現在の（node.js v0.12 と同時にインストールされた）npm のバージョンは、コマンド プロンプトを起動して、
npm
と打つと確認できます。
npm コマンドの使い方の説明の下に
npm@2.5.1 C:\Program Files\nodejs\node_modules\npm
と表示されるはずです（npm コマンドが見つからない場合は、PC から一旦ログオフして再ログオンしてみてください）。
npm を更新するには、コマンド プロンプト上で
npm install -g npm
と入力します。
npm install というのは npm を使ってパッケージをインストールするコマンドで、-g オプションはそれを現在のディレクトリではなく、マシン全体で利用できるようにインストールするものです（後程、詳しく説明します）。
インストールが完了すると、
npm@2.6.1 C:\Users\owashi\AppData\Roaming\npm\node_modules\npm
と表示されます。
v2.6.1 がインストールされたようですね。確認してみましょう。再度
npm
を実行します。すると
npm@2.5.1 C:\Program Files\nodejs\node_modules\npm
結果が変わっていません。どうしてでしょうか。
実は、Windows プラットフォームでの npm の更新には問題があります。
Windows で npm を更新する
npm
と叩いただけで実行できるのは、node.js のインストール時に、npm のパスが環境変数 PATH に登録されているからです。
node.js と一緒にインストールされる npm は、標準では
C:\Program Files\nodejs
にあります。
一方、
npm install -g npm
でインストールされる npm は
C:\Users\owashi\AppData\Roaming\npm
に置かれます。
どちらのパスも環境変数 PATH に登録されますが、前者はシステム環境変数、後者はユーザー環境変数に登録されます。
Windows の仕様上、環境変数 PATH は、システム環境変数の後にユーザー環境変数が連結されます（セキュリティ上の理由だと思います）。
npm の実行時には、連結された内容を先頭からチェックしてくるので、常にシステム環境変数に登録された Program Files の方の npm が実行されてしまうわけです。
この問題は npm の開発チームも認識していて、対策が公開されています。
Upgrading on Windows
方法は3つ公開されていますが、ここでは Option 2 として挙げられている方法を採ります。
C:\Program Files\nodejs 下にある npm と npm.cmd を削除します。node_modules も要らないので消してしまいましょう。
なお、削除は必ず
npm install -g npm
をしてから行ってください。
C:\Users\owashi\AppData\Roaming\npm
に npm がない状態で削除すると、npm が使えなくなってしまいます（間違えて消してしまったら node.js を再インストールしてください）。
削除してから、再度
npm
を実行すると、
npm@2.6.1 C:\Users\owashi\AppData\Roaming\npm\node_modules\npm
と表示されます。
これで、最新の npm が使えるようになりました。
Bower のインストール
npm の準備に紙幅を割き過ぎました。
本題に戻って、Bower をインストールしましょう。
コマンド プロンプト上で
npm install -g bower
と叩きます。
特にエラーが出ず、表示が崩れたツリーのようなものが出れば、インストールは成功しています。
現在（グローバルに）インストールされている npm パッケージの一覧は
npm list -g
で出せますが、これでは依存パッケージの内容まですべて表示されてしまって煩雑なので、
npm list -g -depth 0
とするのがお勧めです。
C:\Users\owashi\AppData\Roaming\npm ├── bower@1.3.12 └── npm@2.6.1
Bower がインストールできたことが確認できました。
git のインストール
最後に、Bower を使うのに必要な git をインストールします。
Git for Windows のページから最新版をダウンロードしてインストールしましょう。
目の前にある Download ボタンをクリックしてください（ページの下の方にある msysGit ではありません）。
インストール時のオプションですが、4 ページ目で「Use Git from the Windows Command Prompt」、5 ページ目で「Checkout as-is, commit as-is」を選択するのが良いと思います。
5 ページ目の改行コードオプションは、Windows 利用者と Linux や Mac の利用者が混ざったチームだと問題を引き起こすようで、Windows 利用者はしばしば邪魔者扱いされます。
でも、Visual Studio で ASP.NET 開発をしているのなら、きっとみんな Windows 利用者なので、問題にはならないでしょう（暴論）。
コマンド プロンプトを開いて、
git version
と打ってみましょう。
git version 1.9.5.msysgit.0
と出たら、インストールは成功です。
おわりに
必要なツールが一通りセットアップできたところで、一旦記事を締めたいと思います。
Bower の利用は次回書きます。
最後までお読み頂き、ありがとうございました。
