appディレクトリ - fun-kankodori/kankodori_web GitHub Wiki

プロジェクト構成・ファイル解説

1. src/app/layout.tsx

全ページ共通のレイアウトを定義するファイルです。

  • Google Fontsの「Geist」「Geist Mono」を読み込み、CSS変数として利用。
  • metadataでページタイトル・説明文を設定。
  • すべてのページで共通となるHTML構造（<html>, <body>）を定義。
  • <body>タグにフォントのCSS変数とantialiasedクラスを付与。

主な関数・エクスポート:

  • RootLayout: 全ページのラッパーとなるReactコンポーネント。
  • metadata: Next.jsのSEO用メタデータ。
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

2. src/app/page.tsx

トップページのエントリーポイントです。

  • @/components/TouristSpotApp をインポートし、トップページで表示。
  • ここではTouristSpotAppコンポーネントのみを返すシンプルな構成。

主な関数・エクスポート:

  • App: トップページのReactコンポーネント。
export default function App() {
  return <TouristSpotApp />;
}

3. src/app/globals.css

全体のスタイルを管理するグローバルCSSファイルです。

  • TailwindCSS をインポートしており、ユーティリティクラスが利用可能です。
  • カスタムプロパティ（CSS変数）で背景色・文字色・フォントを定義しています。
  • ダークモード対応（prefers-color-scheme: dark）も実装済み。
  • bodyタグに背景色・文字色・フォントファミリーを適用。
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

まとめ

  • globals.css: 全体のスタイル・テーマ・ダークモード対応
  • layout.tsx: 全ページ共通のレイアウト・フォント・SEO
  • page.tsx: トップページのエントリーポイント
  • TouristSpotApp: 観光地アプリのメインUI（詳細は別途記載）

追記方法

新しいファイルやコンポーネントを追加した場合は、

  • ファイルの役割
  • 主な関数やエクスポート
  • 主要なコード例

をこのWikiに追記

⚠️ **GitHub.com Fallback** ⚠️