Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

laravel-inertia-react

Name: laravel-inertia-react
Author: asyrafhussin

Laravel と Inertia.js、React を組み合わせた統合パターンを提供するスキルです。Inertia のページコンポーネント作成、`useForm` を使ったフォーム処理、共有データの管理、永続レイアウトの実装など、Inertia.js に関連するタスク全般で活用できます。ページ props の操作や Laravel と React の連携実装時に自動的にトリガーされます。

description の原文を見る

Laravel + Inertia.js + React integration patterns. Use when building Inertia page components, handling forms with useForm, managing shared data, or implementing persistent layouts. Triggers on tasks involving Inertia.js, page props, form handling, or Laravel React integration.

SKILL.md 本文

Laravel + Inertia.js + React

Laravel、Inertia.js、Reactを使用した最新のモノリシックアプリケーション構築のための包括的パターン。シームレスなフルスタック開発向けの30以上のルールを含みます。

適用時期

以下の場合にこれらのガイドラインを参照してください：

Inertiaページコンポーネントの作成
useFormフックによるフォーム処理
共有データと認証の管理
永続レイアウトの実装
ページ間のナビゲーション

優先度別ルール分類

優先度	カテゴリ	影響度	プレフィックス
1	ページコンポーネント	重大	`page-`
2	フォーム・検証	重大	`form-`
3	ナビゲーション・リンク	高	`nav-`
4	共有データ	高	`shared-`
5	レイアウト	中	`layout-`
6	ファイルアップロード	中	`upload-`
7	高度なパターン	低	`advanced-`

クイックリファレンス

1. ページコンポーネント（重大）

page-props-typing - Laravelからページプロパティをタイプする
page-component-structure - 標準ページコンポーネントパターン
page-head-management - Headでタイトルとメタタグを管理
page-default-layout - ページにレイアウトを割り当てる

2. フォーム・検証（重大）

form-useform-basic - 基本的なuseForm使用法
form-validation-errors - Laravel検証エラーの表示
form-processing-state - フォーム送信状態の処理
form-reset-preserve - フォームデータのリセットと保持
form-nested-data - ネストされたフォームデータの処理
form-transform - 送信前のデータ変換

3. ナビゲーション・リンク（高）

nav-link-component - ナビゲーションにLinkを使用
nav-preserve-state - スクロールと状態の保持
nav-partial-reloads - 変更部分のみをリロード
nav-replace-history - 履歴の置き換えと追加

4. 共有データ（高）

shared-auth-user - 認証ユーザーへのアクセス
shared-flash-messages - フラッシュメッセージの処理
shared-global-props - グローバルプロパティへのアクセス
shared-typescript - 共有データのタイプ定義

5. レイアウト（中）

layout-persistent - 永続レイアウトパターン
layout-nested - ネストされたレイアウト
layout-default - デフォルトレイアウト割り当て
layout-conditional - 条件付きレイアウト

6. ファイルアップロード（中）

upload-basic - 基本的なファイルアップロード
upload-progress - アップロード進捗追跡
upload-multiple - 複数ファイルアップロード

7. 高度なパターン（低）

advanced-polling - リアルタイムポーリング
advanced-prefetch - ページのプリフェッチ
advanced-modal-pages - ページとしてのモーダル
advanced-infinite-scroll - 無限スクロール

本質的なパターン

TypeScript付きページコンポーネント

// resources/js/Pages/Posts/Index.tsx
import { Head, Link } from '@inertiajs/react'

interface Post {
  id: number
  title: string
  excerpt: string
  created_at: string
  author: {
    id: number
    name: string
  }
}

interface Props {
  posts: {
    data: Post[]
    links: { url: string | null; label: string; active: boolean }[]
  }
  filters: {
    search?: string
  }
}

export default function Index({ posts, filters }: Props) {
  return (
    <>
      <Head title="Posts" />

      <div className="container mx-auto py-8">
        <h1 className="text-2xl font-bold mb-6">Posts</h1>

        <div className="space-y-4">
          {posts.data.map((post) => (
            <article key={post.id} className="p-4 bg-white rounded-lg shadow">
              <Link href={route('posts.show', post.id)}>
                <h2 className="text-xl font-semibold hover:text-blue-600">
                  {post.title}
                </h2>
              </Link>
              <p className="text-gray-600 mt-2">{post.excerpt}</p>
              <p className="text-sm text-gray-400 mt-2">
                By {post.author.name}
              </p>
            </article>
          ))}
        </div>
      </div>
    </>
  )
}

useFormを使用したフォーム

// resources/js/Pages/Posts/Create.tsx
import { Head, useForm, Link } from '@inertiajs/react'
import { FormEvent } from 'react'

interface Category {
  id: number
  name: string
}

interface Props {
  categories: Category[]
}

export default function Create({ categories }: Props) {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
    category_id: '',
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    post(route('posts.store'), {
      onSuccess: () => reset(),
    })
  }

  return (
    <>
      <Head title="Create Post" />

      <form onSubmit={handleSubmit} className="max-w-2xl mx-auto py-8">
        <div className="mb-4">
          <label htmlFor="title" className="block font-medium mb-1">
            Title
          </label>
          <input
            id="title"
            type="text"
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            className="w-full border rounded px-3 py-2"
          />
          {errors.title && (
            <p className="text-red-500 text-sm mt-1">{errors.title}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="category" className="block font-medium mb-1">
            Category
          </label>
          <select
            id="category"
            value={data.category_id}
            onChange={(e) => setData('category_id', e.target.value)}
            className="w-full border rounded px-3 py-2"
          >
            <option value="">Select a category</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.category_id && (
            <p className="text-red-500 text-sm mt-1">{errors.category_id}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="body" className="block font-medium mb-1">
            Content
          </label>
          <textarea
            id="body"
            value={data.body}
            onChange={(e) => setData('body', e.target.value)}
            rows={10}
            className="w-full border rounded px-3 py-2"
          />
          {errors.body && (
            <p className="text-red-500 text-sm mt-1">{errors.body}</p>
          )}
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={processing}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            {processing ? 'Creating...' : 'Create Post'}
          </button>

          <Link
            href={route('posts.index')}
            className="px-4 py-2 border rounded"
          >
            Cancel
          </Link>
        </div>
      </form>
    </>
  )
}

永続レイアウト

// resources/js/Layouts/AppLayout.tsx
import { Link, usePage } from '@inertiajs/react'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

export default function AppLayout({ children }: Props) {
  const { auth } = usePage().props as { auth: { user: { name: string } } }

  return (
    <div className="min-h-screen bg-gray-100">
      <nav className="bg-white shadow">
        <div className="container mx-auto px-4 py-3 flex justify-between">
          <Link href="/" className="font-bold">
            My App
          </Link>
          <span>Welcome, {auth.user.name}</span>
        </div>
      </nav>

      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
    </div>
  )
}

// resources/js/Pages/Dashboard.tsx
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
  return <h1>Dashboard</h1>
}

// Assign persistent layout
Dashboard.layout = (page: ReactNode) => <AppLayout>{page}</AppLayout>

Laravelコントローラー

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StorePostRequest;
use App\Models\Post;
use App\Models\Category;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

class PostController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::with('author:id,name')
                ->latest()
                ->paginate(10),
            'filters' => request()->only('search'),
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Posts/Create', [
            'categories' => Category::all(['id', 'name']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        $post = Post::create([
            ...$request->validated(),
            'user_id' => auth()->id(),
        ]);

        return redirect()
            ->route('posts.show', $post)
            ->with('success', 'Post created successfully.');
    }

    public function show(Post $post): Response
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('author', 'category'),
        ]);
    }
}

共有データ（HandleInertiaRequests）

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user() ? [
                    'id' => $request->user()->id,
                    'name' => $request->user()->name,
                    'email' => $request->user()->email,
                ] : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ],
        ]);
    }
}

フラッシュメッセージコンポーネント

// resources/js/Components/FlashMessages.tsx
import { usePage } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function FlashMessages() {
  const { flash } = usePage().props as {
    flash: { success?: string; error?: string }
  }
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (flash.success || flash.error) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [flash])

  if (!visible) return null

  return (
    <div className="fixed top-4 right-4 z-50">
      {flash.success && (
        <div className="bg-green-500 text-white px-4 py-2 rounded shadow">
          {flash.success}
        </div>
      )}
      {flash.error && (
        <div className="bg-red-500 text-white px-4 py-2 rounded shadow">
          {flash.error}
        </div>
      )}
    </div>
  )
}

使用方法

詳細な説明とコード例については、個別のルールファイルを参照してください：

rules/form-useform-basic.md
rules/page-props-typing.md
rules/layout-persistent.md

プロジェクト構成

laravel-inertia-react/
├── SKILL.md                 # このファイル - 概要と例
├── README.md                # クイックリファレンスガイド
├── AGENTS.md                # AIエージェント統合ガイド
├── metadata.json            # スキルメタデータと参照
└── rules/
    ├── _sections.md         # ルールカテゴリと優先度
    ├── _template.md         # 新しいルール用テンプレート
    ├── page-*.md            # ページコンポーネントパターン（6ルール）
    ├── form-*.md            # フォーム処理パターン（8ルール）
    ├── nav-*.md             # ナビゲーションパターン（5ルール）
    ├── shared-*.md          # 共有データパターン（4ルール）
    └── layout-*.md          # レイアウトパターン（1ルール）

参考資料

Inertia.js Documentation - 公式Inertia.jsドキュメント
Laravel Documentation - Laravelフレームワークドキュメント
React Documentation - 公式Reactドキュメント
Ziggy - JavaScriptのLaravelルートヘルパー

ライセンス

MITライセンス。このスキルは教育および開発目的での使用を想定して提供されています。

メタデータ

バージョン: 1.0.1
最終更新: 2026-01-17
メンテナー: Asyraf Hussin
ルール数: 6つのカテゴリーに跨る24ルール
技術スタック: Laravel 10以上、Inertia.js 1.0以上、React 18以上、TypeScript 5以上

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: asyrafhussin
リポジトリ: asyrafhussin/agent-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/asyrafhussin/agent-skills / ライセンス: MIT