fandhe-frontend

Rust 製のフロントエンドフレームワークです。AI 時代のセキュリティリスクを下げることを目的に、プレーンな HTML / JavaScript / CSS を尊重しつつ、SSR / SPA / SSG / トランジションなどモダン機能を網羅します。部分埋め込みの最小構成からフル機能構成までのグラデーションを持ち、単一実行ファイルでのデプロイ（Docker 想定）を目標とします。

正式名称は fandhe-frontend（確定、2026-07-19）です。決定根拠・新旧マッピング表・段階的移行計画は docs/design/framework-naming.md を参照してください。現行のクレート名は fandhe-frontend-core 系のまま段階的移行中です（仕様上のクレート名の想定については 仕様リポジトリの 05-tasks.md 参照）。

ドキュメント

公開 docs サイト（Getting Started / Guides / API Reference 構成）は以下で閲覧できます。

• https://fandhe-ai.github.io/fandhe-frontend/

ローカルでビルドして確認する場合は次のコマンドを実行してください。

cargo run -p fandhe-frontend-docs-site -- --out dist/

生成物は dist/index.html から閲覧できます。ビルドには内部リンク検証（linkcheck）が 内蔵されており、リンク切れを検出した場合は非 0 終了します。コンテンツの正は docs/guides/・docs/api/ 配下、サイト構成は site/nav.toml です。

インストール

CLI ツール

fw コマンド（プロジェクト生成・検査ツール）は crates.io で公開されており、 以下のコマンドで導入できます。

cargo install fandhe-frontend-cli

ライブラリとして使う場合

コア描画ライブラリやアプリ構築層などのクレートは個別に crates.io から利用できます。 例えば、描画コアの fandhe-frontend-core を使う場合は以下のコマンドを実行してください。

cargo add fandhe-frontend-core

その他のクレート（fandhe-frontend-app・fandhe-frontend-server 等）も同様に 追加・導入できます。詳細はドキュメントサイトの Getting Started を参照してください。

UI コンポーネント 2 層構造（headless-ui / pre-styled-ui）

ark-ui / chakra-ui を参考にした 2 層の UI コンポーネント構成（親トラッキング #520）として fandhe-frontend-headless-ui（headless UI コンポーネント層）・ fandhe-frontend-pre-styled-ui（pre-styled UI コンポーネント層）を提供します。 両クレートとも v0.1.0 で crates.io へ公開済み（イシュー #608）のため、 cargo add fandhe-frontend-headless-ui 等で通常どおり導入できます（実例は examples/headless-pre-styled-ui、 API 詳細は docs/api/headless-ui-api.md / docs/api/pre-styled-ui-api.md を参照）。

サンプル集（examples/）

動くサンプルは examples/ 配下に「正本」として置かれています。 いずれも crates.io へ公開済みのクレートへのバージョン依存のみで完結する 独立した cargo プロジェクトです。

fw CLI の --example オプションで、上記のサンプルをすべて自分の プロジェクトとして展開できます。

cargo install fandhe-frontend-cli
fw new my-app --example ssr-routing

一覧・選び方の詳細は examples/README.md、docs サイト版は https://fandhe-ai.github.io/fandhe-frontend/examples/ を参照してください。

開発環境セットアップ

クローンと初期化

仕様書が docs/spec/ にサブモジュールとして取り込まれているため、 クローン時に --recurse-submodules を指定してください。

git clone --recurse-submodules git@github.com:Fandhe-AI/fandhe-frontend.git
cd fandhe-frontend

既存クローンがある場合は以下で初期化してください。

git submodule update --init

最短セットアップ

ローカル開発環境の構築は make setup で行います。 clippy / cargo-deny / wasm32 target の導入と lefthook の有効化を一度に行います （lefthook 本体が未導入の場合は導入手順を案内します）。

make setup

その後、以下で基本的なチェック（ビルド・テスト・整形・lint）を実行できます。

make build
make test
make fmt
make lint

全ターゲット一覧は make help で確認してください。

lefthook によるローカル検証

make setup は lefthook が導入済みの環境で hooks を有効化します （lefthook 本体は別途導入が必要で、未導入の場合は make setup が 導入手順を案内します）。有効化後、commit 時に以下が自動実行されます。

• cargo fmt チェック（staged ファイルのみ）
• 簡易シークレット検知（.env ファイルの追加、API キーらしき値の検出。 保守的なヒューリスティックであり実トークン形式の一部は検出できないため、 網羅的なスキャナの代替にはなりません）
• Conventional Commits 形式の検証（commit-msg）

lefthook 未導入環境でも commit は可能ですが、 同じ検証が CI で実行されるため、早期検知のため導入を推奨します。 --no-verify による bypass は .claude/rules/conventional-commits.md で禁止されています。

Docker による開発

ホスト環境に Rust toolchain やツールを導入したくない場合は、 開発用 Docker コンテナが利用できます。 （製品配布用イメージとは別物です。製品配布用は Dockerfile を参照）

make docker-dev-build    # イメージをビルド
make docker-dev          # コンテナに入る

コンテナ内は make help で同じターゲットが利用できます。

仕様

仕様書（ブレスト〜PoC〜要件定義〜タスク分解〜ロードマップ）は Fandhe-AI/fandhe-frontend-spec で管理し、docs/spec/ にサブモジュールとして取り込んでいます。

git clone --recurse-submodules git@github.com:Fandhe-AI/fandhe-frontend.git
# 既存クローンの場合
git submodule update --init

開発の進め方

docs/spec/06-roadmap.md のマイルストーンに従って実装します。

• MS-1: 安全性基盤＋純 Rust 記述方式の確立（既定エスケープ・依存グラフ上限の CI 計測）
• MS-2: コア三モード描画（SSR / SPA / SSG）とグラデーションの実装
• MS-3: 実ブラウザ実証＋WASM 完全方式の確立（実装内 Go/No-Go 確認あり）
• MS-4: 配布・DX の確立（単一実行ファイル・Docker・cargo 統合ビルドチェーン）
• MS-5: AI 自己保守・改修フックの確立（impact → 変更適用 → gate）

実装着手の最初のタスクは TASK-1.1（fandhe-frontend-core 既定エスケープの製品化）です。

ライセンス

本プロジェクトは MIT ライセンス と Apache License 2.0 の デュアルライセンスで提供されます。

あなたが明示的に別段の定めをしない限り、あなたが本プロジェクトへ提出する Contribution は、 Apache License 2.0 のセクション 5 に定義される条件に従い、追加の条項なしに上記デュアル ライセンスの下で提供されるものとみなされます。