Next.jsとLaravelを使ったAPI作成と取得

# はじめに
本記事をご覧いただきありがとうございます。京都の専門学校に通っているものです。今回はフロントエンドにNext.js,バックエンドにLaravelパッケージのsail,laravel-breezeを使用したアプリケーションを作成する際にLaravel側で、APIを作成してNext側で取得しようということで始めたときに行った内容を記事にしていきたいと思います。

:::note warn
学生でほぼ独学での学習を進めている身なので、本記事で気になる点があればご享受いただけますと幸いです。
:::

# 環境
* m1 mac ios 15
* docker
* Next.js 14
* Laravel 11
* sail
* laravel-breeze

# 環境構築
今回の環境構築に関しては[こちら](https://note.com/shinyeah/n/ndd9088ed746b)のサイトを参考にさせていただきました。

https://note.com/shinyeah/n/ndd9088ed746b

:::note warn
環境構築に関しては、ほとんど上記のサイトと同じように進めていき、適宜jsファイルをtsxにしたり、簡単なセットアップを行っただけなので、今回は省略させていただきます。
:::

# LaravelでのAPI作成
お知らせ一覧ページを作成したいということで、とりあえずお知らせテーブルを作成していきます。

### MySQLにテーブルを作成するためのコマンドを叩いて行きます
```bash:Bash
sail aritsan make:migration ファイル名

// 使用例 (テーブル名：news)
sail artisan make:migration create_news_table
```
↓のような文字が出てくれば成功です！（今回はテーブル名をtestにしています）
![migration_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/e51af88f-cf8a-64dd-fd9f-a1a17c96164d.png)

### newsテーブルの内容を書いていく

```php:PHP
    public function up(): void
    {
        Schema::create('news', function (Blueprint $table) {
            $table->increments('news_id');
            $table->string('news_title');
            $table->string('news_detail');
            $table->softDeletes();
            $table->timestamps();
        });
    }
```
upに対してテーブルの内容を書いていきます。
upとはmigrateコマンドを叩いたときに実行される処理のこと

```php:PHP
    $table->increments('news_id');
    //オートナンバー型で、カラム名がnews_id
    //オートナンバー型や、ID型にすることで、自動的に主キーに設定される
    $table->string('news_title');
    //string型でカラム名がnews_title
    $table->string('news_detail');
    $table->softDeletes();
    //softDeleteというlaravelが提供している、論理削除機能を追加している
    $table->timestamps();
    //created_at,updated_atがテーブルに追加される
```

softdeleteに関しては以下のサイトを参照させていただきます。
    
https://qiita.com/shinya_aa/items/b7c6c068a90ec7bdcd73
    
```php:PHP
    public function down(): void
    {
        Schema::dropIfExists('news');
    }
```
こちらに書いてあるものは
```bash:Bash
php artisan migrate:rollback
```
migrateした内容を取り消したい場合に使うコマンドを叩いたときに実行される処理
デフォルトで入っている処理はテーブルを削除するという内容です。

### migrateを叩く
```bash:Bash
sail artisan migrate
```
![migrate_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/d32dced0-8c8c-6a85-5cfe-ad646ef192c5.png)
このような画面になれば成功です！
phpmyadminを覗いてみましょう。

![スクリーンショット 2024-12-10 23.09.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/e018f504-6565-5bec-5683-45792526d295.png)

しっかりtestテーブルが作成されていますね

### modelの作成
modelを作成するコマンドを叩いて行きましょう
```bash:Bash
sail artisan make:model News
```
:::note warn
modelは最初を大文字にすることが多いので注意しましょう
:::

![スクリーンショット 2024-12-10 23.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/ef5a724a-7d2d-720b-05e6-d44242ebf955.png)

こちらで成功です。
ではmodelの中を記述していきます
```php:PHP
class News extends Model
{
    use HasFactory;
    
    //softDeleteを使用する場合のコード
    use SoftDeletes;

    //テーブルを明示的に宣言する
    protected $table = 'news';

    //変更可能なカラムの追加
    protected $fillable = [
        'news_title',
        'news_detail',
    ];


    //デフォルト値の追加
    protected $attributes = [
        'news_category_id' => 1
    ];
}
```
newsテーブルにはnews_category_idというタグをつける際のテーブルをリレーションする作りになっており、とりあえず今回はデフォルト値として1をつけています

### Controllerの作成
以下のコマンドを叩いてcontrollerを作成します
--resourceオプションをつけることで、空の関数がデフォルトで作成されます
```bash:Bash
sail artisan make:controller ApiNewsController --resource
```
:::note warn
controllerは各単語の頭文字を大文字にして作成します
:::
こちらで成功です
![スクリーンショット 2024-12-10 23.33.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/c945b0b4-4308-cd7f-bc9b-93a921e37a8a.png)

```php:PHP
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiNewsController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(string $id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        //
    }
}

```
データ取得だけを行いたいので、indexにコードを書いていきます。

```php:PHP
//allでデータの全取得
$news = News::all();
return response()->json($news);
```

データが大量になる場合は負荷がかかりすぎるので、ページネーションを実装した方がいいです
returnはjson形式で値を返したいので、json(データ)とします

### routeの作成
laraevlでAPIのルートを定義するには**routes/api.php**に記述していきます

```php:PHP
Route::get('news', [ApiNewsController::class, 'index']);

Route::[リクエストタイプ]('[apiルート]', [[作成したコントローラー名]::class, '[コントローラーで作成した関数名]']);
```
:::note warn
laravelのAPIエンドポイントは **http://your-project-address/api/~** になります
:::

### seederを使ったテストデータの挿入

```php:PHP
sail artisan make:seeder NewsSeeder
```
こちらも頭文字を大文字にする形式です

![スクリーンショット 2024-12-10 23.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/41062907-af06-f91d-0069-55f4d2ed0b4f.png)
こちらで成功です

seederでテストデータを入れるコードを書いていきます
```php:PHP
use Illuminate\Database\Seeder;
use App\Models\News;
use Illuminate\Support\Str;

    News::create([
        'news_title' => Str::random(10),
        'news_detail'  => Str::random(10),
        'news_category_id'  => 1,
    ]);
```
今回はmodelを作成しているので、どうせならということで、modelを使ったseederの挿入をしました。
`News::create`でseederを作成できます。
中身については、`[データを挿入したいカラム] => [データの型]::random([文字数])`として、ランダムで文字列を挿入しています。
`news_category_id`については、1で固定しています。

:::note
create一件で１つ分のデータが入るので、４つデータを挿入したい場合は`News::create`を複製します
:::

### DatabaseSeederでNewsSeederを実行する

```php:PHP
    public function run(): void
    {
        $this->call(NewsSeeder::class);
    }
```
`$this->call([作成したseeder]::class);`でseederを実行することができます。

### seeder実行コマンド叩く

```bash:Bash
#seederの実行
php artisan db:seed
#クラスを選択してseederの実行
php artisan db:seed --class=PhotoTableSeeder
```
:::note
 `--class` オプションをつけることで特定のシーダーだけ実行することもできます
:::

### 最後にAPIをブラウザで確認してみる

![スクリーンショット 2024-12-11 0.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668837/deb8c3b3-2166-e4fb-8925-480e027fd79d.png)

localhost/api/newsでapi.phpで指定したAPIルートから実行できている！
ここまでが、Laravelでの作業です

次回Next.js側の手順を書いていきたいと思います