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

Autodidact

主にASP.NET Core、C#等関連の独学用メモ

ASP.NET Core MVCサンプルの構成

おもむろに始まるお勉強ブログです。
.NET Core周辺、主にASP.NET Core MVCをお勉強する試み。
知識は無く、意識も低く、内容も保障できません。

とりあえずASP.NET Core MVCのサンプルを眺める1回目です。

Webアプリケーションプロジェクトの新規作成

新しいプロジェクト >.NET Core >ASP.NET Core Webアプリケーション(.NET Core)を選択。
Coreなのにターゲットフレームワーク4.5.2が選択されているのが違和感ですが無視。

ASP.NET Core 1.1を選択し、Webアプリケーションを選択してOKボタン。
サンプルを眺めるのが目的なので「空」ではなく、Webアプリケーションを選択します。

勝手に色々含まれたサンプルサイトが作成されます。
実行すると普通にWebサイトが表示されます。

習うより慣れろということでファイルを上から順に見てみます。

Connected Services

接続済みサービスが表示されるようです。
デフォではApplication Insightsが表示されています。
とりあえずスルー。

Properties\launchSettings.json

開発サーバ環境情報が記載されたjson設定ファイル。

Webアプリケーションプロジェクトのプロパティページで、
プロパティや起動、SSLや認証等を変更すると反映されます。

wwwroot

css, image, js, lib, faviconと静的コンテンツ置き場。
アクセスパスとしてはwwwrootフォルダ配下ではなく、
root階層で参照されます。

例えば、
\samplesite\wwwroot\css\site.css
ならば、
http://localhost:777/css/site.css
となります。

Startup.csのConfigureメソッド内で、

app.UseStaticFiles();

っと呼び出してるところでその辺設定されているようです。
wwwrootが未指定時既定値となります。

物理階層とリクエストパスが一致しない場合のアサインや、
静的コンテンツのキャッシュ保持期間等ヘッダ情報の追加が必要な場合に
思い出せればいいようです。

Working with static files in ASP.NET Core | Microsoft Docs

続いてwwwroot配下の各フォルダを見てみます。

wwwroot\css\site.css

CSSです。後述するbundleconfig.jsonでBundle(圧縮みたいなの)指定されています。
ビルド時はBundleによってsite.min.cssと小さく読みにくい形になります。

元から圧縮されてる場合もあるし必要なのかな?って気がしますが、

wwwroot\images\banner1.svg~4.svg

.svg??何?って感じですが、
開いてみるとよくわからないXMLで何か指定されています。

Wikipedia先生によれば、画像のVectorデータのようです。
Scalable Vector Graphics - Wikipedia

画面のサイズに関わらずキレーに画像を表示したりするみたいです。
とりあえずそういうものだと理解しておきます。

wwwroot\js\site.js

javascriptです。サンプルでは何も記述はありません。
cssと同様にBundleによって圧縮されます。

wwwroot\lib

bootstrap、jquery3つが入ってます。

bootstrapはレスポンシブデザインのCSSフレームワークです。
他bootstrapが必要とするものが色々格納されています。

jqueryは知る人ぞ知るjQueryです。

これも後述\Views\Shared\_Layout.cshtmlで参照されてますね。

あまり深く考えずに次々眺めていきます。
favicon.icoはアドレスバーやタブに表示されるサイトアイコンです。

Controllers

MVCのCです。
サンプルではHomeControllerしかありません。
またMVCのM、Modelも特にCRUDが無いためか作られていません。
(認証設定した場合は作られるかもしれません)

Views

MVCのVです。
HomeControllerに対応するHomeは以下のView達と、
共通部分のShared配下のView達があります。

Shared配下のViewだけ何となく名前で意味がわかりますが、
一応中身をみてみます。

Views\Shared\_Layout.cshtml

共通レイアウトとなるViewです。Webフォームで言うMaster。
Views\_ViewStart.cshtmlでLayout指定されています。

Views\Shared\_ValidationScriptsPartial.cshtml

開発環境、ステージング/リリース環境で検証用jQueryを分けてる部分Viewですが、
どこから指定されてるんだろう?
ってサンプルには指定が無いみたいですね。入力するページが無いし。
検証が必要な時は読み込めばよろしいのでしょう。

Views\Shared\Error.cshtml

Startup.csで指定されてるステージング/リリース環境用エラーViewです。

View\_ViewImports.cshtml

そういう名前で決まってるView用インポート的な共通Viewです。
サンプルでは自身の名前空間と、
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
でTag Helperを指定しています。

Tag Helperってのはタグに指定されている謎の属性たちです。
_Layout.cshtmlのタグ内にasp-なんとかっていうHTMLっぽくない
謎の属性がたくさん指定されていますがそいつらの事です。

<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>

asp-controller,asp-action等のことです。
HomeControllerのIndexアクションへの遷移って
何となくわかりますね。

View\_ViewStart.cshtml

View開始時によみこまれる約束なViewです。
サンプルでは上述の共通レイアウトView、_Layout.cshtmlを指定しています。

appsettings.json

設定ファイル的jsonファイルです。
Web.configはさようならなのでしょう。

bower.json

弓とは関係なく東屋、木陰、休息所という和訳です。
ググってみるとフロントエンド用のパッケージマネージャとのこと。
クライアントサイド向けNuGet的なものみたい。

ソリューションエクスプローラーの依存関係配下に指定があります。
Bower配下でbootstrap、jQueryが管理されていて、
NuGet配下でAspNetCoreやMVCに必要な参照が管理されているみたい。

bundleconfig.json

いつの間にか追加された機能Bundleの設定。
cssやjsをまとめて小さくしてくれます。

Program.cs

メソッドチェーンで色々呼ばれてますが一旦は気にしません。

Startup.cs

開始時に実行されるお約束クラスです。
さようならGlobal.asaxなのでしょう。

設定とかサービスとかエラーハンドリングとか。
MVCで大切なroutingもここですね。


これで一通り目を通したつもりになっておきます。
深く考えずにスルーしてる部分も多く、勘違いもあると思うのですが、
細かいことはこれから勉強できたらいいなって感じです。つづく。