inertia
LaravelやRailsなどのサーバーサイドとReact/Vue/SvelteをAPIなしで連携させ、現代的なモノリスアプリを効率的に構築するSkill。
📜 元の英語説明(参考)
Build modern monolith applications with Inertia.js - combining server-side frameworks (Laravel, Rails, etc.) with React/Vue/Svelte frontends without building APIs. Use when creating Inertia pages and layouts, working with Link component for navigation, building forms with Form component or useForm hook, handling validation and errors, managing shared data and props, implementing authentication and authorization, using manual visits with router, working with partial reloads, setting up persistent layouts, or configuring client-side setup.
🇯🇵 日本人クリエイター向け解説
LaravelやRailsなどのサーバーサイドとReact/Vue/SvelteをAPIなしで連携させ、現代的なモノリスアプリを効率的に構築するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o inertia.zip https://jpskill.com/download/6156.zip && unzip -o inertia.zip && rm inertia.zip$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6156.zip -OutFile "$d\inertia.zip"; Expand-Archive "$d\inertia.zip" -DestinationPath $d -Force; ri "$d\inertia.zip"完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
inertia.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
inertiaフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[Skill 名] inertia
Inertia.js
APIなしでSPAを構築するためのモダンなモノリスフレームワークです。サーバーサイドフレームワークのパワーとReact/Vue/Svelteのフロントエンドを組み合わせます。
コアコンセプト
Inertiaはビューレイヤーを置き換えます。コントローラーはサーバーサイドテンプレートの代わりにJavaScriptページコンポーネントを返します。<Link>コンポーネントはクリックをXHR訪問としてインターセプトし、ページ全体の再読み込みなしでSPA体験を提供します。
クイックリファレンス
基本的なページ構造
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome {{ user.name }}</h1>
</Layout>
</template>ナビゲーション
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>フォーム送信
<!-- Simple Form Component -->
<Form action="/users" method="post">
<input type="text" name="name" />
<button type="submit">Create</button>
</Form>
<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>トピック別ドキュメント
| トピック | 参照ファイル | 説明 |
|---|---|---|
| フォーム | forms.md | Formコンポーネント、useFormヘルパー、バリデーション、エラーハンドリング |
| リンクとナビゲーション | links.md | Linkコンポーネント、手動訪問、アクティブ状態 |
| バリデーション | validation.md | サーバーサイドバリデーション、エラーバッグ、エラー表示 |
| ページとレイアウト | pages-layouts.md | ページコンポーネント、永続レイアウト、デフォルトレイアウト |
| データとプロップス | data-props.md | 共有データ、部分的な再読み込み、遅延プロップス |
| 認証 | authentication.md | 認証パターン、CSRF保護、認可 |
| セットアップ | setup.md | クライアントサイドの初期化、サーバーサイドのセットアップ |
| 高度な機能 | advanced.md | イベント、エラーハンドリング、スクロール管理、SSR |
一般的なパターン
バリデーションエラーの表示
<div v-if="errors.email">{{ errors.email }}</div>共有データへのアクセス
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>状態/スクロールの保持
<Link href="/form" preserve-state preserve-scroll>Edit</Link>部分的な再読み込み
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })フレームワークサポート
- クライアント: Vue 3 (
@inertiajs/vue3)、React (@inertiajs/react)、Svelte (@inertiajs/svelte) - サーバー: Laravel (公式)、Rails、Phoenix、Symfony (コミュニティアダプター)
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Inertia.js
Modern monolith framework for building SPAs without APIs. Combine server-side framework power with React/Vue/Svelte frontends.
Core Concept
Inertia replaces your view layer - controllers return JavaScript page components instead of server-side templates. The <Link> component intercepts clicks for XHR visits, providing SPA experience without full page reloads.
Quick Reference
Basic Page Structure
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome {{ user.name }}</h1>
</Layout>
</template>Navigation
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>Form Submission
<!-- Simple Form Component -->
<Form action="/users" method="post">
<input type="text" name="name" />
<button type="submit">Create</button>
</Form>
<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>Documentation by Topic
| Topic | Reference File | Description |
|---|---|---|
| Forms | forms.md | Form component, useForm helper, validation, error handling |
| Links & Navigation | links.md | Link component, manual visits, active states |
| Validation | validation.md | Server-side validation, error bags, error display |
| Pages & Layouts | pages-layouts.md | Page components, persistent layouts, default layouts |
| Data & Props | data-props.md | Shared data, partial reloads, deferred props |
| Authentication | authentication.md | Auth patterns, CSRF protection, authorization |
| Setup | setup.md | Client-side initialization, server-side setup |
| Advanced | advanced.md | Events, error handling, scroll management, SSR |
Common Patterns
Displaying Validation Errors
<div v-if="errors.email">{{ errors.email }}</div>Accessing Shared Data
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>Preserving State/Scroll
<Link href="/form" preserve-state preserve-scroll>Edit</Link>Partial Reloads
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })Framework Support
- Client: Vue 3 (
@inertiajs/vue3), React (@inertiajs/react), Svelte (@inertiajs/svelte) - Server: Laravel (official), Rails, Phoenix, Symfony (community adapters)