1.ASP.net core とは?
Microsoftが出しているWebフレームワーク「ASP.net」が
.net coreに対応したものです。
つまり、MacやLinuxに対応したものです。
・ ASP.netとの比較
https://www.fenet.jp/dotnet/column/environment/1344/
上記サイトによると
Core はVB.net, Webフォームに非対応
様々なOS, 開発環境に対応
とのことで、モダンな開発になったイメージがあります。
(すみませんASP.netをやったことがないため、本当の違いがよくわかりません...)
・なぜASP.net coreを?
業務でC#を使用しているため、C#でWebをやってみたいと思った。
.net frameworkは5.0からcoreと統合されるため
今から始めるなら5.0 (.net core)に対応した
ASP.net coreの方がよいかなと思った。
また、最近はSPA(シングルページアプリケーション)を作成するようになり
ページ読み込み時に大量データを処理するため
バックエンドはコンパイル言語の方が、通信早いかなーと
直感的に思ったため。
(実際はどうかわかりません。詳しい方いましたら教えてください。)
2.このシリーズの予定
・まずはRazorテンプレートを用いて
MVC(Model-View-Controller)アプリケーションを作成します。
(Razorを使わないMVCもありますが、するかは今のところ未定)
・MVCが出来たら、SPAを作成します。
使用するフロントエンドのフレームワークは、Reactを予定しております。
(普段はVueをメインで使っているが、ASP.net coreはなぜかVueに未対応...)
・最後にBlazorを用いたSPAを予定しております。
3.Webアプリケーションの作成開始
以下のような1行掲示板を作成してみる。
昔よくあったCGI掲示板(チャット?)を令和のWebアプリケーションで
復元してみようと思う。
プロジェクトの作成
早速ASP.net coreのプロジェクトを作成してみます。
Visual Studio(今回は2019 バージョン16.8.3)でプロジェクトを作成します。
新しいプロジェクトを作成
「C#」「Web」を選択して
「ASP.NET Core Webアプリケーション」を選択します。
ちなみに...
「Visual Basic」ではやはり出来なかった!
プロジェクト名と保存先を指定して、プロジェクトを作成します。
ASP.NET Coreのバージョンを選択して(今回は5.0)
「ASP.NET Core Wepアプリ」を選んで作成します。
これでプロジェクト作成が出来ました。
試しにデバッグボタンを押してみましょう。
ブラウザが自動で立ち上がり
ASP.net coreのサンプルページが表示されました。
4.実装
実装はMicrosoftのチュートリアルに沿って作成しています。
また、ここからはWebアプリおよびC#の知識がある前提で書きます。
わかりづらい箇所や、変な書き方があったらコメントお願いします。
Modelの作成
はじめに、掲示板のデータを操作するためのModelを作成します。
投稿コメントを表すModelの Writingクラスを作成します。
Writingクラスには4つのプロパティを入れます。
・ID: データベースのキー
・Name: 投稿者名
・Comment: 投稿内容
・PostDate: 投稿日時
プロジェクトに「Model」フォルダを作成し、「Writing.cs」というクラスを作成しします。
「Writing.cs」に以下プロパティを書きます。
using System;
using System.ComponentModel.DataAnnotations;
namespace RasorSample.Model
{
public class Writing
{
//データベース上のキー
public int ID { get; set; }
//投稿者名
public string Name { get; set; }
//投稿内容
public string Comment { get; set; }
//投稿日時
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
}
}
ちなみにintのプロパティを最初に定義しないと
「HasNoKey」というエラーが出て、後述のスキャフォールディングが出来ません...
作成したら、Webアプリのスキャフォールディング(Scaffolding)作成します。
スキャフォールディングは「足場」という意味だそうで、
この場合はWebサイトの骨組み・ひな型みたいなものが出来ます。
Pagesフォルダに「BBS」というフォルダを作成します。
(フォルダ名は、Modelで作成したクラスと別の名前にしてください。)
「BBS」を右クリックして
「追加」->「新しいスキャフォールディングアイテム」を選択します。
「Entity Frameworkを使用するRazorページ(CRUD)」を選択して追加します。
「モデルクラス」をプルダウンして、先ほど作成したWritingクラスを選択します。
「データコンテキストクラス」の「+」をクリックして、データコンテキストクラスを作成します。
(このクラスがよくわからないのですが、恐らくデータを扱うためのクラスなのだと思います。)
(エラーが出た場合)
プロジェクトのプロパティを開き、
パッケージで「Nugetパッケージを作成」にチェックします。
スキャフォールディングが出来たら、Modelに合うデータベースを
マイグレーションします。
Nuget パッケージマネージャーを開き
Add-Migration InitialCreate
Update-Database
と入力します。
(1行ずつしか処理されないため、1行ずつ入力します。)
これでWebアプリケーションの骨組みはできました。
5.動かしてみた
プロジェクトをビルドして、Webアプリを見てみましょう。
ブラウザが立ち上がり、localhostメインページが出るので
アドレスに「/BBS」を追加して移動します。
何かテーブルが表示されました。
アドレスを「/BBS/create」にしてみます。(もしくは画面のCreate Newをクリック)
掲示板の投稿?画面ですね。
データベースにデータを"Create"する画面です。
余談ですが、マイグレーションをしないとエラーが出て表示されません。
(何度かやり忘れてエラーが出ました。)
さらに余談ですが、ASP.net coreのデフォルトDBは
SQL Server Express LocalDBという
SQL Serverの簡易版みたいです。
SQLiteのような組み込み形式なんですかね?
(VSCodeやMacでやるとDBがSQLiteになるそうです。)
6.まとめと次回予告
RazorでASP.net coreアプリを作る場合
Model -> スキャフォールディング -> DBのマイグレーション
だけでWebアプリが出来てしまった!
...ですが、さすがにこれでは掲示板とはいいがたいので
次回はこのWebアプリを編集して
もっと掲示板らしい掲示板にしていきたいと思います。
あとデータベースをMySQLにしてみたいとおもいます。
参考文献
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-5.0&tabs=visual-studio
Microsoftの公式ドキュメント
https://qiita.com/gushwell/items/6d8b801923b639d9ea2e
Microsoftのチュートリアルをわかりやすく整理されています。
ちなみにこの記事の著者・出井先生が出している
『実戦で役立つ C#プログラミングのイディオム/定石&パターン』
はC#をとてもわかりやすく説明しております。
C#プログラマで、特にC#ステップアップしたいけどどうしよう?
と行き詰ってる方にはとてもおすすめの1冊です。
https://www.udemy.com/user/anderson-355/
どうしてもC#がわからないという方
ピーコックアンダーソン先生のC#講座がわかりやすいです。