MVC5とEntityFrameworkを使ってDBファーストでWebアプリケーションを作成するためのチュートリアル

ASP.NET MVC5とEntityFramework6.xをベースとして、簡単なWebアプリケーションを作成するチュートリアルをまとめました。

以下のような方を対象にしています。

• プログラミング初学者
  • 簡単なコンソールアプリケーションぐらいは研修で勉強した
  • SQLをかじったことはある（Select, Insert, Delete, CreateTableぐらいは知ってる）
• Javaは多少経験があるが、ASP.NET(C#)は未経験
• EntityFrameworkの導入について知りたい

今回は、住所録をもとに地図を表示する機能 を目標に実装していきたいと思います。

環境

今回は以下の環境を使っています。

環境：

• Windows10

• VisualStudio2017 Community

• SQL Server Express 2017

  • SQL Server Management Studio 2017

  　　

まずはDBを用意する

今回はEntityFrameworkを使ったDBファーストという手法で開発を進めます。くだけた言い方をすると、先にデータベースを作成しておき、EntityFrameworkを使ってWebアプリとの橋渡しを行う開発手法といった感じです。

というわけで、まずは住所録を入れるDBの構築を行います。
SQL Server Management Studio (以下、SSMS)を起動し、データベースを作成しましょう。
オブジェクトエクスプローラーの[データベース]フォルダを右クリックし、データベースを追加します。今回はEfPracticeという名前にしました。

次に、テーブルを追加します。今回は下記のようなデータが入ります。

◆カラム項目(カラム名)：型

• ID(ID)：int 主キー
• 名前(name)：VARCHAR(50)
• 名前フリガナ(furigana)：VARCHAR(100)
• 性別(gender)：CHAR(10) ※註1
• 血液型(bloodType)：CHAR(10)
• 生年月日(birthDay)：DATETIME
• 電話番号(homePhone)：VARCHAR(15)
• 携帯番号(cellPhone)：VARCHAR(15)
• メール(mailAddress)：CHAR(256)
• 郵便番号(postalCode)：CHAR(8)
• 住所(homeAddress)：VARCHAR(200)
• 住所フリガナ(homeFurigana)：VARCHAR(400)

註1：性別は本来下記リンクのように扱うべきですが、今回は練習ということでcharにしています。 https://qiita.com/yuba/items/567f8f47c9bb5a20200e

作成したDBに、下記のSQLを実行しましょう。（EfPracticeを右クリック→新しいクエリ)

    use EfPractice;

    create table ADDRESS_MASTER(

        id          int primary key,
        name        VARCHAR(50),
        furigana    VARCHAR(100),
        gender      CHAR(10),
        bloodType   CHAR(10),
        birthDay    DATE Null,
        homePhone   VARCHAR(15),
        cellPhone   VARCHAR(15),
        mailAddress VARCHAR(256),
        postalCode  CHAR(8),
        homeAddress VARCHAR(200),
        homeFurigana VARCHAR(400)
    );

実行後、下図のような状態になっていれば成功です。

次は作成したテーブルに使うデータを入れていきます。
下記の私のGitHubページにあるsanple_data.csvというファイルを右クリック→リンク先を保存 でファイルをダウンロードしてください。

https://github.com/ymstshinichiro/MVC5_tutorial

※参考：https://yamagata.int21h.jp/tool/testdata/

次に、先ほどと同様に新しいクエリを作成し、下記のSQLを実行します。
その際、読み込むファイルのパスはご自身がダウンロードしたファイルのパスを指定してください。

    BULK INSERT ADDRESS_MASTER

    FROM 'c:\address_data.csv'
    WITH
    (
        FIELDTERMINATOR = ',',
        ROWTERMINATOR = '\n'
    );

    select * from ADDRESS_MASTER;

テーブルのデータが正しく入っているか確認してください。

ここまででデータベースの作成は完了です。

Webアプリケーションの作成

では、本題のWebアプリケーションの作成に入っていきます。
まずはVisualStudioを起動しましょう。
上部メニューから ファイル→新規作成→プロジェクトを選択すると下記の画面が現れます。
右側のペインでVisualC#→Web→ASP.NET Webアプリケーションを選択し、名前を AddressPractice としてください。

OKを押して、次の画面ではMVCを選択します。

バージョンで多少の違いはあるかもしれませんが、下記のようなファイル/フォルダ構成になっていればOKです。

では次に、先ほど作成したDBを取り込んでいきます。

EntityFrameworkをインストールし、DBと連携する

まず初めにEntityFrameworkをプロジェクトにインストールします。
EntityFrameworkについての詳しい説明は譲りますが、ざっくり言うと「DBとアプリケーションの連携を簡潔に記述できるようにするもの（O/Rマッパー）の、ASP.NET対応版」です。

では、インストールの方法ですが、ソリューションエクスプローラ上で現在のプロジェクト名を右クリック→Nugetパッケージの管理 をクリックします。

現れたウィンドウで 参照 を選択し、EntityFrameworkを検索、インストールをクリックして完了です。

次に、最初に作成したDBと連携させます......が、その前にいったんビルドします。
上部メニューから ビルド→ソリューションのリビルドを実行してください。

無事完了したら、ソリューションエクスプローラー上のModelフォルダを右クリック→追加→新しい項目をクリックし下記のウィンドウを表示させます。

右のペインで データ を選択し、ADO.NET Entity Data Model を選択します。
名前を、EfPracticeContextに変更し追加をクリックしてください。

データベースからEFDesignerを選択し、次へ。

出てきた画面で、新しい接続をクリックします。

ここで、最初に作ったDBの情報が必要になるため、SSMSを立ち上げ、使うデータベース右クリック→プロパティを開きます。

出てきたウィンドウの 名前 の文字列をコピーしてください。

VisualStudioに戻って、コピーした文字列を サーバー名 の欄に貼り付けます。
そうすると、データベース名を選択できるようになるので、こちらもさきほどのEfPracticeを選択し、OKをクリック。

下記の画面に戻るので、次へをクリックします。

データベースオブジェクトを選択する画面が現れるので、テーブルにチェックを入れたら、完了をクリックします。

Modelの下に新たなファイルが作成されていればOKです。

ここでももう一度リビルドしておいてください。
SSMSも閉じてOKです。

まずは単純なHelloWorldをやってみる

ここからはコードの記述に入っていきますが、初めにごくごく基本のHelloWorldをやってみます。

まず、ソリューションエクスプローラーのContorollerの上で右クリック→追加→コントローラ をクリックすると下記のウィンドウが現れるので、MVC5コントローラー-空を選択し、追加します。

名前は何でもよいのですが、一つ注意点があります。必ず末尾にControllerと付く名前にしてください。後ほど解説しますがURLのルーティングに関係しているためです。

スキャフォールディングが終わると、Controllerの下に HelloWorldController.cs ファイルが作られ、Views/HelloWorld　というフォルダが新たに作成されます。

では、作成された HelloWorldController.cs の Index をドラッグしながら右クリック→ビューの追加をクリックします。

下記のウィンドウが現れるので、そのまま追加をクリックします。

Views/Helloworld の下に Index.cshtml というファイルが新たに作成されました。

では、ここに下記のコードをコピペしてください。

    @{
        ViewBag.Title = "Hello World Page";
    }

    <div>

        <h2>Hello World!</h2>

    </div>

続いて、App_Start/ RoutteConfig.cs ファイルを開きます。１９行目の

defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

となっているところを、

defaults: new { controller = "HelloWorld", action = "Index", id = UrlParameter.Optional }

と、書き換えましょう。

この作業により、このアプリケーションを実行したときに最初にリクエストされるURLが、
http://[サーバー名]/HelloWorld/Index
となるよう変更されました。（※変更前は http://[サーバー名]/Home/Index だった）

完了したらファイルを上書き保存し、ビルド→実行（F5キーを押下）します。
以下の画面が現れれば成功です。

いったん画面を閉じましょう。

上記の例からわかるように、ASP.NET MVC5では、http://[サーバー名]/コントローラ名/ビュー名 という形でURLがルーティングされ、コントローラは “コントローラ名controller”にするという命名規則がある点に注意してください。(今回の例では HelloWorldがコントローラ名のため、HelloWorldController と名付けました)
また、コードの書き方からなんとなく読み取れると思いますが、アプリケーションの動作の流れを書くと以下のようになります （例：HelloWorld/Index の場合）

◆サーバーから見た動作

1. クライアントから /HelloWorld/Index に対してGet要求が来る

2. HelloWorldController.cs のActionResult Index() 内の処理を実行する
   →ここにReturn View() の記述がある場合、ActionResultと同名のビューHTMLをレスポンスとして渡す。 (Return Viewだけでなく、別のページへリダイレクトしたり、コントローラ内の別処理へ飛ばすことも当然可能です。)

　　
基本的にはこの流れの2)の部分に様々な処理を追加していきます。

EntityFrameworkを使ったCRUDなコントローラとビューを作る

基本がつかめたところで、次にEntityFrameworkを使ってみます。
先ほどの流れと似ていますが、Controller上で右クリック→追加→新規スキャフォールディングアイテム を選択すると、以下のウィンドウが現れます。
ここで、一番上の EntityFrameworkを使用した、ビューがあるMVC5コントローラを選んで、追加を押下します。

現れたウィンドウで下記のように選択し、コントローラ名を addressControllerに変更し、追加を押下します。

さきほどのHelloWorldControllerと違い、色々と処理が書かれています。
が、基本は同じです。ActionResult ビュー名 になっており、Views/Addressの下には Create,Delete,Details,Edit,Indexというcshtmlファイルができています。
試しにこの状態で実行しましょう。
最初はHelloWorldが表示されますので、アドレスバーにURLを直接入力してください。

http://[サーバー名]/Helloworld/Index

となっているのを,

http://[サーバー名]/address/Index

に変更します。

以下のような画面が表示されると思います。

一行目の安藤さんの右端の列を見ると、Edit,,Detail,Deleteとありますが、これらの各リンクをクリックすると、それぞれ編集、詳細、削除の画面に遷移します。
また、左上のCreate New というリンクをクリックすると、新しいデータを入力できる画面が現れます。
このように、EntityFrameworkを使うとデータの操作を行うWebアプリケーションのひな型を簡単に作成することができます。

それぞれのページでどのような処理が動き、どのようなページがViewとして表現されているのか、自分で動かしながら調べてみてください。

WebGridを使ってみる

Views/address/Indexの中身を見てみると、モデルのデータをforeachで順番に表示しているのが見てとれます。無駄な処理をしているわけではないのですが、よりスマートな解決方法としてWebGridというオブジェクトを使う方法があるので紹介します。

まず初めに、addressController.csに以下のコードをコピペしてください。

    public ActionResult GridIndex()
    {
        IEnumerable<ADDRESS_MASTER> address = db.ADDRESS_MASTER.Select(x => x);

        return View(address);
    }

次に、Views/Addressの下に GridIndex.cshtml というファイルを追加し、下記をコピペしてください。

    @model IEnumerable<AddressPractice.Models.ADDRESS_MASTER>

    @{
        ViewBag.Title = "GridIndex";
    }

    <h2>GridIndex</h2>

    @{
        var grid = new WebGrid();

        grid.Bind(Model);

    }


    <div class="row">
        <div class="col-lg-12">
            
            @*formでくくるのを忘れずに*@
            @using (Html.BeginForm())
            {

                @grid.GetHtml(tableStyle: "grid", headerStyle: "head", footerStyle: "table-pager");

            }
        </div>
    </div>

非常にシンプルな記述ですが、これでも一応表示はできます。リビルドして実行すると、下記の画面が表示されるはずです。

正直めっちゃ見づらいですね。簡便な記述になったとはいえ、出力がこれでは意味がありません。
GridIndex.cshtmlを編集して、きれいにしていきます。

まずは下記のようにタイトルに表示する文字列を変更します。

    @model IEnumerable<AddressPractice.Models.ADDRESS_MASTER>

    @{
        ViewBag.Title = "GridIndex";

        var grid = new WebGrid(source: Model);
    }

    <h2>GridIndex</h2>

    <div class="row">
        <div class="col-lg-12">

        @*formでくくるのを忘れずに*@
        @using (Html.BeginForm())
        {

        @grid.GetHtml(tableStyle: "grid", 
                        headerStyle: "head",
                        footerStyle: "table-pager",
                        columns:grid.Columns
                        (
                            grid.Column("name", "名前"),
                            grid.Column("furigana", "フリガナ"),
                            grid.Column("gender", "性別"),
                            grid.Column("birthDay", "生年月日"),
                            grid.Column("bloodType", "血液型"),
                            grid.Column("homePhone", "固定電話"),
                            grid.Column("cellPhone", "携帯電話"),
                            grid.Column("mailAddress", "メールアドレス"),
                            grid.Column("postalCode", "郵便番号"),
                            grid.Column("homeAddress", "住所"),
                            grid.Column("homeFurigana", "フリガナ")
                        )
                    )

        }
        </div>
    </div>

実行すると下図のようになります。

若干よくなりましたが、まだ気になる点がたくさんあります。とりあえず以下の二点を修正します。

• 枠線がない
• 列幅があってない

というわけで、GridIndex.cshtml にインラインでCSSを入れてみます。

    @model IEnumerable<AddressPractice.Models.ADDRESS_MASTER>

    @{
        ViewBag.Title = "GridIndex";

        var grid = new WebGrid(source: Model);
    }

    <style type="text/css">

        .grid { table-layout:fixed; border-collapse: collapse;}
        .head { background-color: #E8E8E8; font-weight: bold; color: #FFF}
        .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px;column-width: 200px  }
        .grid th { text-align: center;}
        .alt { background-color: #E8E8E8; color: #000; }
        .product { width: 200px; font-weight:bold;}
        
    </style>

    <h2>GridIndex</h2>

    <div class="row">
        <div class="col-lg-12">

        @*formでくくるのを忘れずに*@
        @using (Html.BeginForm())
        {

        @grid.GetHtml(tableStyle: "grid", 
                        headerStyle: "head",
                        footerStyle: "table-pager",
                        columns:grid.Columns
                        (
                            grid.Column("name", "名前"),
                            grid.Column("furigana", "フリガナ"),
                            grid.Column("gender", "性別"),
                            grid.Column("birthDay", "生年月日"),
                            grid.Column("bloodType", "血液型"),
                            grid.Column("homePhone", "固定電話"),
                            grid.Column("cellPhone", "携帯電話"),
                            grid.Column("mailAddress", "メールアドレス"),
                            grid.Column("postalCode", "郵便番号"),
                            grid.Column("homeAddress", "住所"),
                            grid.Column("homeFurigana", "フリガナ")
                        )
                    )

        }
        </div>
    </div>

下記のようになります。よくなりましたが、まだ幅があっていません。

固定電話と住所のフリガナを非表示にし、各列に幅のStyleを追加しました。
また、生年月日のフォーマットを変更し、時刻を表示しないようにしています。

    @model IEnumerable<AddressPractice.Models.ADDRESS_MASTER>

    @{
        ViewBag.Title = "GridIndex";

        var grid = new WebGrid(source: Model);
    }



    <style type="text/css">

        .grid { table-layout:fixed; border-collapse: collapse;}
        .head { background-color: #E8E8E8; font-weight: bold; color: #FFF}
        .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px;}
        .grid th { text-align: center;}
        .alt { background-color: #E8E8E8; color: #000; }
        .product { width: 200px; font-weight:bold;}

        .ColumnWid1 {column-width:10px}
        .ColumnWid2 {column-width: 30px}
        .ColumnWid3 {column-width: 80px}
        .ColumnWid4 {column-width: 150px}
        .ColumnWid5 {column-width: 180px}

    </style>


    <h2>GridIndex</h2>

    <div class="row">
        <div class="col-lg-12">

            @*formでくくるのを忘れずに*@
            @using (Html.BeginForm())
            {

                @grid.GetHtml(tableStyle: "grid",
                                headerStyle: "head",
                                footerStyle: "table-pager",
                                columns: grid.Columns
                                (
                                    grid.Column("name", "名前", style: "ColumnWid3"),
                                    grid.Column("furigana", "フリガナ", style: "ColumnWid3"),
                                    grid.Column("gender", "性別", style: "ColumnWid1"),
                                    grid.Column("birthDay", "生年月日", style: "ColumnWid3", format: (item) => string.Format("{0:yyyy/MM/dd}", item.birthDay)),
                                    grid.Column("bloodType", "血液型",style: "ColumnWid2"),
                                    //grid.Column("homePhone", "固定電話",style: "ColumnWid1"),
                                    grid.Column("cellPhone", "携帯電話",style: "ColumnWid3"),
                                    grid.Column("mailAddress", "メールアドレス",style: "ColumnWid4"),
                                    grid.Column("postalCode", "郵便番号",style: "ColumnWid3"),
                                    grid.Column("homeAddress", "住所",style: "ColumnWid5")
                                    //grid.Column("homeFurigana", "フリガナ",style: "ColumnWid1")
                                )
                            )

            }
            </div>
    </div>

実行結果は以下になります。

最後に、ページャーを上下に表示するよう変更します。
本体のページャーを非表示にして、grid.pager()を本体の上下で呼び出せばOKです。

    @model IEnumerable<AddressPractice.Models.ADDRESS_MASTER>

    @{
        ViewBag.Title = "GridIndex";

        var grid = new WebGrid(source: Model);
    }



    <style type="text/css">

        .grid { table-layout:fixed; border-collapse: collapse;}
        .head { background-color: #E8E8E8; font-weight: bold; color: #FFF}
        .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px;}
        .grid th { text-align: center;}
        .alt { background-color: #E8E8E8; color: #000; }
        .product { width: 200px; font-weight:bold;}

        .ColumnWid1 {column-width:10px}
        .ColumnWid2 {column-width: 30px}
        .ColumnWid3 {column-width: 80px}
        .ColumnWid4 {column-width: 150px}
        .ColumnWid5 {column-width: 180px}

        .table-pager { display: none; @* ←これで元々あるPagerを非表示にしてる*@; }

        .pager {
            vertical-align: middle;
            border-color: inherit;
            padding-top: 10px;
        }

    </style>


    <h2>GridIndex</h2>

    <div class="row">

        <div class="pager">
            @*DivでくくるとPagerに別のCssを当てれる*@
            @grid.Pager()
        </div>

        
        <div class="col-lg-12">

            @*formでくくるのを忘れずに*@
            @using (Html.BeginForm())
            {

                @grid.GetHtml(tableStyle: "grid",
                                        headerStyle: "head",
                                        footerStyle: "table-pager",
                                        columns: grid.Columns
                                        (
                                            grid.Column("name", "名前", style: "ColumnWid3"),
                                            grid.Column("furigana", "フリガナ", style: "ColumnWid3"),
                                            grid.Column("gender", "性別", style: "ColumnWid1"),
                                            grid.Column("birthDay", "生年月日", style: "ColumnWid3", format: (item) => string.Format("{0:yyyy/MM/dd}", item.birthDay)),
                                            grid.Column("bloodType", "血液型", style: "ColumnWid2"),
                                            //grid.Column("homePhone", "固定電話",style: "ColumnWid1"),
                                            grid.Column("cellPhone", "携帯電話", style: "ColumnWid3"),
                                            grid.Column("mailAddress", "メールアドレス", style: "ColumnWid4"),
                                            grid.Column("postalCode", "郵便番号", style: "ColumnWid3"),
                                            grid.Column("homeAddress", "住所", style: "ColumnWid5")
                                        //grid.Column("homeFurigana", "フリガナ",style: "ColumnWid1")
                                        )
                                    )

            }
        </div>

        <div class="pager">
            @grid.Pager()
        </div>

    </div>

実行結果

google Maps APIを使って地図を表示してみる

仕上げに、住所を地図上でも表示できるようにしてみたいと思います。
ご存知googleMapを活用していくわけですが初めの準備が少々面倒です。

まず、googleアカウントが無い方はアカウントをとってください。
アカウントができたら下記のリンクに従ってAPIキーを取得しましょう。
https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/

キーの制限 という項目まで進んだら、リファラーを */address/* に設定しておいてください。

ではまず、さきほど作ったGridIndex.cshtmlに一部追記をします。

 <div class="col-lg-12">

        @*formでくくるのを忘れずに*@
        @using (Html.BeginForm())
        {

            @grid.GetHtml(tableStyle: "grid",
                                      headerStyle: "head",
                                      footerStyle: "table-pager",
                                      columns: grid.Columns
                                      (
                                          grid.Column("name", "名前", style: "ColumnWid3"),
                                          grid.Column("furigana", "フリガナ", style: "ColumnWid3"),
                                          grid.Column("gender", "性別", style: "ColumnWid1"),
                                          grid.Column("birthDay", "生年月日", style: "ColumnWid3", format: (item) => string.Format("{0:yyyy/MM/dd}", item.birthDay)),
                                          grid.Column("bloodType", "血液型", style: "ColumnWid2"),
                                          //grid.Column("homePhone", "固定電話",style: "ColumnWid1"),
                                          grid.Column("cellPhone", "携帯電話", style: "ColumnWid3"),
                                          grid.Column("mailAddress", "メールアドレス", style: "ColumnWid4"),
                                          grid.Column("postalCode", "郵便番号", style: "ColumnWid3"),
                                          grid.Column("homeAddress", "住所", style: "ColumnWid5"),  @*←カンマ追加してます*@
                                      //grid.Column("homeFurigana", "フリガナ",style: "ColumnWid1")

                                          grid.Column("homeAddress", "住所", format: (item) => @Html.ActionLink( "map" , "Details",new { id = item.id } )) @*←あと、この行を追加*@
                                      )
                                   )

        }
    </div>

ひとまずこの状態で表示してみます。

右端にmap というリンクが追加されました。
押してみると、住所録の詳細に遷移します。
この詳細の下に地図を表示したいと思います。

では、Views/address/Details.cshtml を開き、すでにあるコードの最下行から、以下をコピペで付け足してください。

    `@* ↓自分のAPIキーを入れる *@
    <script src="//maps.googleapis.com/maps/api/js?key=ここにAPIキー&libraries=places,geometry&sensor=false"></script>


    <body onload="initialize()">

        <table style="width:500px;border:0;">
            <tr><td>緯度</td><td id="id_ido"></td></tr>
            <tr><td>経度</td><td id="id_keido"></td></tr>
        </table>

        <input id="address" type="text" value= @Model.homeAddress.ToString() >
        <input type="button" value="GetGeocode" onclick="codeAddress()">
        <div id="map_canvas" style="width:700px; height:500px"></div>

        <br />
        <br />

        @Html.Label("逆ジオコード")
        <table style="width:500px;border:0;">
            <tr><td>緯度</td><td><input id="id_ido_rev" type="text" value=35.681167></td></tr>
            <tr><td>経度</td><td><input id="id_keido_rev" type="text" value=139.767052></td></tr>
            <tr><td>住所</td><td id="id_Address_rev"></td></tr>

        </table>

        <input type="button" value="Reverse Geocode" onclick="codeAddress_rev()">

    </body>


    <p>
        @Html.ActionLink("Edit", "Edit", new { id = Model.id }) |
        @Html.ActionLink("Back to List", "Index")
    </p>

一番上の ここにAPIキー と書かれた部分を、自分のAPIキーに書き換えたら、まずはさきほどのGridIndexを表示させて、Mapのリンクをクリックします。
そうすると、下記のような画面が表示されるはずです。

GetGeocodeボタンを押下すると、住所のポイントに地図が移動します。

また、下のほうにある逆ジオコードは、上記の住所とは全く関係なく、緯度経度から住所を表示する実装になっています。
こちらも色々触って、確認してみてください。

以上で今回のチュートリアルは終了です。
自分も初学者なため拙い部分多々あったかと思いますが、ご意見いただけますと幸いです。

宜しくお願いいたします。