4つめは Leaderboard（リーダーボード＝ランキング）。 ゲームのスコアを集めて順位を出す DApp です。ここまでで一番本格的で、ブラウザの画面（React）から本番デプロイまで通します。
何を作るの？
- スコアを送って、ランキングに並べる
- 名前の見せかたを3モードから選べる：匿名 / ウォレット名を公開 / 自分でつけた名前
- 「このスコアは自分のだ」と、秘密を見せずに証明できる
- ブラウザの DApp（React + Vite）として作り、本番（Vercel / Preprod）へデプロイ
何を学べるの？
- 公開集計とプライバシーの両立：スコアはみんなに見えるが、本人の出しかたは選べる
- 所有の証明：秘密カギを見せずに「自分のスコア」だと示す（賞品の受け取りなどに使える）
- ウォレットなしで読む：画面は indexer の GraphQL から状態を直接読める
- Lace 連携：取引のサインはウォレット（Lace）にお願いする
- 本番デプロイ：Vercel に出す。
contract/managed/をコミットする等の実務も
たとえ話：名前の見せかたを選べる順位表
ゲームセンターのランキングを思い出してください。 「AAA」みたいな匿名でも、本名でも、好きなニックネームでもOK。 スコア（順位）はみんなに見えるけど、名前の出しかたは自分で選べる。これが選んで見せる（selective disclosure）の実例です。
契約の中身（本物・短い）
本人を表すハンコ（コミットメント）は、用途を混ぜないようラベル付きで作ります。
💡
"leaderboard:owner:"のようなラベル（ドメイン分離）を付けるのは、別用途のハッシュと混ざらないようにする大事なテクニックです。
公開 ledger に書く値は、すべて disclose(...) で「見せてOK」を明示します。
画面（ブラウザ）側のしくみ（雰囲気）
- ウォレット（Lace）に DApp Connector API でつなぐ
- 取引は、残高合わせを Lace にお願いする（
walletProvider.balanceTx()） - ランキング表示は ウォレットなしでも、indexer に GraphQL で問い合わせて読める
秘密カギはブラウザで作って、安全に保管します（例：crypto.getRandomValues で32バイト）。
進む前に理解しておくこと
- Battleship（隠した状態とコミットメント）
- DApp の組み立てかた（providers と indexer 読み）
- React / Vite の基本（フロントエンドの枠組み）
開発者として理解すべきこと
- 公開（順位）とプライバシー（名前の出しかた）を両立する設計
- ドメイン分離ハッシュで、用途ごとにコミットメントを分ける
- 画面は indexer から読む（ウォレット不要）、書くときだけ Lace
- フル DApp は 契約 → API → React → 本番デプロイ の縦串
公式Docsではどこ？
- Leaderboard: overview（外部リンク・別タブで開きます）
- smart contract（外部リンク・別タブで開きます） / API layer（外部リンク・別タブで開きます） / browser DApp（外部リンク・別タブで開きます） / deployment（外部リンク・別タブで開きます）
⚠️ Leaderboard には現時点で専用の公開 GitHub リポジトリが見つかりませんでした。コードは公式チュートリアル本文を正本にしてください。
つぎの発展：ZK Loan
もっと進みたい人へ。ZK Loan は「プライバシー重視の融資審査」を作るチュートリアルです。 銀行のような署名を証明の中で検証し、「条件を満たすか」だけを示します（理由＝中身は見せない）。
今日のまとめ
- Leaderboard＝ランキング DApp。公開集計とプライバシーを両立
- ブラウザ（React/Vite）＋ Lace ＋ indexer 読み ＋ 本番デプロイまで通す
- ここまで来たら、フル DApp の全体像がつかめている
今はここだけでOK
「スコアはみんなに見える。でも名前の出しかたは選べて、自分のだと証明もできる」——これがランキング DApp の核心です。
つぎに読むページ
➡️ 仕上げは自分で拡張する卒業制作。Capstone：けいじ板を拡張する