# Part 3: リレーションシップ: コメント [Part 2](./authentication.md) を終えて、ブログには投稿と著者が揃いました。最終パートでは読者に声を持たせます: 投稿とユーザーの両方に属する `comments` テーブルを追加し、モデルのリレーションシップを配線して、投稿ページにコメントフォームを作ります。 **このパートで学ぶこと:** - 2 つの親を参照するテーブル（`postId`、`authorId`）をモデリングする方法 - 型付きの結果が得られる `hasMany` / `belongsTo` リレーションシップの宣言方法 - `findWithOrFail` とクエリビルダーの `.with()` でリレーションを eager load する方法 - Inertia のフォームからネストしたリソース（`POST /posts/:id/comments`）に送信する方法 ## 1. comments テーブルを定義する `db/schema.ts` の `posts` の下にテーブルを追加します。 ```ts export const comments = sqliteTable('comments', { id: integer('id').primaryKey({ autoIncrement: true }), postId: integer('post_id').notNull().references(() => posts.id, { onDelete: 'cascade' }), authorId: integer('author_id').notNull().references(() => users.id), body: text('body').notNull(), createdAt: text('created_at').notNull().$defaultFn(() => new Date().toISOString()), }) ``` `onDelete: 'cascade'` は、投稿を削除するとそのコメントも一緒に削除されることを意味します。今回は完全に新規のテーブルなので、普通のマイグレーションで十分です — リセットは要りません。 ```bash bun run db:make create_comments_table bun run db:migrate ``` ## 2. Comment モデルを作る `app/Models/Comment.ts` を作成します。 ```ts import { defineModel, type BelongsToRecord } from '@guren/core' import { comments } from '../../db/schema.js' import type { PostRecord } from './Post.js' import type { UserRecord } from './User.js' export type CommentRecord = typeof comments.$inferSelect export class Comment extends defineModel(comments) { static fillable = ['postId', 'authorId', 'body'] static override relationTypes: { post: BelongsToRecord author: BelongsToRecord> } = { post: null, author: null, } } Comment.belongsTo('post', () => import('./Post.js').then((m) => m.Post), 'postId', 'id') Comment.belongsTo('author', () => import('./User.js').then((m) => m.User), 'authorId', 'id') ``` 次に逆側を宣言します。`app/Models/Post.ts` を更新して、投稿が多数のコメントを持つようにします。 ```ts import { defineModel, type BelongsToRecord, type HasManyRecord } from '@guren/core' import { posts } from '../../db/schema.js' import type { CommentRecord } from './Comment.js' import type { UserRecord } from './User.js' export type PostRecord = typeof posts.$inferSelect export type NewPostRecord = typeof posts.$inferInsert export type PostAuthor = Pick export class Post extends defineModel(posts) { static fillable = ['title', 'body', 'authorId'] static override relationTypes: { author: BelongsToRecord comments: HasManyRecord } = { author: null, comments: [], } } Post.belongsTo('author', () => import('./User.js').then((m) => m.User), 'authorId', 'id') Post.hasMany('comments', () => import('./Comment.js').then((m) => m.Comment), 'postId', 'id') ``` `hasMany('comments', ..., 'postId', 'id')` は「`postId` がこの投稿の `id` に一致するコメントたち」と読めます。`relationTypes` を宣言しておくと、eager load 時の `post.comments` は `CommentRecord[]` と型付けされます。 ## 3. コントローラーでコメントを読み込む `app/Http/Controllers/PostController.ts` の `show` を更新し、バリデーターのインポートを追加します。 ```ts import { Comment } from '../../Models/Comment.js' // inside PostController: async show(): Promise { const { id } = this.validateParams(PostIdParamSchema) const post = await Post.findWithOrFail(id, 'author') const comments = await Comment.where('postId', id) .with('author') .orderBy('createdAt', 'desc') .get() return this.inertia(pages.posts.Show, { post: { id: post.id, title: post.title, body: post.body, createdAt: post.createdAt, author: post.author ? { id: post.author.id, name: post.author.name } : null, }, comments: comments.map((comment) => ({ id: comment.id, body: comment.body, createdAt: comment.createdAt, author: comment.author ? { name: comment.author.name } : null, })), }) } ``` `Comment.where(...)` はクエリビルダーを返すので、`.with('author')`（各コメントの著者を、コメントごとに 1 クエリ発行するのではなく、まとめて 1 回で eager load します）と並び替えをチェーンできます。Part 2 と同様、レコードを明示的なペイロードにマッピングして、`passwordHash` が決してブラウザに届かないようにします。 ## 4. 新しいコメントを受け付ける `app/Http/Validators/CommentValidator.ts` を作成します。 ```ts import { z } from 'zod' export const CommentPayloadSchema = z.object({ body: z.string().trim().min(1, 'Comment is required.'), }) export const CommentPostParamSchema = z.object({ id: z.coerce.number().int().positive(), }) ``` `app/Http/Controllers/CommentController.ts` を作成します。 ```ts import { Controller } from '@guren/core' import { Comment } from '../../Models/Comment.js' import { Post } from '../../Models/Post.js' import type { UserRecord } from '../../Models/User.js' import { CommentPayloadSchema, CommentPostParamSchema } from '../Validators/CommentValidator.js' export default class CommentController extends Controller { async store(): Promise { const { id } = this.validateParams(CommentPostParamSchema) const post = await Post.findOrFail(id) const data = await this.validateBody(CommentPayloadSchema) const user = await this.auth.userOrFail() await Comment.create({ postId: post.id, authorId: user.id, body: data.body, }) return this.redirect(`/posts/${post.id}`) } } ``` `Post.findOrFail(id)` が存在しない投稿へのコメントを防ぎ、`userOrFail` が著者の存在を保証します。 `routes/web.ts` の既存の `/posts` グループ内にルートを登録します。 ```ts import CommentController from '../app/Http/Controllers/CommentController.js' import { CommentPayloadSchema } from '../app/Http/Validators/CommentValidator.js' // inside router.group('/posts', (posts) => { ... }): posts.middleware('auth').post('/:id/comments', { name: 'comments.store', body: CommentPayloadSchema }, [CommentController, 'store']) ``` ## 5. ページにコメントセクションを追加する `resources/js/pages/posts/Show.tsx` を、コメント一覧とサインイン済みユーザー向けフォームを備えたバージョンに置き換えます。 ```tsx import { Link, useForm, usePage } from '@inertiajs/react' import { route } from '@/.guren/routes.gen' interface CommentData { id: number body: string createdAt: string author: { name: string } | null } interface Props { post: { id: number title: string body: string createdAt: string author: { id: number; name: string } | null } comments: CommentData[] } export default function PostsShow({ post, comments }: Props) { const { props } = usePage<{ auth?: { user?: { name?: string } | null } }>() const isAuthenticated = Boolean(props.auth?.user) const form = useForm({ body: '' }) return (
← Back to posts

{post.title}

{new Date(post.createdAt).toLocaleDateString()} · {post.author?.name ?? 'Unknown author'}

{post.body.split('\n').map((paragraph, index) => (

{paragraph}

))}

Comments{comments.length > 0 && ` (${comments.length})`}

{comments.length === 0 ? (

No comments yet.

) : (
    {comments.map((comment) => (

  • {comment.body}

    {comment.author?.name ?? 'Unknown'} ·{' '} {new Date(comment.createdAt).toLocaleDateString()}

    • ))}
)} {isAuthenticated ? (
{ event.preventDefault() form.post(route('comments.store', { id: post.id }), { onSuccess: () => form.reset(), }) }} >