Zenn
📘

Laravel + React + Breazeの自動生成ページ役割解説

2024/11/25に公開
Laravel
React
beaze
tech

Breezeをインストールしたらページが自動作成されるので、忘備録メモ。主にresoucesの中の解説をしていきます。結構そのままの名前なので解説も不要だけど、「これがある」って把握するために書き留め。使っていくうちに適宜修正予定。一旦はGPTの見解も入っています。

環境

  • PHP 8.3.12
  • Laravel11
  • React18
  • Typescript
  • Breeze

js/

app.tsx

アプリケーションのエントリーポイント。このファイルでReactコンポーネントをレンダリングし、Laravelのテンプレートと連携します。

Components/

雑に説明すると、Webサイトに表示されているパーツ集。HTMLを覚えた人には「なんでパーツだけ登録するの」って感じかもしれないけど、理由は再利用しやすいから。
すでに型宣言なども済んでるし、カスタムすることでオリジナル感が出せる。
classNameを渡せるので、カスタムするならCSSを直接編集するんじゃなくてclassを渡した方が良さそう。

ApplicationLogo.tsx

アプリのロゴを設定しておくコンポーネント

Checkbox.tsx

Checkboxのコンポーネント。<input>の属性を安全に受け取れる。

DangerButton.tsx

注意を引きたいボタンのコンポーネント。

ドロップダウンのコンポーネント

InputError.tsx

エラー文が赤文字で出力される。

Modal.tsx

モーダルのコンポーネント。

テキストリンクのコンポーネント。

PrimaryButton.tsx

一番よく使うボタンのコンポーネント。

ResponsiveNavLink.tsx

レスポンシブ対応でどこでも使えるリンクのコンポーネント。

SecondaryButton.tsx

二番手のボタンのコンポーネント。

TextInput.tsx

inputフィールドのコンポーネント。

Layouts/

ReactやNextを知っている人なら馴染みがある。文字通り、レイアウトの大枠を設定しておけます。これも編集はできるけど、影響範囲が大きい。

AuthenticatedLayout.tsx

ログイン済みユーザーが見ることができるレイアウト。

GuestLayout.tsx

ログインしてないユーザー（ゲストユーザー）にみえるレイアウト。

Pages/

各ページに対応するコンポーネントが配置されます。Breezeでは、ページがInertia.jsを介して対応付けられているので、消しちゃうとbuildに支障が出る（たぶん）。

Welcome.tsx

ログイン前にまずみえるページ。

Dashboard.tsx

ログイン後にまずみえるページ。

Auth/

主に認証関連のページが格納。ログイン、登録、パスワードリセットなど。

ConfirmPassword.tsx

入力したパスワードを確認するためのコンポーネント。

ForgotPassword.tsx

ユーザーがパスワードを忘れた場合に使用されるコンポーネント。

Login.tsx

ログインの時に使うコンポーネント。フォームバリデーション、エラーメッセージの表示、認証処理、リダイレクトなどが含まれています。

Register.tsx

新規アカウントを作成するためのフォームを提供するコンポーネント。

ResetPassword.tsx

パスワードをリセットするためのコンポーネント。

VerifyEmail.tsx

ユーザーがメールアドレスを確認するための画面を表示するコンポーネント。

Profile/

ユーザーのプロフィールやアカウント設定関連のページが格納。プロフィール表示、編集ページなど。パスワード変更ページ。

Partials/

テンプレートに似た役割のコンポーネント。再利用可能な小さな UI コンポーネントやレイアウトの一部など。

DeleteUserForm.tsx

ユーザーが自身のアカウントを削除するためのフォームコンポーネント。

UpdatePasswordForm.tsx

パスワード変更用。

UpdateProfileInformationForm.tsx

ユーザーのプロフィール情報を更新するためのフォームコンポーネント。

types/

主に型の宣言をします。

global.d.ts

global.d.tsは、グローバル変数や関数、インターフェースなどを定義し、プロジェクト全体で使用できるようにします。

declare global {
    // グローバル変数の型定義
    var myGlobalVar: string;

    // グローバル関数の型定義
    function greet(name: string): string;

    // Windowオブジェクトの拡張
    interface Window {
        myCustomProperty: number;
    }
}

// グローバル変数や関数を使用
myGlobalVar = "Hello, world!";
greet("John"); // "Hello, John!"
window.myCustomProperty = 123; // OK

index.d.ts

index.d.tsは、特定のモジュールやライブラリの型定義を提供します。主に外部モジュールをTypeScriptで利用する際に使います。

// index.d.ts
declare module 'my-custom-library' {
    export function myFunction(): string;
}

// 使用例
import { myFunction } from 'my-custom-library';

console.log(myFunction()); // 型補完が効く

vite-env.d.ts

vite-env.d.tsは、Vite特有の環境変数（import.meta.env）や機能（import.meta.glob）の型定義を提供します。

// vite-env.d.ts
interface ImportMetaEnv {
    VITE_API_URL: string;
    VITE_APP_NAME: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

// 使用例
console.log(import.meta.env.VITE_API_URL);  // 型補完が効く
console.log(import.meta.env.VITE_APP_NAME); // 型補完が効く

bootstrap.ts

Reactアプリケーションの初期設定を行うためのファイル。このファイルでは、アプリケーションの設定、依存関係の初期化、グローバルなスタイルや設定の読み込みが行われます。

まとめ

基本的にLayauto/とPages/を編集していく。Components/も触っていけど慎重にする。
なんのファイルがあるか把握できたので、主にPagesを上書きする形で制作を進めたら良さそうです。

Discussion