#9 完了

backend/app/controllers/tags_controller.rb

@@ -2,7 +2,11 @@ class TagsController < ApplicationController
   before_action :set_tags, only: %i[ show update destroy ]
 
   def index
+    if params[:post].present?
+      @tags = Tag.joins(:posts).where(posts: { id: params[:post] })
+    else
       @tags = Tag.all
+    end
     render json: @tags
   end
 

frontend/src/App.tsx

@@ -13,7 +13,10 @@ const App = () => {
       <div className="flex flex-col h-screen w-screen">
         <TopNav />
         <div className="flex flex-1">
-          <TagSidebar />
+          <Routes>
+            <Route path="/posts/:postId" element={<TagSidebar />} />
+            <Route path="*" element={<TagSidebar />} />
+          </Routes>
           <main className="flex-1 overflow-y-auto p-4">
             <Routes>
               <Route path="/" element={<PostPage />} />

frontend/src/components/TagSidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
 import TagSearch from './TagSearch'
 
@@ -17,12 +17,14 @@ const tagNameMap: { [key: string]: string } = {
     nico:       'ニコニコタグ' }
 
 const TagSidebar: React.FC = () => {
+  const { postId } = useParams<{ postId?: number }> ()
   const [tags, setTags] = useState<TagByCategory> ({ })
 
   useEffect(() => {
     const fetchTags = async () => {
       try {
-        const response = await axios.get (`${API_BASE_URL}/tags`)
+        const response = await axios.get (`${API_BASE_URL}/tags`
+            + (postId ? `?post=${ postId }` : ''))
         const tagsTmp: TagByCategory = { }
         for (const tag of response.data)
           {
@@ -37,7 +39,7 @@ const TagSidebar: React.FC = () => {
     }
 
     fetchTags()
-  }, [])
+  }, [postId])
 
   return (
       <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">