タスク管理ツールをReact + ASP.Coreで作る 07APIを修正し、DBのデータをクライアントサイドで表示する

[前回](https://qiita.com/mosuma/items/87220f744449f0b07455)の続きです。
今回は構築したDBの情報をクライアントサイドで表示出来るようにしていきます。


### ガイド
全体Index：[タスク管理ツールをReact + ASP.Coreで作る - Index](https://qiita.com/mosuma/items/88e40dc44e7bff1a54d8)


# コントローラクラスを修正する

前回DBを構築してデータの登録まで完了したので、コントローラークラスを修正してDBのデータを取得し、APIに返すように修正します。

修正後のコードは以下の様になります。
(変更点が多いので差分ではなく修正後のみを表示しています)
コンテキストクラスを用いてDB内のt_taskテーブルの中身をリスト形式で返すという内容です。



```diff_c_sharp:TaskController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
using server_app.Models.EDM;

namespace server_app.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TaskController : ControllerBase
    {
        private readonly DataContext _context;
        public TaskController(DataContext context)
        {
            _context = context;
        }
        [HttpGet]
        public async Task<ActionResult<List<t_task>>> Get()
        {
            return await _context.t_tasks.ToListAsync();
        }
    }
}

```


<details><summary>参考：前回からの差分(開くと表示)</summary><div>

```diff_c_sharp:TaskController.cs
﻿using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
+ using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
using server_app.Models.EDM;

namespace server_app.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TaskController : ControllerBase
    {
-        private readonly ILogger<TaskController> _logger;
-        public TaskController(ILogger<TaskController> logger)
-        {
-            _logger = logger;
-        }

+        private readonly DataContext _context;
+        public TaskController(DataContext context)
+        {
+            _context = context;
+        }



-        [HttpGet]
-        public IEnumerable<t_task> Get()
-        {
-            var rng = new Random();
-            return Enumerable.Range(1, 5).Select(index => new t_task
-            {
-                id_task = Guid.NewGuid(),
-                title = "item_" + index.ToString(),
-                is_finish = true,
-                end_date_scheduled = DateTime.Now.AddDays(index)
-            })
-            .ToArray();
-        }

+        [HttpGet]
+        public async Task<ActionResult<List<t_task>>> Get()
+        {
+            return await _context.t_tasks.ToListAsync();
+        }
    }
}

```




</div></details>


### APIを実行してみる
サーバーサイド側のアプリケーションを立ち上げて/task APIにアクセスしてみると、これまでのダミーデータではなく、DBに登録したデータが表示されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/7e0ae280-87b7-01ad-c8aa-91fcb6b8ae1a.png)


# クライアントを実行

サーバーサイドは、DBのデータをAPIが返すように修正できました。
クライアントサイドは、APIのデータを受け取って表示する内容に既に実装されているので、実行すればもうDBのデータがブラウザに表示されます。

さっそく実行してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/ab71f31c-c641-6b75-625e-0228aada58bd.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/2fd84d20-127b-d6d1-6063-9774e2f7c599.png)

SQ Liteのテーブルと見比べると、DBの内容がクライアントサイドに表示されていることが分かります。

今回はここまでです
続きは[次回です](https://qiita.com/mosuma/items/e0f535ab4406110b6334)