orchestration

dApp のオーケストレーション

よくある誤解

SE2 では、従うべき固有のパターンがあります。 一般的な「dApp の構築方法」は通用しません。SE2 は deployedContracts.ts を自動生成するため、編集してはいけません。生の wagmi ではなく、Scaffold のフックを使用してください。外部コントラクトは、フロントエンドの構築前に externalContracts.ts に追加してください。

3 つのフェーズがあります。省略したり、まとめたりしないでください。 コントラクト → フロントエンド → 本番環境の順に進めます。それぞれに検証ゲートがあります。

3 フェーズのビルドシステム

フェーズ	環境	内容
フェーズ 1	ローカルフォーク	localhost 上でコントラクトと UI を動かします。素早く反復できます。
フェーズ 2	ライブネットワーク + ローカル UI	コントラクトをメインネット／L2 にデプロイします。実際の状態でテストし、UI を仕上げます。
フェーズ 3	本番環境	フロントエンドを IPFS／Vercel にデプロイします。最終 QA を行います。

フェーズ 1：Scaffold（ローカル）

1.1 コントラクト

npx create-eth@latest my-dapp
cd my-dapp && yarn install
yarn fork --network base  # Terminal 1: fork of real chain (or mainnet, your target chain)
yarn deploy               # Terminal 2: deploy contracts

必ずフォークを使い、yarn chain は使わないでください。 yarn fork は yarn chain の機能に加えて、実際のプロトコル状態も利用できます。Uniswap、USDC、Aave、クジラの残高など、あらゆるものがすでにデプロイされています（検証済みアドレス：addresses/SKILL.md）。yarn chain は空のチェーンを起動するため、不要なモックコントラクトを書きたくなります。オンチェーンにすでに存在するものをモックする必要はありません。フォークを使ってください。

重要な手順：

1. packages/foundry/contracts/（または packages/hardhat/contracts/）にコントラクトを記述します
2. デプロイスクリプトを記述します
3. すべての外部コントラクトを packages/nextjs/contracts/externalContracts.ts に追加します — フェーズ 1.2 の前に行ってください
4. テストを記述します（カバレッジ ≥90%）
5. フロントエンドに進む前にコントラクトを監査します — audit/SKILL.md を取得して、手順に従ってください

検証： yarn deploy が成功すること。deployedContracts.ts が自動生成されること。テストが成功すること。

1.2 フロントエンド

yarn fork --network base  # Terminal 1: fork of real chain (has Uniswap, USDC, etc.)
yarn deploy --watch       # Terminal 2: auto-redeploy on changes
yarn start                # Terminal 3: Next.js at localhost:3000

生の WAGMI ではなく、SCAFFOLD のフックを使ってください：

// Read
const { data } = useScaffoldReadContract({
  contractName: "YourContract",
  functionName: "balanceOf",
  args: [address],
  watch: true,
});

// Write
const { writeContractAsync, isMining } = useScaffoldWriteContract("YourContract");
await writeContractAsync({
  functionName: "swap",
  args: [tokenIn, tokenOut, amount],
  onBlockConfirmation: (receipt) => console.log("Done!", receipt),
});

// Events
const { data: events } = useScaffoldEventHistory({
  contractName: "YourContract",
  eventName: "SwapExecuted",
  fromBlock: 0n,
  watch: true,
});

3 ボタンフロー（必須）

トークンを操作する際は、一度に表示するボタンを 1 つだけにします。

1. ネットワークを切り替える（チェーンが異なる場合）
2. トークンを承認する（allowance が不足している場合）
3. アクションを実行する（1 と 2 が完了した場合のみ）

「承認」と「実行」を同時に表示してはいけません。

UX ルール

• 人が読みやすい数量： 表示には formatEther()／formatUnits() を、コントラクトには parseEther()／parseUnits() を使用します
• あらゆる場所にローディング状態を表示： すべての非同期操作で isLoading、isMining を使用します
• 保留中のトランザクション中はボタンを無効化します（ブロックチェーンの処理には 5～12 秒かかります）
• 無制限の承認は使わないでください — 正確な数量または 3～5 倍の数量を承認します
• わかりやすいエラー： 「残高不足」「ユーザーによる拒否」「実行が取り消されました」を平易な言葉に変換します

検証： localhost 上で、実際のウォレットを使用した一連のユーザーフローが動作すること。すべてのエッジケースに対応していること。

🚨 シークレットを絶対に Git にコミットしないでください

フェーズ 2 に進む前に、必ずこれを読んでください。 GitHub で認証情報を漏えいさせる主な原因は AI エージェントです。ボットはリポジトリをリアルタイムで巡回し、漏えいしたシークレットを数秒以内に悪用します。

これはウォレットの秘密鍵だけでなく、すべてのシークレットを指します。

• ウォレットの秘密鍵 — 数秒で資金が引き出されます
• API キー — Alchemy、Infura、Etherscan、WalletConnect のプロジェクト ID
• キーを埋め込んだ RPC URL — 例：https://base-mainnet.g.alchemy.com/v2/YOUR_KEY
• OAuth トークン、パスワード、ベアラートークン

⚠️ SE2 でよくある落とし穴：scaffold.config.ts

scaffold.config.ts の rpcOverrides と alchemyApiKey は Git にコミットされます。API キーをこのファイルに直接貼り付けてはいけません。 環境変数を使用してください。

// ❌ WRONG — key committed to public repo
rpcOverrides: {
  [chains.base.id]: "https://base-mainnet.g.alchemy.com/v2/8GVG8WjDs-LEAKED",
},

// ✅ RIGHT — key stays in .env.local
rpcOverrides: {
  [chains.base.id]: process.env.NEXT_PUBLIC_BASE_RPC || "https://mainnet.base.org",
},

git add または git commit の前に必ず実行してください：

# Check for leaked secrets
git diff --cached --name-only | grep -iE '\.env|key|secret|private'
grep -rn "0x[a-fA-F0-9]\{64\}" packages/ --include="*.ts" --include="*.js" --include="*.sol"
# Check for hardcoded API keys in config files
grep -rn "g.alchemy.com/v2/[A-Za-z0-9]" packages/ --include="*.ts" --include="*.js"
grep -rn "infura.io/v3/[A-Za-z0-9]" packages/ --include="*.ts" --include="*.js"
# If ANYTHING matches, STOP. Move the secret to .env and add .env to .gitignore.

.gitignore に必ず含めてください：

.env
.env.*
*.key
broadcast/
cache/
node_modules/

SE2 はデフォルトでデプロイヤーキーを処理します — yarn generate はデプロイヤーキーを含む .env を作成し、.gitignore はそれを除外します。このパターンを上書きしないでください。 キーをスクリプト、設定ファイル、デプロイログにコピーしないでください。これには RPC キー、API キー、あらゆる認証情報が含まれます。ウォレットキーだけではありません。

キーの安全な取り扱い、すでにキーを漏えいさせてしまった場合の対処法、安全なデプロイパターンについては、wallets/SKILL.md を参照してください。

フェーズ 2：ライブコントラクト + ローカル UI

1. scaffold.config.ts を更新します：targetNetworks: [mainnet]（またはお使いの L2）
2. デプロイ用アカウントに資金を入金します：yarn generate → yarn account → 実際の ETH を送金
3. デプロイします：yarn deploy --network mainnet
4. デプロイ直後に検証します：yarn verify --network mainnet
   • ブロックエクスプローラーの API キーは不要です — SE2 が自動で処理します
   • 後回しにせず、デプロイ直後に実行してください。省略しないでください。
5. 実際のウォレットを使い、少額（$1-10）でテストします
6. UI を仕上げます — SE2 のブランディングを削除し、独自のスタイルを適用します

デザインルール： LLM のありきたりな出力は使わないでください。汎用的な紫のグラデーションは避け、独自性を出してください。

検証条件： コントラクトがブロックエクスプローラーで検証済みであること。実際のコントラクトを使った一連の操作がすべて機能すること。

フェーズ 3：本番環境へのデプロイ

デプロイ前チェックリスト

• scaffold.config.ts で burnerWalletMode: "localNetworksOnly" に設定する（本番環境でバーンウォレットが表示されないようにします）
• メタデータを更新する（タイトル、説明、OG 画像は 1200x630px）
• テスト用の値を本番環境用の値に戻す
• フロントエンド全体の QA 監査を実行する — デプロイ前に qa/SKILL.md を取得し、別のエージェントに渡します

デプロイ

IPFS — 分散型デプロイには BGIPFS を使用します（詳細はこのスキルを取得してください）。SE2 に組み込まれているため、セットアップは不要です：

yarn ipfs
# → https://{CID}.ipfs.community.bgipfs.com/

注：IPFS で動作するのは静的コンテンツのみです — サーバーサイドレンダリング、API エンドポイント、関数には対応していません。

Vercel：

yarn vercel

本番環境の QA

• アプリが公開 URL で読み込まれる
• ウォレットが接続し、ネットワーク切り替えが機能する
• コントラクトの読み取り・書き込み操作が機能する
• コンソールエラーがない
• バーンウォレットが表示されない
• リンクプレビューで OG 画像が表示される
• モバイル表示に対応している
• MetaMask、Rainbow、WalletConnect でテスト済み

フェーズ移行ルール

フェーズ 3 のバグ → フェーズ 2 に戻る（ローカル UI と本番コントラクトで修正します） フェーズ 2 のコントラクトのバグ → フェーズ 1 に戻る（ローカルで修正し、回帰テストを書いて、再デプロイします） 本番環境でバグを回避するためのその場しのぎの対応は絶対にしないでください。

SE2 の主なディレクトリ

packages/
├── foundry/contracts/          # Solidity contracts
├── foundry/script/             # Deploy scripts
├── foundry/test/               # Tests
└── nextjs/
    ├── app/                    # Pages
    ├── components/             # React components
    ├── contracts/
    │   ├── deployedContracts.ts   # AUTO-GENERATED (don't edit)
    │   └── externalContracts.ts   # YOUR external contracts (edit this)
    ├── hooks/scaffold-eth/     # USE THESE hooks
    └── scaffold.config.ts      # Main config

リソース

• SE2 ドキュメント： https://docs.scaffoldeth.io/
• SE2 スキル： https://docs.scaffoldeth.io/SKILL.md
• UI コンポーネント： https://ui.scaffoldeth.io/
• SE2 AGENTS.md： https://github.com/scaffold-eth/scaffold-eth-2/blob/main/AGENTS.md