> For the complete documentation index, see [llms.txt](https://summerain-1.gitbook.io/summerain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://summerain-1.gitbook.io/summerain/ja/kaibumi/frontend-architecture.md).

# フロントエンドアーキテクチャ

> \[!WARNING] **アーカイブ済みの設計記録です。** この設計一式は 2026 年 6 月 18 日に作成されたもので、 完成済みの V2 フロントエンドより前の内容です。一部のパス、バージョン、ステータス、 スコープ判断は現在の実装と一致しません。現行の運用ガイドではなく、設計の歴史的背景として参照してください。

* **日付:** 2026-06-18
* **ステータス:** 確定済み、実装待ち
* **対象範囲:** モダンな React スタックで画像ホスティングのフロントエンドを書き直し、`backend/` の Go API と正確に整合させる（`docs/API.md` を参照）

本設計は、個別に読みやすく保守しやすいよう、トピックごとの独立した文書に分割されています。各セクションは相対リンクで相互参照します。

## ドキュメントマップ

| #  | セクション      | 内容                                                           | ファイル                                                                                                 |
| -- | ---------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| 01 | 概要と技術スタック  | 背景、目標、必須制約、技術スタック、依存バージョンの固定、TypeScript/ECMAScript ベースライン    | [01-overview.md](/summerain/ja/kaibumi/frontend-architecture/01-overview.md)                         |
| 02 | アーキテクチャと基盤 | ディレクトリ構成、API ラッパー、認証フロー、TanStack Query、zustand、ルーティング、コード分割  | [02-architecture.md](/summerain/ja/kaibumi/frontend-architecture/02-architecture.md)                 |
| 03 | 機能とページ     | 5 つの機能領域、Query/Mutation、ルート、ホームページ戦略                         | [03-features.md](/summerain/ja/kaibumi/frontend-architecture/03-features.md)                         |
| 04 | テーマと UI    | shadcn プリセット戦略、コーヒーパレット、書体、i18n                              | [04-theme-and-ui.md](/summerain/ja/kaibumi/frontend-architecture/04-theme-and-ui.md)                 |
| 05 | ビルドとデプロイ   | Vite ビルド、成果物の出力、開発プロキシ、HTTPS の前提条件                           | [05-build-and-deploy.md](/summerain/ja/kaibumi/frontend-architecture/05-build-and-deploy.md)         |
| 06 | テスト戦略      | Vitest、RTL、MSW の対象範囲                                         | [06-testing.md](/summerain/ja/kaibumi/frontend-architecture/06-testing.md)                           |
| 07 | 本番成果物の標準   | モジュール化、SRI/SemVer、リソースのローカル化、変数と定数、HTML の最小化、i18n（必須要件）      | [07-production-standards.md](/summerain/ja/kaibumi/frontend-architecture/07-production-standards.md) |
| 08 | コーディング標準   | 命名、TypeScript、React、状態、スタイル、Lint ゲート、セキュリティとアクセシビリティ、性能、コミット | [08-coding-standards.md](/summerain/ja/kaibumi/frontend-architecture/08-coding-standards.md)         |
| 09 | 判断とスコープ    | 移行時の整理、明示的な対象外（YAGNI）、意思決定記録、参考資料                            | [09-decisions-and-scope.md](/summerain/ja/kaibumi/frontend-architecture/09-decisions-and-scope.md)   |
| 10 | ページ別 UI/UX | 8 ページと共通コンポーネント、shadcn 対応、ライトボックス、非公開トークンパネル、レスポンシブ対応        | [10-pages-ui-ux.md](/summerain/ja/kaibumi/frontend-architecture/10-pages-ui-ux.md)                   |
| DS | デザインシステム   | スタイル、トークン、コンポーネント、状態、レスポンシブ、モーション、テーマ切り替え（信頼できる唯一の情報源）       | [design-system/MASTER.md](/summerain/ja/kaibumi/frontend-architecture/master.md)                     |

## 推奨される読み順

1. **01 概要** -> 何を作るか、何を使うか、どの制約があるかを把握する
2. **02 アーキテクチャ** -> コード構造とデータフローを理解する
3. **03 機能** + **04 テーマ** -> プロダクト面とビジュアル面を確認する
4. **05 ビルド** -> アプリケーションの起動方法とデプロイ方法を理解する
5. **07 本番標準** + **08 コーディング標準** -> 実装時のルールに従う
6. **06 テスト** + **09 判断** -> 検証方法と過去の判断根拠を理解する

> 元の単一文書 `2026-06-18-frontend-architecture-design.md` は、本ディレクトリ内の文書に置き換えられました。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://summerain-1.gitbook.io/summerain/ja/kaibumi/frontend-architecture.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.