Visual StudioでのASP.NET Coreアプリ開発におけるクライアントサイドライブラリの導入はLibManが便利
ウェブアプリケーションのクライアントサイドの開発には様々なライブラリを使用します.
- jQuery
- Bootstrap
- Chart.js
などなど,必要に応じてCDNから取得したりするわけですが,CDNを使わない場合だってあって,その場合はローカルにこれらのライブラリをダウンロードして配置したりします.
これは結構手間がかかる作業です.
Visual StudioはNuGetによる.NETライブラリのインストールだけでなく,Webアプリケーションのクライアントサイドで使用される様々なライブラリの導入を簡単にしてくれる機能が用意されています.
このクライアントサイドライブラリの導入,管理を簡単にしてくれるのがLibManです.
LibManはVisual Studioの標準の機能で,何かをインストールや設定する必要なくすぐ使えます.
環境
- 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なしでは生きていけない体になってしまいました.
git logをツリー表示する git log --graph
git log --graphでツリー表示できる。
null合体(??)とnull合体代入(??=)とnull条件(?.または?[])
Null合体演算子
左辺がNullだったら右辺を返す.
string? s = null; var s1 = s ?? "this is null1"; Console.WriteLine(s1);
Null合体代入演算子
左辺がNullだったら右辺を左辺に代入する.
string? s = null; s ??= "this is null2"; Console.WriteLine(s);
これは,これまで以下のように書いていた処理を置き換えることができる
string? s = null; s = s ?? "this is null2";//もしNullだったら代入する. Console.WriteLine(s);
Singletonやキャッシュ用途として便利.
Null条件演算子
メンバーへのアクセスとコレクションの要素へのアクセスに対して,そのオブジェクトがNullではない場合に限りメンバー,または要素へのアクセスを行うようにする演算子.
そのオブジェクトがNullだった場合は,メンバーや要素にアクセスせずにNullを返すのでNull参照例外が発生しない.
Visual Studioで警告もエラーとして扱うようにする
警告は出ていたとしてもビルドは通るし実行もできる.
しかし,だからといってそれで良いというわけではなく,実行に問題はないとしてもパフォーマンスに影響があったり,バグの原因になったりするため,修正するべきもの.
この警告を厳密に許可しないようにするには,プロジェクトのプロパティで｢ビルド｣タブ内の｢警告をエラーとして扱う｣オプションを有効にする.
コマンドラインから.NETソリューションを作ってプロジェクトを追加する
コマンドラインからプロジェクトを作成する方法は以下で書いた.
上記の記事ではプロジェクトファイルを作成して実行していたが,多くの場合はソリューションを作成して,その中にプロジェクトを作成していくと思う.
今回はソリューションを作成し,その中にプロジェクトを追加していく手順を書く.
ソリューションの作成
dotnet new sln -o ソリューションフォルダ名
プロジェクトの作成
作成したソリューションフォルダに移動し,以下のコマンドを実行する. 例としてコンソールプロジェクトを作成する.
dotnet new console -o TestConsole
プロジェクトをソリューションに追加する
これだけだと,ソリューションファイルをVisual Studioで開いても空のソリューションのまま.
プロジェクトをソリューションに追加するためには,以下のコマンドを実行する. ソリューションフォルダ直下にいるものとする.
dotnet sln add プロジェクト名(もしくはそのプロジェクトのcsprojファイルへのパス)
これでソリューションファイルにプロジェクトが追加され,Visual Studioで開いたときにソリューション内にプロジェクトが表示される.
コマンドラインでC#プログラミング[引越記事]
はじめに
C#でプログラミングをする場合、Visual Studioは非常に便利で強力な開発ツールです。しかしながら、例えば、ネット上のコードスニペットをちょっと実行してみたいときとか、ちょっとした処理をさせるための数行のアプリケーションを作成したいとき、Visual Studioはちょっと重いですし、Visual Studioが使えない環境での開発もあります。 そんなとき、コマンドラインからプロジェクトの作成やコンパイル、実行ができればとても便利です。
環境
.NET SDKのインストール
Visual Studioで.NET開発のワークロードをインストール済みであれば.NET Coreや.NET Frameworkの開発環境がすでにインストールされていると思います。
開発環境がインストールされているかどうかは、コマンドラインから以下のように確認できます。 バージョン番号が表示されればOKです。
> dotnet --version 2.1.403
dotnetなんてコマンドは無いよ、って言われた場合はVisual Studioをインストールするか、.NET SDKをインストールしましょう。
Microsoftのこちらのページはコマンドラインからプログラミングをするチュートリアルになっていて、.NET SDKのインストールから実行までの手順が書いてあります。
書いてあるのですが、解説を続けます。
プロジェクトを作ろう
dotnet newコマンドでプロジェクトを作成します。プロジェクトを作成するとき、プロジェクトのフォルダを作ってそのフォルダ内でdotnet new プロジェクトテンプレートとするか、
> cd TestApp > dotnet new console
またはdotnet new プロジェクトテンプレート -o プロジェクト名として、プロジェクト作成時にフォルダを指定するかです。
> dotnet new console -o TestApp
先のチュートリアルでは後者の方法ですね。どちらでも良いです。
プロジェクトフォルダの中に、このようなファイルやフォルダが生成されます。
プロジェクトテンプレート
上の例ではコンソールアプリケーションのテンプレートを指定しています。 Visual Studioでアプリケーションを作るときは「WPFアプリケーション」や「コンソールアプリケーション」、「ASP.NET Core」など作成したいアプリケーションの種類に応じてテンプレートを選択しましたが、それを文字で指定しています。 他にどのような種類があって、指定するための文字列は何でしょうか。
テンプレートの種類と指定に使う文字列表現
以下のコマンドを入力すると、テンプレートの一覧を見ることができます。
> dotnet new -h
テンプレート 短い名前 言語 タグ ---------------------------------------------------------------------------------------------------------------------------- Console Application console [C#], F#, VB Common/Console Class library classlib [C#], F#, VB Common/Library Unit Test Project mstest [C#], F#, VB Test/MSTest NUnit 3 Test Project nunit [C#], F#, VB Test/NUnit NUnit 3 Test Item nunit-test [C#], F#, VB Test/NUnit xUnit Test Project xunit [C#], F#, VB Test/xUnit Razor Page page [C#] Web/ASP.NET MVC ViewImports viewimports [C#] Web/ASP.NET MVC ViewStart viewstart [C#] Web/ASP.NET ASP.NET Core Empty web [C#], F# Web/Empty ASP.NET Core Web App (Model-View-Controller) mvc [C#], F# Web/MVC ASP.NET Core Web App razor [C#] Web/MVC/Razor Pages ASP.NET Core with Angular angular [C#] Web/MVC/SPA ASP.NET Core with React.js react [C#] Web/MVC/SPA ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA Razor Class Library razorclasslib [C#] Web/Razor/Library/Razor Class Library ASP.NET Core Web API webapi [C#], F# Web/WebAPI global.json file globaljson Config NuGet Config nugetconfig Config Web Config webconfig Config Solution File sln Solution
このリストの2列目の「短い名前」というのが、テンプレートを指定するときに使う名前になっています。 試しに「ASP.NET Core Web App(Model-View-Controller」のプロジェクトを作成してみましょう。テンプレート名は「mvc」ですね。
> dotnet new mvc -o TestMVC
プロジェクトの生成が完了したらTestMVCフォルダに移動して、ファイルやフォルダが作成されていることを確認してください。
実行しよう
プロジェクトを実行するにはシンプルに以下のコマンドを使います。 プロジェクトのビルドが行われ、実行されます。
> dotnet run
コマンドラインにHello World!と表示されるはずです。
ビルドのみはこちら
ビルドのみはdotnet buildです。
> dotnet build
プログラミング
プログラミングは好きなテキストエディタを使いましょう。メモ帳だってかまいませんが、Visual Studio Codeなどの高機能なテキストエディタのほうがプログラミングしやすいと思います。
さしあたり、プロジェクトフォルダ内のProgram.csを開きましょう。
メモ帳：
Visual Studio Codeのほうがハイライトされて見やすいのでおすすめです。 というようにお好きなテキストエディタでプログラムを編集して、保存したのちに前述の方法で実行すれば良いです。
追記(2018.10.18)： Visual Studio Codeを使うと便利と書きましたが、拡張機能を入れることによって開発がさらに便利になります。書くだけではなく、ソースコードの整形やブレークポイントを使ったデバッグなどについてはこちら。
.NET Coreアプリはわかった。だが.NET Frameworkアプリはどうだ？
Windowsであれば、.NET Frameworkを使うこともできます。 その場合、プロジェクト生成の際にフレームワーク指定してやります。
> dotnet new console --target-framework-override フレームワーク名
フレームワーク名はこちらにあるように、種類、バージョンごとに指定に用いる文字列が決まっています。 例えば「.NET Framework 4.6.0」を使いたいのであれば、「net46」をフレームワーク名として使用します。
> dotnet new console --target-framework-override net46 -o TestApp4
こうして作られたプロジェクトは.NET Framework 4.6.0で使えるAPIを使ってプログラムを作成することができます。 左は.NET Coreで、右が.NET Framework 4.6.0です。
System.Drawing.Imageクラスは.NET Coreには含まれていないため、コンパイルエラーになりますが、.NET Framework 4.6.0を使っているほうはコンパイルがとおります。
おわりに
長くなってしまいましたが、コマンドラインから.NETアプリケーションを開発する手順です。 ちょっとコードを動かしてみたいなどの使い方はもちろんのこと、Visual Studio Codeなどの高機能エディタを活用することでそれなりのボリュームのアプリケーションを開発することも可能です。
Chocolateyでパッケージ管理をする
Chocolateyのインストール
公式サイトの以下のページにインストール手順が書いてある.
Powershellを使ってインストールする.
Powershellを管理者モードで起動する.
以下のコマンドを実行する.
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))]
これでインストール完了.
chocoコマンドを実行して以下のように表示されたらインストール成功.
PS > choco Chocolatey v0.10.15 Please run 'choco -?' or 'choco <command> -?' for help menu.
パッケージ(アプリケーション)のインストール
インストールしたいパッケージが提供されているかを確認するにはchoco list パッケージ名を実行する.
パッケージ名に指定した文字列を含むパッケージのリストが表示される.ここではchromeを探してみる.
PS C:\WINDOWS\system32> choco list googlechrome Chocolatey v0.10.15 GoogleChrome 77.0.3865.90 [Approved] Downloads cached for licensed users Vivaldi 2.7.1628.30 [Approved] Downloads cached for licensed users GoogleChrome.Dev 27.0.1453.12 [Approved] GoogleChrome.Canary 28.0.1461.0 [Approved] GoogleChrome-AllUsers 26.0.1410.64 googlechrome-authy 2.3.0 [Approved] googlechrome-zenhub 1.0.0 [Approved] googlechrome-github-expandinizr 1.0.0 [Approved] 8 packages found.
対象のパッケージをインストールする.インストールにはchoco install パッケージ名を実行する.
PS > choco install googlechrome.canary Chocolatey v0.10.15 Installing the following packages: googlechrome.canary By installing you accept licenses for the packages. Progress: Downloading GoogleChrome.Canary 28.0.1461.0... 100% ...
パッケージのアップデート
choco upgrade パッケージ名
choco upgrade all
パッケージのアンインストール
choco uninstall パッケージ名
インストール済みのパッケージのリストを取得する
choco list -l
-lはlocalonlyの意味.
PS > choco list -l Chocolatey v0.10.15 chocolatey 0.10.15 chocolatey-core.extension 1.3.3 GoogleChrome 77.0.3865.90 GoogleChrome.Canary 28.0.1461.0
こちらのブログがとても詳しい.
