Laravel10でvue3を用いて作成したSPAのデータの取得と表示

## はじめに
こちらでは、Laravel10とVue3を用いて作成したSPAの、データの取得と表示についてまとめてみた。


今回は以下の続き

https://qiita.com/kenji123/items/56e36278098453884a20


## 参考記事

https://qiita.com/ddtwn/items/51b4cede883456c599f2

https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5



## 手順

### api.phpを使用
ここでは、フロントエンドのルーティングをVue.jsで処理するために、Laravelのroutes/api.phpをルーティングファイルとして使用している。
TodoControllerのgetTodoListメソッドを呼び出すルートを追加している。

```api.php
：
use Illuminate\Support\Facades\Route;

+ use App\Http\Controllers\TodoController;

：

+ Route::get('getTodoList',[TodoController::class,'getTodoList']);

：

```

### コントローラの作成
Laravelのartisanコマンドを使用してTodoControllerを作成する。このコントローラには、データベースからTodoリストのデータを取得してログに出力し、さらにデータを返すgetTodoListメソッドが含まれている。
本来であれば、このようなデータ取得操作はモデルを経由して行うが、ここではシンプルな例として直接SQLクエリを使用している。
また、データが正しく取得できているか確認するために、一時的にログに出力している。ログは、アプリケーションのstorage/logsディレクトリ内のlaravel.logファイルに記録される。データ取得時のエラーや意図しない結果が発生した場合、このログファイルを確認することで問題の解析に役立つ。

```
php artisan make:controller TodoController
```

```TodoController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;

class TodoController extends Controller
{
    public function getTodoList()
    {
        $sql = 'SELECT * FROM todos';
        $items = DB::select($sql);
        Log::info($items);
        return $items;
    }
}

```

### テーブル作成
ここでは、.envファイルでデータベースの設定を行い、artisanコマンドを用いてマイグレーションファイルを作成し、それを用いて'todos'テーブルを作成している。このテーブルには各ToDoファイルの'title'と'status'を含む。

1 .envの設定
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo
DB_USERNAME=root
DB_PASSWORD=root
```

2. データベース作成
MAMP例
![スクリーンショット 2023-06-18 11.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/37d2a046-71f9-bff3-a994-58a12cfa628a.png)

2. テーブル作成
artisanコマンドでマイグレーションを使用する。
```
php artisan make:migration create_todos_table
```
database/migrationsディレクトリに配置される
今回は2023_06_18_021456_create_todos_table.phpが作成された。
以下のテーブルを作成する。
```
   public function up(): void
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('title', 100)->comment('タイトル');
            $table->string('status', 10)->comment('ステータス');
            $table->timestamps();
        });
    }

```

migrateを行う
```bash
php artisan migrate
```
```
apple@appurunoMacBook-Pro laravel_vite-example % php artisan migrate

   INFO  Preparing database.  

  Creating migration table ......................................... 89ms DONE

   INFO  Running migrations.  

  2014_10_12_000000_create_users_table ............................. 92ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ............. 84ms DONE
  2019_08_19_000000_create_failed_jobs_table ....................... 71ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ............ 83ms DONE
  2023_06_18_021456_create_todos_table ............................. 33ms DONE
```

3.モデル作成
Todoモデルを作成し、'title'と'status'フィールドを$fillableプロパティに追加する。これにより、これらのフィールドは一括代入（mass assignment）に対応している。
```
php artisan make:model Todo
```

生成されたファイルに$filabelを追加
```app/Models/Todo.php 
class Todo extends Model
{
    use HasFactory;

    protected $fillable = [
               'title',
               'status',
        ];
}

```

### フロントでデータ取得
フロントエンドのコンポーネントであるHomeView.vueを、サーバからデータを取得するように書き換える。このコンポーネントはVue.jsを用いて実装されており、特に注目すべきはaxiosを用いた非同期通信によるデータ取得である。また、ここではVue.jsのバージョン2から存在するOptions APIを利用している。

初めはVue.jsの最新バージョン、つまりVue.js 3で書きたかったところだが、現状ではVue.js 2のOptions APIを用いて実装している。これは、Vue.js 3ではComposition APIという新しいAPIが導入されているが、既存のOptions APIも依然として利用可能であり、その方が書きやすいと感じたためである。ただし、今後はVue.js 3の新機能であるComposition APIを学び、それを用いてコードを書くことも視野に入れている。

```HomeVIew.vue
<template>
    <v-container fluid>
        <h4 class="mb-5">ToDo一覧</h4>
        <div class="table-list">
            <v-table density="compact">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>タイトル</th>
                        <th>ステータス</th>
                        <th>作成日</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in todoList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.status }}</td>
                        <td>{{ item.create_date }}</td>
                    </tr>
                </tbody>
            </v-table>
        </div>
    </v-container>
</template>

<script>
export default {
    data() {
        return {
            todoList: []
        }
    },
    methods: {
        getTodoList() {
            axios.get('/api/todo')
                .then(response => {
                    this.todoList = response.data
                })
                .catch(error => {
                    console.log(error)
                })
        }
    },
    mounted() {
        this.getTodoList()
    }
}

</script>

```

### 画面表示

以上の手順により、画面にデータが正しく表示されることを確認した。
LaravelとVue.jsを使用したSPAの基本的なデータ取得と表示が完成したことになる。

![スクリーンショット 2023-06-18 13.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/2bb6b2bc-8e1a-8acd-0699-ac020c5d25ea.png)