> For the complete documentation index, see [llms.txt](https://docs.chiliz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chiliz.com/jp/kaihatsu/kihon/how-tos/ai-de-dapp-kaihatsu.md).

# AI ツールで Chiliz dApp を構築する

Vibe-codingは今や大流行しており、コーディングの知識がなくても、Web3プロジェクトのアイデアをすばやく形にする手助けをしてくれます！

このページでは、dAppを生成するために必要な情報を得るべく、お気に入りのAIツールとどのようにやり取りすればよいかのアイデアを紹介します。

{% hint style="success" %}
このページはツールに依存しません。[Cursor](https://cursor.com/)、[Replit](https://replit.com/)、[Lovable](https://lovable.dev/)、[Claude](https://claude.ai/)、[Claude Code](https://www.anthropic.com/claude-code)、[Bolt](https://bolt.new/)、[V0](https://v0.dev/)、[Base44](https://base44.com/)、その他あらゆるAIコードアシスタントなど、どのvibe-codingツールでも使える提案やプロンプトのアイデアを示します。
{% endhint %}

## 前提条件

始める前に、以下を用意してください。

* MetaMaskなど、Chiliz Chainアカウントを備えたwallet。
  * 安全にテストするにはSpicy Testnetを、本番にはChiliz Chain Mainnetを使用してください。

{% hint style="info" %}
Metamaskの詳細と、Spicy TestnetおよびChiliz Chain Mainnetへの接続方法については、こちらをご覧ください: how-to-use-metamask
{% endhint %}

* そのwalletにdeployに十分なCHZ token。
  * Chiliz Chain Mainnetでは、CHZを購入する必要があります。[Coinbase](https://www.coinbase.com/)や[Meria](https://meria.com/)などの任意の暗号資産取引所で購入できます。
  * Spicy Testnetでは、[faucet](/jp/kaihatsu/kihon/testnet-token-nyushu.md)から入手できるテスト用CHZ tokenが必要です。
* ChatGPT、Gemini、Claudeなど、AIコードアシスタントのアカウント。
* [Reownアカウント](https://cloud.reown.com/sign-in)（WalletKitコネクタを統合するため）。

## dAppのアイデアを見つける

最初のステップは、魅力的なアイデアを練り上げることです。Chiliz Chain上で構築するのですから、あなたのコンセプトは理想的にはブロックチェーン技術とスポーツ・エンターテインメントの世界の橋渡しをするものであるべきです。ファンが何を求めているかを考えてみましょう。

{% hint style="info" %}
優れたアイデアには明確なビジネスケースがあります。どのように価値を生み出すのか？ ユーザーは誰なのか？

dAppアイデアの例: ファン予測マーケット。

* コンセプト: ファンがCHZを使って今後の試合の結果に賭けられる（例: 「チームAはチームBに勝つか？」）。
* ビジネスケース: マーケットの決済時に勝利プールから少額の手数料（例: 2%）を徴収します。この手数料はbeneficiaryのwalletに送られ、持続可能な収益源を生み出します。
  {% endhint %}

AIツールを使ってアイデアをブレインストーミングし、洗練させることができます。

しっかりとしたコンセプトができたら、いよいよsmart contractを作成します。

## AIでSmart Contractを生成する

最新のAIツールは、安全で効率的なsmart contractのコードを書くことに驚くほど長けています。

{% hint style="info" %}
smart contractとは、あらかじめ定められた条件が満たされると自動的に実行される、ブロックチェーン上に保存されたコンピュータプログラムです。Solidityは主要なsmart contractコーディング言語の一つです。
{% endhint %}

### 重要なプロンプト指示

AIにプロンプトを与えるときは、常に非常に具体的に！

指示には以下を含める必要があります。

1. Solidityのバージョン: 0.8.24以下のバージョンを指定してください。これはChiliz Chainがまだ最新のSolidityバージョンを完全にはサポートしていないためです。
2. 車輪の再発明をしない: できる限り既存のOpenZeppelin contractをベースにcontractを作るようAIに指示してください。

{% hint style="info" %}
[OpenZeppelin](https://www.openzeppelin.com/)は、安全なdAppを構築するためのオープンソースプラットフォームです。

複数のセキュリティおよび監査サービスに加えて、コミュニティで検証された[smart contractのライブラリ](https://docs.openzeppelin.com/contracts/)を提供しており、コミュニティが自分のプロジェクトで自由に使えます。

そのため、OpenZeppelin contractは業界標準とみなされており、安心して使用できます。
{% endhint %}

3. フラットなContract: 「フラットな」contractを生成するようAIに指示してください。これはコードが単一のファイルに自己完結し、外部のインポートや依存関係に頼らないことを意味します。これにより後のverifyが簡単になります。
4. Walletアドレス: contractを所有するwalletアドレス（deployer）と、手数料があればそれを受け取るアドレス（beneficiary）を提供してください。

あとはあなたがAIツールにプロンプトを与えるだけです！

AIがSolidityコードを生成したら、可能であればダウンロードするか、コピーしてコンピュータに`.sol`ファイルとして保存してください。

## コンパイルとDeploy

次に、contractをChiliz Chain上にdeployする必要があります。

contractのデバッグ、コンパイル、deployには、無料のWebベース環境であるRemix IDEを使用します。

1. Remix IDEを開く: [remix.ethereum.org](https://remix.ethereum.org/)にアクセスします。
2. contractをアップロードする: 左側の「File Explorers」タブで新しいファイルを作成し、AIが生成したSolidityコードを貼り付けます。
3. Contractをコンパイルする:
   * 「Solidity Compiler」タブに移動します。
   * Compilerバージョンを「0.8.24+xxx」に設定します。
   * Compileボタンをクリックします。

より詳しいRemixでのdeployガイドはこちらをご覧ください。

[remix-deploy.md](/jp/kaihatsu/kihon/smart-contract-deploy/remix-deploy.md)

### AIでデバッグする

初回のコードにエラーがあるのはよくあることです。Remixのデバッガはそれらを検出するのに非常に優れています。

コンパイルが失敗した場合は、Remixコンソールからエラーメッセージをコピーします。AIツールに戻り、検出された誤りを修正するよう依頼します。

{% hint style="info" %}
次のようなプロンプトが使えます。

「あなたがくれたSolidityコードはRemix IDEで以下のエラーを出しました。修正してください: ...」と書き、Remixのすべてのエラーメッセージをコピー＆ペーストします。
{% endhint %}

contractがエラーなく正常にコンパイルされるまで、RemixでのコンパイルとAIからの修正取得のプロセスを繰り返します。

### Spicy Testnetへのdeploy

smart contractがコンパイルされたら、deployする必要があります。

1. Remixの「Deploy & Run Transactions」タブに移動します。
2. Environmentで「Injected Provider - MetaMask」を選択します。これによりwalletがRemixへの接続を求めてきます。
3. テスト段階では、MetaMaskがSpicy Testnetに接続されていることを確認します。
4. RemixでDeployボタンをクリックします。walletがポップアップし、トランザクションの確認とテスト用CHZ tokenでのgas代の支払いを求めてきます。

確認後、Remixの「Deployed Contracts」セクションにdeployされたcontractが表示されるはずです。トランザクションは[Chiliscan Spicy](https://testnet.chiliscan.com/)でも確認できます。

## Contractをverifyする

次に、smart contractをオンチェーンでverifyする必要があります。verify済みのcontractは透明性が高く、信頼できます。ユーザーがブロックエクスプローラー上で直接ソースコードを読み、監査できるようになります。

[Chiliscan Spicy](https://testnet.chiliscan.com/)での手順は次のとおりです。

1. Chiliscanで、自分のdeployトランザクションを見つけ、新しいcontractのアドレスをコピーします。
2. [Chiliscan Spicy Contract Verifier](https://testnet.chiliscan.com/verifycontract)を開きます。
3. Verificationフォームに記入する: いくつかの情報を提供する必要があります。

{% hint style="info" %}
次のようなプロンプトでAIツールに助けを求められます。

「Chiliscanで自分のSolidity smart contractをverifyする必要があります。contractアドレスは`0xxxxxxxx`です。使用したcompilerバージョンは0.8.24でした。... のフィールドに何を入れればよいか教えてもらえますか？」
{% endhint %}

4. フォームを送信します。すべての詳細が正しければ、contractのソースコードがChiliscan上で公開されます！

## Vibe-codingツールでフロントエンドを構築する

smart contractが稼働しverifyされたら、ユーザーがそれとやり取りするためのユーザーインターフェース（UI）が必要です。これにはどんなvibe-codingツールでも使えます。

1. 選んだコーディングアシスタントのアカウントにログインします。
2. 新しいプロジェクトを開始し、AIへのプロンプトを始めます。何を構築したいかを明確にします。

{% hint style="info" %}

#### **プロンプト例**

「Chiliz ChainのdAppのフロントエンドを構築したいです。今のところSpicy Testnet向けに作ってほしいです:

* RPC endpoint: <https://spicy-rpc.chiliz.com/>
* RPC Websocket: wss\://spicy-rpc-ws.chiliz.com/
* Chain ID: 88882
* Currency Symbol: CHZ

私のdAppにやってほしいことはこれです: XXX。\
Smart Contract Address: \[YOUR\_DEPLOYED\_CONTRACT\_ADDRESS]\
私のWalletアドレス:

* ownerは\[YOUR\_OWNER\_ADDRESS]
* beneficiaryは\[YOUR\_BENEFICIARY\_ADDRESS]。

指示:

* dApp向けに最も一般的なツールを使ってWebインターフェースを作成してください。
* xxxxを表示してください。
* ユーザーはxxxxできるべきです。
* ownerはxxxxを作成するためのパスワード保護された管理パネルを持つべきです。」
* xxxx」
  {% endhint %}

できる限り具体的に！ そして遠慮なく反復してください。

## ユーザーのWalletを統合する

ユーザーが自分のwalletをあなたのdAppに接続できるようにするには、walletコネクタソリューションが必要です。選んだAIツールが[ReownのWalletKit](https://reown.com/walletkit)をあなたのために統合できるはずです。

Reownアカウントを作成する必要があります。

1. まだなら[Reown Cloudアカウントにサインアップ](https://cloud.reown.com/sign-in)し、ログインします。
2. 「Create Project」をクリックします。プロジェクト名を入力し、「Continue」をクリックします。
3. 製品として「WalletKit」を選択し、「Continue」をクリックします。
4. フレームワークとして「Next.js」を選択し、「Create」をクリックします。

Reown Cloudが新しいプロジェクトを作成し、project IDも生成します。左上隅に表示されるので、後で必要になるのでそのIDをコピーしてください。

そして、AIツールに統合を処理するよう指示します。

{% hint style="info" %}

#### **プロンプト例**

「ReownのWalletKitを使ってwallet接続機能を追加してください。アカウント作成後に私のWalletKit project IDとAPIキーを提供します。『Connect Wallet』ボタンがWalletKitを使うように設定してください。」
{% endhint %}

セットアップを完了するには、AIとWalletKitの指示に従ってください。WalletKitアカウントからAIプロジェクトにいくつかの情報をコピー＆ペーストする必要があります。

dAppのフロントエンドが完全に機能し、結果に満足するまで、AIの環境内で問い合わせとテストを続けてください。

## Chiliz Chain Mainnetへの移行

これまでは、すべてのAIツールにSpicy Testnetを前提に作業するよう依頼してきました。これは安全なブロックチェーン上でアプリを試運転するために不可欠ですが、特にテスト用CHZ tokenでしか動作せず実際のCHZ tokenでは動作しないため、本番プロジェクトには使用できません。

アプリをSpicy TestnetからChiliz Chain Mainnetに移行するには、上記の手順のほとんどをもう一度やり直す必要があります。

1. Remixでcontractを再度deployしますが、今回はChiliz Chain Mainnetで行います。
2. [Chiliscan Mainnet](https://chiliscan.com/)でcontractが実際にdeployされているか確認します。
3. [Chiliscan Mainnet Contract Verifier](https://chiliscan.com/verifycontract)でcontractをverifyします。
4. 最後に、AIにアプリをChiliz Mainnetを使うよう更新するよう伝えます。具体的に！

{% hint style="info" %}

#### **プロンプト例**

「アプリをChiliz Chain Mainnet向けに更新したいです。RPC URLとChainIDだけを更新し、それ以外は何も変更しないでください:\
\* RPC endpoint: <https://rpc.ankr.com/chiliz\\>
\* Chain ID: 88888」
{% endhint %}

## 最終テスト

他の誰かと共有する前に、アプリをもう一度テストしてください。

これで完了です！ これでChiliz Chain上で稼働する、フルスタックでAI支援によるdAppが手に入りました！


---

# 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:

```
GET https://docs.chiliz.com/jp/kaihatsu/kihon/how-tos/ai-de-dapp-kaihatsu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.