Laravel + React + Breazeの自動生成ページ役割解説
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
注意を引きたいボタンのコンポーネント。
Dropdown.tsx
ドロップダウンのコンポーネント
InputError.tsx
エラー文が赤文字で出力される。
Modal.tsx
モーダルのコンポーネント。
NavLink.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