メモ | refirio.org

Memo

Reactを使う

基本的には前述の「初期設定」の流れで対応する。
「breeze:install」の際に「react」を指定することで、Reactを使用することができる。
（別途Reactのプロジェクトを作成したりする必要は無い。また自動的に Inertia.js を使った構成となる。）

Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite] #Docker - Qiita
https://qiita.com/Sho-taro/items/820e4117c5b5f4c6717f

【Laravel + React + Inertia + Vite】Inertia.jsを使ったSPAの環境構築〜Laravel Breeze認証の動作確認 #React - Qiita
https://qiita.com/rikako_hira/items/80e4476ab97630bfd2dc

LaravelプロジェクトにReact導入その1 -導入 & API連携編-
https://zenn.dev/hyblinx/articles/e7c2267ffde6b3

Inertia.jsの基本的な特徴や仕組み（徹底解説）｜ Kinsta
https://kinsta.com/jp/knowledgebase/inertia-js/

Inertia.jsでシンプルにSPAを構築する　Inertia入門#１ | SOHO MIND
https://blog.shipweb.jp/inertia-js-tutorial-1/

Inertia.js を用いた Laravel React SPA 開発のメリットデメリット。 - ガオラボ
https://tech.gaogao.asia/react-inertia-laravel/■準備

C:/windows/System32/drivers/etc/hosts
127.0.0.1       laravel-react.local
■インストール$ cd docker/laravel/code
$ curl -s https://laravel.build/laravel-react?php=81 | bash

$ cd laravel-react
$ ./vendor/bin/sail up


ブラウザから以下にアクセスして確認。
http://laravel-react.local/■環境の調整

前述の「初期設定」を参考に作業。

■デバッグバーの導入

前述の「初期設定」を参考に作業。

■認証機能の作成$ sail composer require laravel/breeze --dev
$ sail artisan breeze:install react			… TypeScriptを使用したい場合、オプション「--typescript」を追加指定する。
$ sail artisan migrate
■日本語化$ sail composer require askdkc/breezejp --dev
$ sail artisan breezejp
$ sail npm run build
■ページの作成について

例えば /profile のコントローラーは app/Http/Controllers/ProfileController.php にある。
そのビューは resources/js/Pages/Profile/Edit.jsx にある。
ビューはReactなので、「sail npm run build」でビルドしないと反映されない。
つまり

$ sail npm run dev


を実行してから作業するか、

$ sail npm run build


を実行してビルドする必要がある。

■ページの作成例

resources/js/Pages/Hello.jsx を作成。
import GuestLayout from '@/Layouts/GuestLayout';
import { Head } from '@inertiajs/react';

export default function Hello() {
    return (
        <GuestLayout>
            <Head title="Hello" />

            <div>
                <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Hello!</h2>
                <p>これはテストページです。</p>
            </div>
        </GuestLayout>
    );
}


routes/web.php に追加。
Route::get('/hello', function () {
    return Inertia::render('Hello');
});


これでビルドして「/hello」にアクセスすると、「これはテストページです。」のページが表示される。
また resources/js/Pages/Hello.jsx を以下のようにすると、フォームの入力内容によってリアルタイムに画面表示が変わることを確認できる。

import React, { useState } from 'react';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head } from '@inertiajs/react';

export default function Hello() {
    // 名前の状態を管理するためのuseStateフック
    const [name, setName] = useState('');

    // 名前が入力されているかに基づいて表示するメッセージを決定
    const greetingMessage = name ? `こんにちは！${name}さん。` : '名前を入力してください。';

    return (
        <GuestLayout>
            <Head title="Hello" />

            <div>
                <h2 className="font-semibold text-xl text-gray-800 leading-tight pb-4">Hello!</h2>
                <p className="text-gray-600">{greetingMessage}</p>
                <input
                    type="text"
                    value={name}
                    onChange={e => setName(e.target.value)}
                    className="mt-4 p-2 border border-gray-400 rounded"
                    placeholder="名前"
                />
            </div>
        </GuestLayout>
    );
}
■ページの作成例（TypeScriptを使用している場合のエラー対応）

TypeScriptを使用している場合、VSCode上で
「モジュール '@/Layouts/GuestLayout' またはそれに対応する型宣言が見つかりません。ts(2307)」
のようなエラーが表示される。（ビルドは問題無い。）

以下のように相対パスにすれば、エラーは一応表示されなくなるが根本解決では無い。

import GuestLayout from '@/Layouts/GuestLayout';
↓
import GuestLayout from '../Layouts/GuestLayout';


この場合、プロジェクト直下にある tsconfig.json の compilerOptions 内に「"baseUrl": ".",」を追加する。
具体的には、以下のように追加する。

{
    "compilerOptions": {
        "allowJs": true,
        〜略〜
        "noEmit": true,
        "baseUrl": ".",					… 追加。
        "paths": {
            "@/*": ["./resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]
}


VSCodeを再起動するとコンパイラが新しい設定を読み込み、エラーが表示されなくなる。

なお一度エラーが解消された後は、上記変更を元に戻してもエラーが表示されなくなった。
VSCodeのキャッシュによるもの…なのかもしれない。

■メモ

Laravel + Inertia + React + TypeScriptで多言語対応する方法 | しなーるブログ
https://sinar.blog/translation-with-laravel-inertia-react-typescript/
Memo

Advertisement
