読者です 読者をやめる 読者になる 読者になる

tkiryu’s blog

本ブログの内容は個人の意見です。所属組織の公式見解ではありませんのであしからず。

最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - npm パッケージインストール編 -

Visual Studio 2015 ASP.NET MVC npm

-- この記事は2016/10/18(Tue)現在の情報に基づいています --

この記事をざっくり言うと

  • Visual Studio 2015 に Package Installer という拡張機能をインストールする
  • Package Installer の機能で npm パッケージを簡単にインストールする
  • Webフロントエンドの開発も Visual Studio 2015 (VS Codeではない)でやるのもいいかも

という話です。

まえがき

最近のWebフロントエンド開発環境を構築するには、何を差し置いても npm がないと始まりません。コマンドプロンプト(Windows)やターミナル(Mac)で npm コマンドを打ち込んでパッケージをインストールしたりビルドしたり、一方で、Sublime Text, Atom, 最近だと Visual Studio Code などの高機能エディタを使ってコーディングするというスタイルが一般的かなと思います。自分もそのようにやっています。

ただ最近では仕事柄、Visual Studio 2015 を使って ASP.NET MVC ベースで Webアプリを作ることが多いのですが、環境構築なんかをやるときに大抵のことはGUIで設定できてしまうので、Visual Studio はやっぱり完成度高いなと使っていて思います。(当然ながらWindowsでしか動きませんし、非力なマシンだと動作が重いのがデメリットではあります。。)

なので、Visual Studio のメリットを活かして、npmのエコシステムをなるべくGUIで簡単に扱う方法はないかなと探していたところ、まさにぴったりな方法があったので、使い方や所感などを書いていきたいと思います。

準備

準備といっても大したことをするわけではなく、

Package Installer

visualstudiogallery.msdn.microsoft.com

という拡張機能Visual Studio 2015 にインストールするだけです。

npm パッケージのインストール方法

インストールが終わった後は、ASP.NET MVC のプロジェクトを作成します。

f:id:tkiryu:20161013001947p:plain

ソリューションエクスプローラーのプロジェクトを右クリック > Quick Install Package... を選択します(Package Installerを入れたことで使えるようになった機能です)。

f:id:tkiryu:20161013032952p:plain

ダイアログが表示されるので、左のドロップダウンリストから"npm"を選択します。

f:id:tkiryu:20161007232343p:plain

次に、インストールしたいパッケージ名を真ん中のテキストボックスに入力します。

試しに jQuery をインストールしてみようと"jq"まで打ち込んだ瞬間、"jquery"にオートコンプリートされました。これはスゴイ!

f:id:tkiryu:20161017062139p:plain

パッケージ名が入力されると、下に npm コマンドが生成されます。太字で表示されている部分はコマンドオプションで編集が可能です。オプション「--save-dev」は開発時にのみ使うパッケージとして package.json に書き込むオプションなので、「--save」に変更します。

f:id:tkiryu:20161017062218p:plain

しかもこのテキストボックスでは検索もでき、キーワードにマッチしたパッケージがドロップダウンリストから選択できるようになっています。

f:id:tkiryu:20161017062713p:plain

ちなみに、コマンドプロンプトでインストールする場合は、あらかじめWebでパッケージ名を調べておくか、

npm search キーワード

で検索しておかなければいけないので、それと比べるとかなりお手軽です!

さらに、右のドロップダウンからバージョンを選択します。最新バージョンの 3.1.1 を選択します。

f:id:tkiryu:20161017063134p:plain

最後に Install ボタンをクリックします。

ソリューションエクスプローラーの「すべてのファイルを表示」メニューをクリックすると、ツリーがリフレッシュされて

f:id:tkiryu:20161017063659p:plain

  • node_modules > jquery フォルダ

  • package.json ファイル

が追加されていることがわかります。

コマンドプロンプトでやる場合は、一番最初に

npm init

して予め package.json を作っておかなければいけないのですが、このツールを使えばパッケージインストールと同時に勝手に作ってくれるのですごく楽です。

今度は lodash を先ほどの要領でインストールしてみます。

f:id:tkiryu:20161011191548p:plain

"lo"と入力した途端"lodash"にオートコンプリートされ、バージョン情報も自動で取得してきてくれたものの中から選択できました。最後に Install ボタンをクリックしてインストールします。

f:id:tkiryu:20161017063939p:plain

はい、追加されました。とても簡単ですね!

※なお、複数のパッケージを同時にインストールすることもできます。その場合はスペースで区切ってテキストボックスに入力します。

package.json はこんな感じになりました。

f:id:tkiryu:20161017195703p:plain

そして極め付きはこれです!

f:id:tkiryu:20161017200041p:plain f:id:tkiryu:20161017195943p:plain

package.json を直接編集しているのですが、なんと、インテリセンスが効きます。しかも、パッケージ名も、バージョンも。こんなことできたらいいなと思っていたことが実現されていて驚愕しました。

※なお、package.json を直接編集した場合は、そのままではインストールされないので、後述のパッケージの復元の操作を行うことでインストールできます。

npm パッケージのバージョン管理システムでの管理方法

このツールによって

  • node_modules フォルダ
  • package.json ファイル

が生成されますが、Git や TFS などのバージョン管理システムで管理するのは package.json だけでOKです。

node_modules フォルダ配下のファイルたちは、package.json さえあれば簡単に復元することができます。

npm パッケージの復元方法

まず node_modules フォルダをまるごと削除してパッケージがインストールされていない状態にします。 そしてこの状態で package.json を右クリック > パッケージの復元 をクリックします。

f:id:tkiryu:20161011221236p:plain

しばらくしてツリーをリフレッシュすれば

f:id:tkiryu:20161017201348p:plain

jQuery と lodash は元通りに復元されていますし、package.json に直接追加した Material Design Lite もインストールされていることが分かります。 簡単ですね。

npmパッケージの参照方法

最後に、インストールしたnpmパッケージの参照方法についてです。

今回のように、インストールしたパッケージがビルド不要なものであれば

~/node_modules/material-design-lite/material.css
~/node_modules/material-design-lite/material.js
~/node_modules/jquery/dist/jquery.js
~/node_modules/lodash/lodash.js

という Path で cshtml や BundleConfig.js からそのまま参照することができます。

まとめ

率直な感想として、Package Installer を使うと npm パッケージをインストールするのがかなり楽になりました。コマンドプロンプトからだとたまにカレントフォルダを間違えていたりするのですが、Visual Studio の場合はプロジェクトフォルダ内で閉じているので気にしなくてよかったり、やっぱりGUIで操作できるのは大きいです。さらには package.json 直接編集でもインテリセンスが効くという凄さ。これだけでも十分にフロントエンドの開発を Visual Studio 2015 で行うメリットがあるように感じます。

サーバーサイドも ASP.NET MVC で開発、デプロイも Azure に、という場合は Visual Studio だけで全て完結するので、理想的な開発環境だと言えそうです。

今回はパッケージのインストールについてしか言及しませんでしたが、最近のフロントエンド開発ではほとんどの場合ビルドが必要になり、このビルド環境を構築するのが難しかったりします。

次回はビルドについて書いてみようと思います。