View on GitHub

定数の定義

src/frontend/src/constants/styles.ts

/**
 * スタイル関連の定数
 */
export const STYLES = {
  // HTML、BODY、MAIN関連
  HTML: `h-full antialiased`,
  BODY: `flex min-h-screen flex-col bg-gray-100 text-gray-700 antialiased`,
  MAIN: `grow`,
  LINK: `font-semibold text-indigo-600 hover:text-indigo-400 hover:underline`,

  // ヘッダ、フッタ関連
  HEADER: `flex items-center justify-between bg-sky-600 px-8 py-4 text-white`,
  HEADER_APP_NAME: `text-2xl font-extrabold`,
  HEADER_MENU: `flex items-center justify-between gap-4 text-sm font-medium`,
  FOOTER: `border-t px-4 py-2`,
} as const;

src/frontend/src/constants/settings.ts

/**
 * アプリケーション設定の定数
 */
export const SETTINGS = {
  // アプリケーション関連
  /** アプリケーション名 */
  APP_NAME: `recsys_full`,
  /** コピーライト */
  COPYRIGHT: `@2026 RecSysLab`,
} as const;

src/frontend/src/constants/index.ts

export * from "./styles";
export * from "./settings";

ヘッダ

src/frontend/src/app/components/Header.tsx

import Link from "next/link";

import { STYLES, SETTINGS } from "@/constants"; // <- 追加

const Header = () => {
  return (
    <header className={`${STYLES.HEADER}`}>
      {/* <- classNameを修正 */}
      <div>
        <h1 className={`${STYLES.HEADER_APP_NAME}`}>
          {/* <- classNameを修正 */}
          <Link href="/">{SETTINGS.APP_NAME}</Link> {/* <- 修正 */}
        </h1>
      </div>
      <div>
        <nav className={`${STYLES.HEADER_MENU}`}>
          {/* <- classNameを修正 */}
          <div>About</div>
          <div>Sign Up</div>
          <div>Sign In</div>
        </nav>
      </div>
    </header>
  );
};

フッタ

src/frontend/src/app/components/Footer.tsx

import { STYLES, SETTINGS } from "@/constants"; // <- 追加

const Footer = () => {
  return (
    <footer className={`${STYLES.FOOTER}`}>
      {/* <- classNameを修正 */}
      <small>{SETTINGS.COPYRIGHT}</small> {/* <- 修正 */}
    </footer>
  );
};

export default Footer;

共通レイアウト

src/frontend/src/app/layout.tsx

import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';

import { STYLES, SETTINGS } from '@/constants'; // <- 追加

import Header from './components/Header';
import Footer from './components/Footer';
...（略）...
export const metadata: Metadata = {
  title: SETTINGS.APP_NAME, // <- 修正
  description: 'Generated by create next app',
};

export default function RootLayout({ children }: LayoutProps<'/'>) {
  return (
    <html lang="ja" className={`${geistSans.variable} ${geistMono.variable} ${STYLES.HTML}`}>
      {/* <- classNameを修正 */}
      <body className={`${STYLES.BODY}`}>
        {/* <- classNameを修正 */}
        <Header />
        <main className={`${STYLES.MAIN}`}>{children}</main> {/* <- classNameを修正 */}
        <Footer />
      </body>
    </html>
  );
}