Compact の書きかた で契約のレシピを学びました。 でも、契約だけでは DApp は動きません。まわりの部品と、それらをつなぐTSアプリが必要です。
たとえ話：レストランのチーム
Midnight の DApp は、レストランのチームに似ています。
そして、これらを指揮する店長が、あなたが書く TypeScript アプリです。
TSアプリは「providers」で部品とつなぐ
Midnight.js では、各部品との通信を providers（つなぎ役） にまとめます。 Counter チュートリアルの形を、雰囲気で（短く）：
契約を「デプロイ」して「呼ぶ」
providers がそろえば、契約をデプロイして、circuit を呼べます（雰囲気で短く）：
callTx.increment() を呼ぶと、裏では proof server が証明を作り → ウォレットが残高合わせ＆サイン → node に送信、という流れが起きます。
主なパッケージ（npm）
開発者が実際に使う @midnight-ntwrk/* パッケージの例：
2つの大きな SDK：Midnight.js（契約・ウォレット・証明をまとめた TS 実装）と Wallet SDK（独自ウォレットを作る用）。 ※
ledger-v8のようにバージョンが名前に入るパッケージもあります。組み合わせは Support matrix（外部リンク・別タブで開きます） で確認。
公開・秘密・証明が、どこを流れるか
公開・秘密・証明の置きどころ の話を、部品にあてはめると：
- 秘密ステート →
privateStateProvider（手元）に保存。proof server に渡って証明の材料になる - 公開ステート →
publicDataProvider（indexer）から読める - 証明 → proof server が作り、node に出す取引にのる
開発者として理解すべきこと
- DApp ＝ 契約 + proof server + indexer + node + ウォレット、指揮役が TSアプリ
- TSアプリは providers で各部品につなぐ（読む＝indexer、証明＝proof server、送る＝wallet/node）
deployContract/findDeployedContract/callTx.*が基本の流れ- パッケージ名とバージョンの組み合わせは Support matrix で確認
公式Docsではどこ？
- What is Midnight?（外部リンク・別タブで開きます）（公開/秘密ステートの定義）
- How Midnight works / building blocks（外部リンク・別タブで開きます）
- SDKs（外部リンク・別タブで開きます） / API Reference（外部リンク・別タブで開きます）
- DApp connector（外部リンク・別タブで開きます）
- Configure providers（ガイド）（外部リンク・別タブで開きます）
今日のまとめ
- 動く DApp は 5部品 + TSアプリ（指揮役）
- TSは providers で部品をつなぐ
- 流れ：証明を作る → サイン → 送信、を
callTxが裏でやってくれる
今はここだけでOK
「契約のまわりに、検査員（proof server）・伝票係（indexer）・ホール（node）・お財布（wallet）がいて、店長（TS）がまとめる」——この絵が描ければOK。
✍️ 白紙練習
答えを見る前に、いったん自分の頭と手から出してみよう。手で書くと「わかったつもり」がはがれます。
Midnight.js で各部品をつなぐ providers オブジェクトを再現してみよう（5つの provider）。
契約をデプロイし、circuit を呼び、既存の契約に参加する基本の流れを再現してみよう。
このページの中心となる考えを自分のことばで説明してみよう。DApp は何でできていて、TSアプリは何をする役わり？
動く DApp は 契約（Compact）+ proof server + indexer + node + ウォレット（Lace） の5部品でできています。そして、それらを指揮する店長が、あなたが書く TypeScript アプリです。TSアプリは providers（つなぎ役） で各部品につなぎます（読む＝indexer、証明＝proof server、送る＝wallet/node）。基本の流れは deployContract / findDeployedContract / callTx.* です。
DApp を構成する5つの部品は？
契約（Compact）、proof server、indexer、node、ウォレット（Lace）の5つです。そして指揮役が TypeScript アプリです。
proof server が使うポート番号と、そのしごとは？
ポートは6300。秘密を見せずに「正しい」を証明する、裏でこっそり検品する検査員のような役わりです。
publicDataProvider と proofProvider は、それぞれどの部品につないで何をする？
publicDataProvider は indexer につなぎ、公開状態を GraphQL で読みます。proofProvider は proof server につなぎ、証明を作ってもらいます。
callTx.increment() を呼ぶと、裏ではどんな流れが起きる？
proof server が証明を作り → ウォレットが残高合わせ＆サイン → node に送信、という流れが起きます。
秘密ステートはどの provider に保存され、何に使われる？
privateStateProvider（手元、LevelDB など）に保存されます。そして proof server に渡って証明の材料になります。
📘 もっと正確に（原文準拠コース）
Academy 原文に忠実な詳しい版はこちら：
つぎに読むページ
➡️ 作る流れ全体（コンパイル〜実行）へ。開発の進めかた