LaravelのJetstreamのダッシュボード画面(Vue.js+Inertia.js)にデータの一覧表示させる

# LaravelのJetstreamのダッシュボード画面(Vue.js+Inertia.js)にデータの一覧表示させる

**前提条件**

* laravelプロジェクトにJetstream,Vue.js,Inertia.jsがインストールされている。

**作るもの**

* タイトルとコンテンツの2つの項目を持つシンブルなブログ


## モデル・コントローラーの作成
Blogモデルの作成はphp artisan make:modelコマンドで行う。-m を追記すると、モデルと同時にマイグレーションファイルの作成される。

```bash
% php artisan make:model Blog -m 
```
モデル用のコントローラーを作成する

```bash
% php artisan make:controller BlogController --resource
```
※リソースは必須でない

## Blogテーブルの作成

マイグレーションファイル編集して、title,contentの項目を追加する。

```php
public function up()
{
    Schema::create('blogs', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}
```
マイグレーションしてテーブルを作成する。

```bash
php artisan migrate
```
app¥Models¥Blog.phpファイル(モデルクラス)に追加した列の情報を追記する。

```php
class Blog extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'content'
    ];
}
```


## ルーティングの設定

web.phpにルーティングを追加する。
ルーティングにはnameメソッドで名前blog.indexをつけており名前を利用することでこのルーティングにアクセスを行うことができる。(必須ではない)
ミドルウェアのauthを利用することでログインしているユーザのみアクセス可能となるアクセス制限を行うことができる。(必須ではない)

```php
//略
use App\Http\Controllers\BlogController;
//略
Route::get('/blogs', [BlogController::class, 'index'])
    ->name('blog.index')
    ->middleware('auth');
```

すると、/blogsにアクセスするとログイン画面が表示される。
/で事前に登録しておくと、ログイン出来て、indexにアクセスできる。
しかし、インデックスファイルを作ってないのでもちろん画面は真っ白。

## リンクの作成

ログインすると/dashboardにリダイレクトされる。/dashboardで表示されるページの内容はresources¥js¥Pagesの下に保存されているDashboard.vueファイルに記述されている。

通常、Laravelで利用されているviewのBladeファイルはresources¥viewの下に保存されているが、Inertia.jsではrenderメソッドで指定するvueファイルはresources¥js¥Pagesに保存されている。


AppLayout.vueファイルを開いてBlogページへのリンクを設定する。routeメソッドに設定しているblog.indexはweb.phpファイルのルーティングで設定したnameの値。

```vue
<!-- Navigation Links -->
<div
    class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
>
    <NavLink
        :href="route('dashboard')"
        :active="route().current('dashboard')"
    >
        Dashboard
    </NavLink>
</div>
<div
    class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
>
    <NavLink
        :href="route('blog.index')"
        :active="route().current('blog.index')"
    >
        Blog
    </NavLink>
</div>
```

今、リンクをクリックしても何も起こらない。inertia.jsはPHPとは異なり、更新後はビルドを行う必要があるのでnpm run runコマンドを実行しておく必要があるため。また、まだページが作成できていないため。


## indexページの作成
/blogsにアクセスした場合に表示されるページをBlogController.phpファイルのindexメソッドで指定する。Inertiaのrenderメソッドで表示するページを設定する。**resources¥js¥Pagesの下にBlogディレクトリを作成する。その後DashBoard.vueファイルを複製して保存し、名前をIndex.vueに変更する。**

```php
use Inertia\Inertia; //追加

class BlogController extends Controller
{
    public function index(){
        return Inertia::render('Blog/Index');
    }
```

**作成したIndex.vueファイルを開いてwelcomeコンポーネントを削除し、template #headerタグの中にあるDashboardをBlogに変更する。**

```vue
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
</script>

<template>
    <AppLayout title="Blog">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Blog
            </h2>
        </template>
    </AppLayout>
</template>
```

/blogsにアクセスすると作成したBlog/Index.vueファイルの内容が表示される。


## Seeding（データの格納）
Index.vueにアクセスした際にブログの一覧を表示させるためにはblogテーブルにデータを登録する必要がある。

Seeding機能を利用することでBlogテーブルに複数のダミーデータを短時間で簡単に挿入することができる。

php artisan make:factoryコマンドを利用してテーブルに挿入するデータの構造を記述したFactoryファイルを作成する。

```bash
 % php artisan make:factory BlogFactory --model=Blog
```

database¥factoriesディレクトリにBlogFactory.phpファイルが作成されるのでtitle, content列に挿入するダミーデータの定義を行う。

```php
public function definition()
{
    return [
        'title' => $this->faker->sentence,
        'content' => $this->faker->text,
    ];
}
```

次に**database¥seeders下にあるDatabaseSeeder.phpファイルを開いて下記を設定する。User用の設定が行っているので行を複製してUserをBlogに変更する。**

```php
public function run()
{
    // \App\Models\User::factory(10)->create();
    \App\Models\Blog::factory(10)->create();
}
```

これでSeeding機能の設定は完了。最後に実際にデータを挿入するphp artisan db:seedコマンドを実行。successfullyのメッセージが表示されればデータの挿入は完了。

```bash
 %  php artisan db:seed
```

   INFO  Seeding database.  
データが挿入されたかどうかphp artisan tinkerを利用して確認することができる。

```bash
% php artisan tinker
Psy Shell v0.12.0 (PHP 8.3.1 — cli) by Justin Hileman
>App\Models\Blog::all()
=> Illuminate\Database\Eloquent\Collection {#4560
     all: [
       App\Models\Blog {#4562
         id: "1",
         title: "Impedit sed perferendis explicabo.",
//略
```


## Blogデータの一覧表示
Seederを利用して挿入したデータをBlogController.phpとIndex.vueファイルを利用してブラウザに表示する。

BlogController.phpのindexメソッド内でBlogモデルを利用してblogsテーブルに保存された全データを取得。取得したデータはrenderメソッドの第二引数を利用してvueファイルに渡す。

```php
//略
use Inertia\Inertia;
use App\Models\Blog;

class BlogController extends Controller
{
    public function index(){
        return Inertia::render('Blog/Index',['blogs' => Blog::all()]);
    }
//略
```

Index.vueファイルではBlogController.phpから渡された変数blogsのデータを受け取るためにpropsを利用。propsで取得したデータはv-forを利用して展開。

```vue
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
defineProps({
    blogs: Array,
});
</script>

<template>
    <AppLayout title="Blog">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Blog
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <table>
                    <thead>
                        <tr>
                            <th>タイトル</th>
                            <th>コンテンツ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="blog in blogs" :key="blog.id">
                            <td class="border px-4 py-2">{{ blog.title }}</td>
                            <td class="border px-4 py-2">{{ blog.content }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </AppLayout>
</template>
```

ブラウザで確認するとテーブルに保存されている10件分のBlogデータが一覧表示される。


## Inertia.jsを利用した場合のデータの一覧表示の方法を確認