ウェブアプリケーションのクライアントサイドの開発には様々なライブラリを使用します.

• jQuery
• Bootstrap
• Chart.js

などなど,必要に応じてCDNから取得したりするわけですが,CDNを使わない場合だってあって,その場合はローカルにこれらのライブラリをダウンロードして配置したりします.

これは結構手間がかかる作業です.

Visual StudioはNuGetによる.NETライブラリのインストールだけでなく,Webアプリケーションのクライアントサイドで使用される様々なライブラリの導入を簡単にしてくれる機能が用意されています.

このクライアントサイドライブラリの導入,管理を簡単にしてくれるのがLibManです.

LibManはVisual Studioの標準の機能で,何かをインストールや設定する必要なくすぐ使えます.

docs.microsoft.com

環境

• Visual Studio 2019 16.4 preview1
• Windows 10 pro 1903

ライブラリのインストール

ASP.NET Core WebApplicationのプロジェクトを作成してあることを前提とします.

ソリューションエクスプローラのプロジェクト名の上で右クリックしてコンテキストメニューから追加→クライアントサイドライブラリ(Client-Side Library)を選択します.

以下のウィンドウが表示されます.ここから導入したいライブラリを検索して選択するだけで,プロジェクトにライブラリを導入し,管理することができます.

試しにグラフを描画するjavascriptライブラリのChart.jsを導入してみましょう.

先程のウィンドウのLibraryの欄にchartとでも入力してみてください.

このように候補が表示されるので,目的のChart.jsを選択します.

すると,以下のようにインストールするライブラリのバージョン(デフォルトでは最新バージョン)と含まれるファイル群,インストール先のpathが表示されます.

これでよければInstallボタンを押します.

指定のpathにファイル群が配置されていることがわかります.

柔軟な指定が可能

最新版ではなく特定のバージョンをインストールしたい場合は,以下のようにLibrary欄のバージョン部分を編集すると候補が表示されるので,そこから選択することができます.

また,お気づきとは思いますがそのライブラリに含まれるファイル群から特定のファイルだけを選択して導入することもできます.

このように,とても簡単かつ柔軟に導入することができます.

管理情報と復元,削除

先程のウィンドウ経由で導入したライブラリの情報はソリューションエクスプローラのプロジェクトフォルダの直下に作成されるlibman.jsに記載されます.

これを開くと,以下のようにVS経由で導入したライブラリの情報がJSON形式で記載されていることがわかります.

ここに記載されている情報に従ってライブラリをリストアすることができます.

例えば,以下のようにバージョンを変更したい場合,このJSONファイルを直接編集するとしましょう.

便利なのはここでもバージョンの候補が表示されることです.バージョンどころかライブラリからして候補が表示されます.

変更したらlibman.jsonを保存します.今回は2.7.0を選択しました.

ソリューションエクスプローラでlibman.jsonを右クリックしてコンテキストメニューを表示させます.

コンテキストメニューにはRestore Client-Side Library,Clean Client-Side Library,Enable Restore Client-Side Library on Buildといった項目が含まれています.

これらの項目を選択することによって,このlibman.jsonの内容に従ってライブラリの復元やクリアなどができます.

Restore Client-Side Libraryを選択してみましょう.Chart.jsファイルを開いてみるとバージョンが2.7.0に変わっていることが確認できます.

Clean Client-Side Libraryを実行すると,導入したライブラリのファイル群がプロジェクトから削除されます.

Restore Client-Side Libraryすれば元通りです.

不要と判断したライブラリはlibman.jsonから削除してしまえば復元もされません.

npmパッケージの導入･管理もできる

javascriptやcssのライブラリだけではなく,npmパッケージの導入･管理も同じようにできます.

先程のウィンドウでProviderの項目でunpkgを選択します.

例えば,SignalRを使う場合にはクライアント側にMicrosoftが提供するsignalrというnpmパッケージが必要なのですが,これをインストールしてみましょう.

@microsoft/signalrと入力すると,先ほどと同じように候補が表示されますね.

あとは同じように導入･管理することができます.

おわりに

とても便利なクライアントサイドライブラリLibManですが, あまりに便利すぎて更にVisual Studioなしでは生きていけない体になってしまいました.