Merge branch 'feature/140' into feature/139

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "humps": "^2.0.1",
         "lucide-react": "^0.511.0",
         "markdown-it": "^14.1.0",
+        "path-to-regexp": "^8.3.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-helmet-async": "^2.0.5",
@@ -34,7 +35,8 @@
         "react-youtube": "^10.1.0",
         "remark-gfm": "^4.0.1",
         "tailwind-merge": "^3.3.0",
-        "unist-util-visit-parents": "^6.0.1"
+        "unist-util-visit-parents": "^6.0.1",
+        "zustand": "^5.0.8"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -5579,6 +5581,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7313,6 +7325,35 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

frontend/package.json

@@ -27,6 +27,7 @@
     "humps": "^2.0.1",
     "lucide-react": "^0.511.0",
     "markdown-it": "^14.1.0",
+    "path-to-regexp": "^8.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-helmet-async": "^2.0.5",
@@ -36,6 +37,7 @@
     "react-youtube": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
+    "zustand": "^5.0.8",
     "unist-util-visit-parents": "^6.0.1"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { BrowserRouter,
 	 Routes,
 	 useLocation } from 'react-router-dom'
 
+import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import { Toaster } from '@/components/ui/toaster'
 import { API_BASE_URL } from '@/config'
@@ -43,7 +44,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
 	    <Route path="/posts" element={<PostListPage/>}/>
 	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
-	    <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
+	    <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
 	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
 	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
 	    <Route path="/wiki" element={<WikiSearchPage/>}/>
@@ -61,6 +62,13 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 }
 
 
+const PostDetailRoute = ({ user }: { user: User | null }) => {
+  const location = useLocation ()
+  const key = location.pathname
+  return <PostDetailPage key={key} user={user}/>
+}
+
+
 export default (() => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
@@ -107,11 +115,14 @@ export default (() => {
   }
 
   return (
-      <BrowserRouter>
+      <>
-	<div className="flex flex-col h-screen w-screen">
+	<RouteBlockerOverlay/>
-	  <TopNav user={user}/>
+	<BrowserRouter>
-	  <RouteTransitionWrapper user={user} setUser={setUser}/>
+	  <div className="flex flex-col h-screen w-screen">
-	</div>
+	    <TopNav user={user}/>
-	<Toaster/>
+	    <RouteTransitionWrapper user={user} setUser={setUser}/>
-      </BrowserRouter>)
+	  </div>
+	  <Toaster/>
+	</BrowserRouter>
+      </>)
 }) satisfies FC

frontend/src/components/PostList.tsx

@@ -1,9 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useRef } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { fetchPost } from '@/lib/posts'
+import PrefetchLink from '@/components/PrefetchLink'
 
 import type { FC, MouseEvent } from 'react'
 
@@ -45,12 +46,13 @@ export default (({ posts, onClick }: Props) => {
 	  }
 
 	  return (
-	      <Link to={hRef}
+	      <PrefetchLink
-		    key={id}
+		  to={hRef}
-		    className="w-40 h-40"
+		  key={id}
-		    onMouseEnter={() => prefetch (id)}
+		  className="w-40 h-40"
-		    onFocus={() => prefetch (id)}
+		  onMouseEnter={() => prefetch (id)}
-		    onClick={handleClick}>
+		  onFocus={() => prefetch (id)}
+		  onClick={handleClick}>
 		<motion.div
 		    ref={cardRef}
 		    layoutId={`page-${ id }`}
@@ -79,7 +81,7 @@ export default (({ posts, onClick }: Props) => {
 		       decoding="async"
 		       className="object-cover w-full h-full"/>
 		</motion.div>
-	      </Link>)
+	      </PrefetchLink>)
 	})}
       </div>)
 }) satisfies FC<Props>

frontend/src/components/PrefetchLink.tsx

@@ -0,0 +1,89 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { forwardRef, useMemo } from 'react'
+import { createPath, useNavigate } from 'react-router-dom'
+
+import { useOverlayStore } from '@/components/RouteBlockerOverlay'
+import { prefetchForURL } from '@/lib/prefetchers'
+import { cn } from '@/lib/utils'
+
+import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
+import type { To } from 'react-router-dom'
+
+type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    to:             To
+    replace?:       boolean
+    className?:     string
+    cancelOnError?: boolean }
+
+
+export default forwardRef<HTMLAnchorElement, Props> (({
+    to,
+    replace,
+    className,
+    onMouseEnter,
+    onTouchStart,
+    onClick,
+    cancelOnError = false,
+    ...rest }, ref) => {
+  const navigate = useNavigate ()
+  const qc = useQueryClient ()
+  const url = useMemo (() => {
+    const path = (typeof to === 'string') ? to : createPath (to)
+    return (new URL (path, location.origin)).toString ()
+  }, [to])
+  const setOverlay = useOverlayStore (s => s.setActive)
+
+  const doPrefetch = async () => {
+    try
+    {
+      await prefetchForURL (qc, url)
+      return true
+    }
+    catch (e)
+    {
+      console.error ('データ取得エラー', e)
+      return false
+    }
+  }
+
+  const handleMouseEnter = async (ev: MouseEvent<HTMLAnchorElement>) => {
+    onMouseEnter?.(ev)
+    await doPrefetch ()
+  }
+
+  const handleTouchStart = async (ev: TouchEvent<HTMLAnchorElement>) => {
+    onTouchStart?.(ev)
+    await doPrefetch ()
+  }
+
+  const handleClick = async (ev: MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(ev)
+
+    if (ev.defaultPrevented
+	|| ev.metaKey
+	|| ev.ctrlKey
+	|| ev.shiftKey
+	|| ev.altKey)
+      return
+
+    ev.preventDefault ()
+
+    setOverlay (true)
+    const ok = await doPrefetch ()
+    setOverlay (false)
+
+    if (!(ok) && cancelOnError)
+      return
+
+    navigate (to, { replace })
+  }
+
+  return (
+      <a ref={ref}
+	 href={typeof to === 'string' ? to : createPath (to)}
+	 onMouseEnter={handleMouseEnter}
+	 onTouchStart={handleTouchStart}
+	 onClick={handleClick}
+	 className={cn ('cursor-pointer', className)}
+	 {...rest}/>)
+})

frontend/src/components/RouteBlockerOverlay.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+import { create } from 'zustand'
+
+import type { FC } from 'react'
+
+type OverlayStore = {
+    active:     boolean
+    setActive:  (v: boolean) => void }
+
+
+export const useOverlayStore = create<OverlayStore> (set => ({
+    active:     false,
+    setActive:  v => set ({ active: v }) }))
+
+
+export default (() => {
+  const active = useOverlayStore (s => s.active)
+
+  useEffect (() => {
+    if (active)
+      {
+	document.body.style.overflow = 'hidden'
+	document.body.setAttribute ('aria-busy', 'true')
+      }
+    else
+      {
+	document.body.style.overflow = ''
+	document.body.removeAttribute ('aria-busy')
+      }
+  }, [active])
+
+  if (!(active))
+    return null
+
+  return (
+      <div
+	  role="progressbar"
+	  aria-label="Loading"
+	  className="fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm pointer-events-auto">
+	<div className="absolute inset-0 flex items-center justify-center">
+	  <div className="rounded-2xl bg-black/60 text-white px-6 py-3 text-sm">
+	    Loading...
+	  </div>
+	</div>
+      </div>)
+}) satisfies FC

frontend/src/components/TagLink.tsx

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import PrefetchLink from '@/components/PrefetchLink'
 import { API_BASE_URL } from '@/config'
 import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
 import { cn } from '@/lib/utils'
@@ -13,7 +14,8 @@ import type { Tag } from '@/types'
 type CommonProps = { tag:         Tag
 		     nestLevel?:  number
 		     withWiki?:   boolean
-		     withCount?:  boolean }
+		     withCount?:  boolean
+		     prefetch?:   boolean }
 
 type PropsWithLink =
     CommonProps & { linkFlg?: true } & Partial<ComponentProps<typeof Link>>
@@ -29,6 +31,7 @@ export default (({ tag,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
+		   prefetch  = false,
 		   ...props }: Props) => {
   const [havingWiki, setHavingWiki] = useState (true)
 
@@ -100,11 +103,19 @@ export default (({ tag,
 	    </>)}
 	{linkFlg
 	 ? (
-	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+	    prefetch
+	    ? <PrefetchLink
+		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
 		  className={linkClass}
 		  {...props}>
-	      {tag.name}
+		{tag.name}
-	    </Link>)
+	      </PrefetchLink>
+	    : <Link
+		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+		  className={linkClass}
+		  {...props}>
+		{tag.name}
+	      </Link>)
 	 : (
 	    <span className={spanClass}
 		  {...props}>

frontend/src/components/TagSidebar.tsx

@@ -10,16 +10,17 @@ import SidebarComponent from '@/components/layout/SidebarComponent'
 import { API_BASE_URL } from '@/config'
 import { CATEGORIES } from '@/consts'
 
-import type { FC } from 'react'
+import type { FC, MouseEvent } from 'react'
 
 import type { Post, Tag } from '@/types'
 
 type TagByCategory = Record<string, Tag[]>
 
-type Props = { posts: Post[] }
+type Props = { posts:     Post[]
+	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-export default (({ posts }: Props) => {
+export default (({ posts, onClick }: Props) => {
   const navigate = useNavigate ()
 
   const [tagsVsbl, setTagsVsbl] = useState (false)
@@ -65,7 +66,7 @@ export default (({ posts }: Props) => {
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
 	      tags[cat].map (tag => (
 		  <li key={tag.id} className="mb-1">
-		    <TagLink tag={tag}/>
+		    <TagLink tag={tag} prefetch onClick={onClick}/>
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>関聯</SectionTitle>

frontend/src/components/TopNav.tsx

@@ -1,18 +1,18 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import Separator from '@/components/MenuSeparator'
+import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
-import { API_BASE_URL } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import { fetchTagByName } from '@/lib/tags'
 import { cn } from '@/lib/utils'
+import { fetchWikiPage } from '@/lib/wiki'
 
-import type { FC } from 'react'
+import type { FC, MouseEvent } from 'react'
 
-import type { Menu, Tag, User, WikiPage } from '@/types'
+import type { Menu, User } from '@/types'
 
 type Props = { user: User | null }
 
@@ -120,11 +120,8 @@ export default (({ user }: Props) => {
     const fetchPostCount = async () => {
       try
       {
-	const pageRes = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
+	const wikiPage = await fetchWikiPage (String (wikiId ?? ''))
-	const wikiPage = toCamel (pageRes.data as any, { deep: true }) as WikiPage
+	const tag = await fetchTagByName (wikiPage.title)
-
-	const tagRes = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
-	const tag = toCamel (tagRes.data as any, { deep: true }) as Tag
 
 	setPostCount (tag.postCount)
       }
@@ -141,11 +138,11 @@ export default (({ user }: Props) => {
 	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
 			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
 	  <div className="flex items-center gap-2 h-full">
-	    <Link to="/"
+	    <PrefetchLink to="/"
 		  className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
 			     dark:text-pink-300 dark:hover:text-pink-100">
 	      ぼざクリ タグ広場
-	    </Link>
+	    </PrefetchLink>
 
 	    <div ref={navRef} className="relative hidden md:flex h-full items-center">
 	      <div aria-hidden
@@ -157,15 +154,16 @@ export default (({ user }: Props) => {
 			    opacity:    hl.visible ? 1 : 0 }}/>
 
 	      {menu.map ((item, i) => (
-		  <Link key={i}
+		  <PrefetchLink
-			to={item.to}
+		      key={i}
-			ref={el => {
+		      to={item.to}
-			  itemsRef.current[i] = el
+		      ref={(el: (HTMLAnchorElement | null)) => {
-			}}
+			itemsRef.current[i] = el
-			className={cn ('relative z-10 flex h-full items-center px-5',
+		      }}
-				       (i === openItemIdx) && 'font-bold')}>
+		      className={cn ('relative z-10 flex h-full items-center px-5',
+				     (i === openItemIdx) && 'font-bold')}>
 		    {item.name}
-		  </Link>))}
+		  </PrefetchLink>))}
 	    </div>
 	  </div>
 
@@ -203,11 +201,12 @@ export default (({ user }: Props) => {
 		  'component' in item
 		  ? <Fragment key={`c-${ i }`}>{item.component}</Fragment>
 		  : (
-		      <Link key={`l-${ i }`}
+		      <PrefetchLink
-			    to={item.to}
+			  key={`l-${ i }`}
-			    className="h-full flex items-center px-3">
+			  to={item.to}
+			  className="h-full flex items-center px-3">
 			{item.name}
-		      </Link>)))}
+		      </PrefetchLink>)))}
 	    </motion.div>
 	  </AnimatePresence>
 	</div>
@@ -229,19 +228,20 @@ export default (({ user }: Props) => {
 		<Separator/>
 		{menu.map ((item, i) => (
 		    <Fragment key={i}>
-		      <Link to={i === openItemIdx ? item.to : '#'}
+		      <PrefetchLink
-			    className={cn ('w-full min-h-[40px] flex items-center pl-8',
+			  to={i === openItemIdx ? item.to : '#'}
-					   ((i === openItemIdx)
+			  className={cn ('w-full min-h-[40px] flex items-center pl-8',
-					    && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+				     ((i === openItemIdx)
-			    onClick={ev => {
+				      && 'font-bold bg-yellow-50 dark:bg-red-950'))}
-			      if (i !== openItemIdx)
+			  onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
-				{
+			    if (i !== openItemIdx)
-				  ev.preventDefault ()
+			      {
-				  setOpenItemIdx (i)
+				ev.preventDefault ()
-				}
+				setOpenItemIdx (i)
-			    }}>
+			      }
+			  }}>
 			{item.name}
-		      </Link>
+		      </PrefetchLink>
 
 		      <AnimatePresence initial={false}>
 			{i === openItemIdx && (
@@ -267,11 +267,12 @@ export default (({ user }: Props) => {
 					{subItem.component}
 				      </Fragment>)
 				  : (
-				      <Link key={`sp-l-${ i }-${ j }`}
+				      <PrefetchLink
-					    to={subItem.to}
+					  key={`sp-l-${ i }-${ j }`}
-					    className="w-full min-h-[36px] flex items-center pl-12">
+					  to={subItem.to}
+					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
-				      </Link>)))}
+				      </PrefetchLink>)))}
 			    </motion.div>)}
 		      </AnimatePresence>
 		    </Fragment>))}

frontend/src/components/common/Pagination.tsx

@@ -1,4 +1,6 @@
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
 
 import type { FC } from 'react'
 
@@ -61,7 +63,7 @@ export default (({ page, totalPages, siblingCount = 4 }) => {
       <nav className="mt-4 flex justify-center" aria-label="Pagination">
 	<div className="flex items-center gap-2">
 	  {(page > 1)
-	   ? <Link to={buildTo (page - 1)} aria-label="前のページ">&lt;</Link>
+	   ? <PrefetchLink to={buildTo (page - 1)} aria-label="前のページ">&lt;</PrefetchLink>
 	   : <span aria-hidden>&lt;</span>}
 
 	  {pages.map ((p, idx) => (
@@ -69,10 +71,10 @@ export default (({ page, totalPages, siblingCount = 4 }) => {
 	      ? <span key={`dots-${ idx }`}>…</span>
 	      : ((p === page)
 		 ? <span key={p} className="font-bold" aria-current="page">{p}</span>
-		 : <Link key={p} to={buildTo (p)}>{p}</Link>)))}
+		 : <PrefetchLink key={p} to={buildTo (p)}>{p}</PrefetchLink>)))}
 
 	  {(page < totalPages)
-	   ? <Link to={buildTo (page + 1)} aria-label="次のページ">&gt;</Link>
+	   ? <PrefetchLink to={buildTo (page + 1)} aria-label="次のページ">&gt;</PrefetchLink>
 	   : <span aria-hidden>&gt;</span>}
 	</div>
       </nav>)

frontend/src/lib/api.ts

@@ -0,0 +1,65 @@
+import axios from 'axios'
+import toCamel from 'camelcase-keys'
+
+import { API_BASE_URL } from '@/config'
+
+type Opt = {
+    params?:  Record<string, unknown>
+    headers?: Record<string, string> }
+
+const client = axios.create ({ baseURL: API_BASE_URL })
+
+
+const withUserCode = (opt?: Opt): Opt => ({
+    ...opt,
+    headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') ?? '',
+	       ...(opt?.headers ?? { }) } })
+
+
+const apiP = async <T> (
+    method: 'post' | 'put' | 'patch',
+    path:   string,
+    body?:  unknown,
+    opt?:   Opt,
+): Promise<T> => {
+  const res = await client[method] (path, body ?? { }, withUserCode (opt))
+  return toCamel (res.data as any, { deep: true }) as T
+}
+
+
+export const apiGet = async <T> (
+    path: string,
+    opt?: Opt,
+): Promise<T> => {
+  const res = await client.get (path, withUserCode (opt))
+  return toCamel (res.data as any, { deep: true }) as T
+}
+
+
+export const apiPost = async <T> (
+    path:   string,
+    body?:  unknown,
+    opt?:   Opt,
+): Promise<T> => apiP ('post', path, body, opt)
+
+
+export const apiPut = async <T> (
+    path:   string,
+    body?:  unknown,
+    opt?:   Opt,
+): Promise<T> => apiP ('put', path, body, opt)
+
+
+export const apiPatch = async <T> (
+    path:   string,
+    body?:  unknown,
+    opt?:   Opt,
+): Promise<T> => apiP ('patch', path, body, opt)
+
+
+export const apiDelete = async (
+    path: string,
+    opt?: Opt,
+): Promise<void> => {
+  await client.delete (path, withUserCode (opt))
+}

frontend/src/lib/posts.ts

@@ -1,23 +1,30 @@
-import axios from 'axios'
+import { apiDelete, apiGet, apiPost } from '@/lib/api'
-import toCamel from 'camelcase-keys'
-
-import { API_BASE_URL } from '@/config'
 
 import type { Post } from '@/types'
 
 
-export const fetchPost = async (id: string): Promise<Post> => {
+export const fetchPosts = async (
-  const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, {
+    { tags, match, page, limit, cursor }: {
-      headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
+	tags:     string
-  return toCamel (res.data as any, { deep: true }) as Post
+	match:    'any' | 'all'
-}
+	page?:    number
+	limit?:   number
+	cursor?:  string }
+): Promise<{
+    posts:      Post[]
+    count:      number
+    nextCursor: string }> => await apiGet ('/posts', {
+	params: {
+	    tags,
+	    match,
+	    ...(page && { page }),
+	    ...(limit && { limit }),
+	    ...(cursor && { cursor }) } })
+
+
+export const fetchPost = async (id: string): Promise<Post> => await apiGet (`/posts/${ id }`)
 
 
 export const toggleViewedFlg = async (id: string, viewed: boolean): Promise<void> => {
-  const url = `${ API_BASE_URL }/posts/${ id }/viewed`
+  await (viewed ? apiPost : apiDelete) (`/posts/${ id }/viewed`)
-  const opt = { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } }
-  if (viewed)
-    await axios.post (url, { }, opt)
-  else
-    await axios.delete (url, opt)
 }

frontend/src/lib/prefetchers.ts

@@ -0,0 +1,49 @@
+import { QueryClient } from '@tanstack/react-query'
+import { match } from 'path-to-regexp'
+
+import { fetchPost, fetchPosts } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'
+
+type Prefetcher = (qc: QueryClient, url: URL) => Promise<void>
+
+const mPost = match<{ id: string }> ('/posts/:id')
+
+
+const prefetchPostsIndex: Prefetcher = async (qc, url) => {
+  const tags = url.searchParams.get ('tags') ?? ''
+  const m = url.searchParams.get ('match') === 'any' ? 'any' : 'all'
+  const page = Number (url.searchParams.get ('page') || 1)
+  const limit = Number (url.searchParams.get ('limit') || 20)
+  await qc.prefetchQuery ({
+      queryKey: postsKeys.index ({ tags, match: m, page, limit }),
+      queryFn:  () => fetchPosts ({ tags, match: m, page, limit }) })
+}
+
+
+const prefetchPostShow: Prefetcher = async (qc, url) => {
+  const m = mPost (url.pathname)
+  if (!(m))
+    return
+
+  const { id } = m.params
+  await qc.prefetchQuery ({
+      queryKey: postsKeys.show (id),
+      queryFn:  () => fetchPost (id) })
+}
+
+
+export const routePrefetchers: {
+    test: (u: URL) => boolean
+    run:  Prefetcher }[] = [
+    { test: u => u.pathname === '/' || u.pathname === '/posts', run: prefetchPostsIndex },
+    { test: u => Boolean (mPost (u.pathname)), run: prefetchPostShow }]
+
+
+export const prefetchForURL = async (qc: QueryClient, urlLike: string): Promise<void> => {
+  const u = new URL (urlLike, location.origin)
+  const jobs = routePrefetchers.filter (r => r.test (u)).map (r => r.run (qc, u))
+  if (jobs.length === 0)
+    return
+
+  await Promise.all (jobs)
+}

frontend/src/lib/queryKeys.ts

@@ -0,0 +1,10 @@
+export const postsKeys = {
+    root:     ['posts'] as const,
+    index:    (p: { tags: string; match: 'any' | 'all'; page: number; limit: number }) =>
+		  ['posts', 'index', p] as const,
+    show:     (id: string) => ['posts', id] as const,
+    related:  (id: string) => ['related', id] as const }
+
+export const wikiKeys = {
+    root: ['wiki'] as const,
+    show: (title: string, p: { version: string }) => ['wiki', title, p] as const }

frontend/src/lib/tags.ts

@@ -0,0 +1,7 @@
+import { apiGet } from '@/lib/api'
+
+import type { Tag } from '@/types'
+
+
+export const fetchTagByName = async (name: string): Promise<Tag> =>
+    await apiGet (`/tags/name/${ name }`)

frontend/src/lib/wiki.ts

@@ -0,0 +1,14 @@
+import { apiGet } from '@/lib/api'
+
+import type { WikiPage } from '@/types'
+
+
+export const fetchWikiPage = async (id: string): Promise<WikiPage> =>
+    await apiGet (`/wiki/${ id }`)
+
+
+export const fetchWikiPageByTitle = async (
+    title:        string,
+    { version }:  { version?: string },
+): Promise<WikiPage> =>
+    await apiGet (`/wiki/title/${ title }`, { params: version ? { version } : { } })

frontend/src/pages/posts/PostDetailPage.tsx

@@ -4,16 +4,17 @@ import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
-import PostList from '@/components/PostList'
-import TagDetailSidebar from '@/components/TagDetailSidebar'
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
+import PostList from '@/components/PostList'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -27,37 +28,39 @@ type Props = { user: User | null }
 
 export default (({ user }: Props) => {
   const { id } = useParams ()
-
+  const postId = String (id ?? '')
-  const qc = useQueryClient ()
+  const postKey = postsKeys.show (postId)
 
   const { data: post, isError: errorFlg, error } = useQuery ({
       enabled:  Boolean (id),
-      queryKey: ['post', String (id)],
+      queryKey: postKey,
-      queryFn:  () => fetchPost (String (id)) })
+      queryFn:  () => fetchPost (postId) })
+
+  const qc = useQueryClient ()
 
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
       mutationFn: async () => {
-	const next = !(post!.viewed)
+	const cur = qc.getQueryData<any> (postKey)
-	await toggleViewedFlg (id!, next)
+	const next = !(cur?.viewed)
+	await toggleViewedFlg (postId, next)
 	return next
       },
       onMutate: async () => {
-	await qc.cancelQueries ({ queryKey: ['post', String (id)] })
+	await qc.cancelQueries ({ queryKey: postKey })
-	const prev = qc.getQueryData<any> (['post', String (id)])
+	const prev = qc.getQueryData<any> (postKey)
-	qc.setQueryData (['post', String (id)],
+	qc.setQueryData (postKey,
 			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
 	if (ctx?.prev)
-	  qc.setQueryData (['post', String (id)], ctx.prev)
+	  qc.setQueryData (postKey, ctx.prev)
 	toast ({ title: '失敗……', description: '通信に失敗しました……' })
       },
       onSuccess: () => {
-	qc.invalidateQueries ({ queryKey: ['posts'] })
+	qc.invalidateQueries ({ queryKey: postsKeys.root })
-	qc.invalidateQueries ({ queryKey: ['related', String (id)] })
       } })
 
   useEffect (() => {
@@ -69,6 +72,10 @@ export default (({ user }: Props) => {
       setStatus (code)
   }, [errorFlg, error])
 
+  useEffect (() => {
+    setStatus (200)
+  }, [id])
+
   switch (status)
   {
   case 404:
@@ -122,14 +129,14 @@ export default (({ user }: Props) => {
 		  </Tab>
 		  {['admin', 'member'].some (r => user?.role === r) && (
 		      <Tab name="編輯">
-			<PostEditForm post={post}
+			<PostEditForm
-				      onSave={newPost => {
+			    post={post}
-					qc.setQueryData (['post', String (id)],
+			    onSave={newPost => {
-							 (prev: any) => newPost ?? prev)
+			      qc.setQueryData (postsKeys.show (postId),
-					qc.invalidateQueries ({ queryKey: ['posts'] })
+					       (prev: any) => newPost ?? prev)
-					qc.invalidateQueries ({ queryKey: ['related', String (id)] })
+			      qc.invalidateQueries ({ queryKey: postsKeys.root })
-					toast ({ description: '更新しました．' })
+			      toast ({ description: '更新しました．' })
-				      }}/>
+			    }}/>
 		      </Tab>)}
 		</TabGroup>
 	      </>)

frontend/src/pages/posts/PostListPage.tsx

@@ -1,97 +1,46 @@
-import axios from 'axios'
+import { useQuery } from '@tanstack/react-query'
-import toCamel from 'camelcase-keys'
+import { useLayoutEffect, useRef, useState } from 'react'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation, useNavigationType } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import PostList from '@/components/PostList'
+import PrefetchLink from '@/components/PrefetchLink'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
 import Pagination from '@/components/common/Pagination'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
-import { API_BASE_URL, SITE_TITLE } from '@/config'
+import { SITE_TITLE } from '@/config'
+import { fetchPosts } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'
+import { fetchWikiPageByTitle } from '@/lib/wiki'
 
-import type { Post, WikiPage } from '@/types'
+import type { WikiPage } from '@/types'
 
 
 export default () => {
-  const navigationType = useNavigationType ()
-
   const containerRef = useRef<HTMLDivElement | null> (null)
-  const loaderRef = useRef<HTMLDivElement | null> (null)
 
-  const [cursor, setCursor] = useState ('')
-  const [loading, setLoading] = useState (false)
-  const [posts, setPosts] = useState<Post[]> ([])
-  const [totalPages, setTotalPages] = useState (0)
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
-  const loadMore = async (withCursor: boolean) => {
-    setLoading (true)
-
-    const res = await axios.get (`${ API_BASE_URL }/posts`, {
-	params: { tags:   tags.join (' '),
-		  match:  anyFlg ? 'any' : 'all',
-		  ...(page && { page }),
-		  ...(limit && { limit }),
-		  ...(withCursor && { cursor }) } })
-    const data = toCamel (res.data as any, { deep: true }) as {
-	posts:      Post[]
-	count:      number
-	nextCursor: string }
-    setPosts (posts => (
-	[...((new Map ([...(withCursor ? posts : []), ...data.posts]
-		       .map (post => [post.id, post])))
-	     .values ())]))
-    setCursor (data.nextCursor)
-    setTotalPages (Math.ceil (data.count / limit))
-
-    setLoading (false)
-  }
-
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
+  const match = anyFlg ? 'any' : 'all'
   const tags = tagsQuery.split (' ').filter (e => e !== '')
+  const tagsKey = tags.join (' ')
   const page = Number (query.get ('page') ?? 1)
   const limit = Number (query.get ('limit') ?? 20)
 
-  useEffect(() => {
+  const { data, isLoading: loading } = useQuery ({
-    const observer = new IntersectionObserver (entries => {
+      queryKey: postsKeys.index ({ tags: tagsKey, match, page, limit }),
-      if (entries[0].isIntersecting && !(loading) && cursor)
+      queryFn:  () => fetchPosts ({ tags: tagsKey, match, page, limit }) })
-	loadMore (true)
+  const posts = data?.posts ?? []
-    }, { threshold: 1 })
+  const cursor = data?.nextCursor ?? ''
-
+  const totalPages = data ? Math.ceil (data.count / limit) : 0
-    const target = loaderRef.current
-    target && observer.observe (target)
-
-    return () => {
-      target && observer.unobserve (target)
-    }
-  }, [loaderRef, loading])
 
   useLayoutEffect (() => {
-    // TODO: 無限ロード用
-    const savedState = /* sessionStorage.getItem (`posts:${ tagsQuery }`) */ null
-    if (savedState && navigationType === 'POP')
-      {
-	const { posts, cursor, scroll } = JSON.parse (savedState)
-	setPosts (posts)
-	setCursor (cursor)
-
-	if (containerRef.current)
-	  containerRef.current.scrollTop = scroll
-
-	loadMore (true)
-      }
-    else
-      {
-	setPosts ([])
-	loadMore (false)
-      }
-
     setWikiPage (null)
     if (tags.length === 1)
       {
@@ -99,8 +48,7 @@ export default () => {
 	  try
 	  {
 	    const tagName = tags[0]
-	    const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
+	    setWikiPage (await fetchWikiPageByTitle (tagName, { }))
-	    setWikiPage (toCamel (res.data as any, { deep: true }) as WikiPage)
 	  }
 	  catch
 	  {
@@ -120,7 +68,13 @@ export default () => {
 	  </title>
 	</Helmet>
 
-	<TagSidebar posts={posts.slice (0, 20)}/>
+	<TagSidebar posts={posts.slice (0, 20)} onClick={() => {
+	    const statesToSave = {
+		posts, cursor,
+		scroll: containerRef.current?.scrollTop ?? 0 }
+	    sessionStorage.setItem (`posts:${ tagsQuery }`,
+				    JSON.stringify (statesToSave))
+	}}/>
 
 	<MainArea>
 	  <TabGroup>
@@ -128,28 +82,19 @@ export default () => {
 	      {posts.length > 0
 	       ? (
 		  <>
-		    <PostList posts={posts} onClick={() => {
+		    <PostList posts={posts}/>
-		      // TODO: 無限ロード用なので復活時に戻す．
-		      // const statesToSave = {
-		      //     posts, cursor,
-		      //     scroll: containerRef.current?.scrollTop ?? 0 }
-		      // sessionStorage.setItem (`posts:${ tagsQuery }`,
-		      //                         JSON.stringify (statesToSave))
-		    }}/>
 		    <Pagination page={page} totalPages={totalPages}/>
 		  </>)
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
-	      {/* TODO: 無限ローディング復活までコメント・アウト */}
-	      {/* <div ref={loaderRef} className="h-12"/> */}
 	    </Tab>
 	    {tags.length === 1 && (
 		<Tab name="Wiki">
 		  <WikiBody title={tags[0]} body={wikiPage?.body}/>
 		  <div className="my-2">
-		    <Link to={`/wiki/${ encodeURIComponent (tags[0]) }`}>
+		    <PrefetchLink to={`/wiki/${ encodeURIComponent (tags[0]) }`}>
 		      Wiki を見る
-		    </Link>
+		    </PrefetchLink>
 		  </div>
 		</Tab>)}
 	  </TabGroup>

frontend/src/pages/wiki/WikiDetailPage.tsx

@@ -1,17 +1,19 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import PostList from '@/components/PostList'
+import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
 import PageTitle from '@/components/common/PageTitle'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
-import { API_BASE_URL, SITE_TITLE } from '@/config'
+import { SITE_TITLE } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import { fetchPosts } from '@/lib/posts'
+import { fetchTagByName } from '@/lib/tags'
+import { fetchWikiPage, fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { Post, Tag, WikiPage } from '@/types'
 
@@ -39,8 +41,7 @@ export default () => {
 	  setWikiPage (undefined)
 	  try
 	  {
-	    const res = await axios.get (`${ API_BASE_URL }/wiki/${ title }`)
+	    const data = await fetchWikiPage (title)
-	    const data = res.data as WikiPage
 	    navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
 	  }
 	  catch
@@ -56,10 +57,7 @@ export default () => {
       setWikiPage (undefined)
       try
       {
-	const res = await axios.get (
+	const data = await fetchWikiPageByTitle (title, version ? { version } : { })
-	    `${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`,
-	    { params: version ? { version } : { } })
-	const data = toCamel (res.data as any, { deep: true }) as WikiPage
 	if (data.title !== title)
 	  navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
 	setWikiPage (data)
@@ -75,12 +73,7 @@ export default () => {
     void (async () => {
       try
       {
-	const res = await axios.get (
+	const data = await fetchPosts ({ tags: title, match: 'all', limit: 8 })
-	    `${ API_BASE_URL }/posts?${ new URLSearchParams ({ tags:  title,
-							       limit: '8' }) }`)
-	const data = toCamel (res.data as any,
-			      { deep: true }) as { posts:       Post[]
-						   nextCursor:  string }
 	setPosts (data.posts)
       }
       catch
@@ -92,9 +85,7 @@ export default () => {
     void (async () => {
       try
       {
-	const res = await axios.get (
+	setTag (await fetchTagByName (title))
-	    `${ API_BASE_URL }/tags/name/${ encodeURIComponent (title) }`)
-	setTag (toCamel (res.data as any, { deep: true }) as Tag)
       }
       catch
       {
@@ -115,16 +106,16 @@ export default () => {
 	{(wikiPage && version) && (
 	    <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
 	      {wikiPage.pred ? (
-		  <Link to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}>
+		  <PrefetchLink to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}>
 		    &lt; 古
-		  </Link>) : '(最古)'}
+		  </PrefetchLink>) : '(最古)'}
 
 	      <span>{wikiPage.updatedAt}</span>
 
 	      {wikiPage.succ ? (
-		  <Link to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.succ }`}>
+		  <PrefetchLink to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.succ }`}>
 		    新 &gt;
-		  </Link>) : '(最新)'}
+		  </PrefetchLink>) : '(最新)'}
 	    </div>)}
 
 	<PageTitle>