第8回 Laravel10 環境構築メモ（ちょっと、いじってみる）

Kiamotomonic

はじめに

前回、Inertiaが何者か、なんとなく分かったので、試しに（本当に試しに）、新しいページを作って、少し動かしてみようかと思います。ちなみに一昨日、iPhone15 Pro Maxを購入したのですが、iPhone11からの久々の買い替えでQOLがアゲアゲになりました。カメラ凄い良くなってるね。。。

新しいページを作ってみる

まず、↓の感じで新しいtsxファイル作ります。簡単に何をしているか説明すると、この後、routeの設定の所で、textというフィールドに任意の文字列をセットするのですが、それをcomponentに渡して、画面に表示するというだけです。

resources/js/Pages/Hello.tsx

import { Head } from '@inertiajs/react'
import { type FC } from 'react'

const Hello: FC = ({ text }) => {
  return (<>
            <Head title="Hello" />
            <div>Hello {text}!! </div>
          </>)
}

export default Hello

作ったページをrouteに追加する

次に、作ったページをrouteに追加するために、wep.phpに下記のコードを追加します。textに"World"という値を代入してます。

routes/web.php

Route::get('/hello', function () {
    return Inertia::render('Hello',[
        'text' => 'World'
    ]);
});

表示してみます

localhost/helloにアクセスしてみてください。↓の通り、"Hello World!!"が表示されました。

Hello World!!

Controllerを作ってみる

次にControllerを作成して、そこから同じページを表示してみます。

app/Http/Controllers/HelloController.php

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Inertia\Response;

class HelloController extends Controller{

    public function create(): Response
    {
        return Inertia::render('Hello', [
            'text' => "World from Controller",
        ]);
    }
}

作ったControllerをrouteに追加する

先ほど、追加したweb.phpのコードはコメントアウトして、新たに下記のコードを追加します。

//Route::get('/hello', function () {
//    return Inertia::render('Hello',[
//        'text' => 'World'
//    ]);
//});

Route::get('/hello', [HelloController::class, 'create']);

再度、表示してみます

localhost/helloにアクセスしてみてください。↓の通り、"Hello World from Controller!!"が表示されました。

Hello World from Controller!!

はい、こんな感じでControllerでセットしたデータをcomponentに渡して表示することができました。あんま、このサンプルだとInertiaが何やってるかよくわかんないかもね。

おしまい

Laravel側の実装も今まで変わらないので、便利っぽい。今度は、ページ遷移やデータの更新などもTryしてみよう。


この記事が気に入ったらサポートをしてみませんか？