[翻訳] ICO V2 スマートコントラクトモジュールを使用して ICO DApp を構築する方法

:::note info
本記事は下記の翻訳となります。
[『How to Build an ICO DApp with ICO V2 Smart Contract Module』](https://blog.bunzz.dev/building-ico-dapps-with-the-ico-contract-module/)
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/b4fa1680-d685-c671-0c84-043ac7352fe2.png)

Initial Coin Offerings（ICOs）の探求に興味がある開発者で、ICO 管理のための DApp を構築したい場合、正しい場所に来ました。

このガイドでは、ICO（公開セール）スマートコントラクトモジュールの使用方法について説明します。経験豊富な開発者でもブロックチェーンに初めて触れる方でも、ICO DApp を作成するための実践的な手順を学ぶことができます。

このチュートリアルの最後までに、ICO の概念を理解し、Bunzz の ICO（公開セール）コントラクトモジュールの機能を知り、独自の ICO DApp を立ち上げるための専門知識を身につけることができます。

さあ、始めましょう！しかし、まずは ICO とは何かを理解しましょう。

## ICO と ICO DApp とは？

ICO は、ブロックチェーンベースのプロジェクトが暗号通貨トークンを発行・販売することで資金を調達するための方法です。ICO は、特に 2017 年と 2018 年初頭の仮想通貨ブームの中で人気となりました。

ICO DApp（Initial Coin Offering Decentralized Application）は、ICO キャンペーンの立ち上げと管理を容易にするブロックチェーンベースのアプリケーションです。ICO DApp は、分散型アプリケーション（DApp）の機能と ICO の実施に必要な特定の機能を組み合わせています。

ICO DApp の目的は、トークンの販売と資金調達のための安全で透明性のある効率的なプラットフォームを提供することです。通常、トークンの生成、トークン販売の仕組み、投資家のホワイトリスト登録、KYC 手続き、資金管理、トークンの配布、返金の仕組みなどが含まれます。これらの機能は、[ICO（公開セール）コントラクトモジュール](https://app.bunzz.dev/module-templates/c922eb26-35b6-4c88-a667-a51ceba650f3?version=1.0.0)などのスマートコントラクトを使用して実装され、ICO プロセスが信頼性のある自動化されたものになるようにします。

## ICO DApp の構築方法

ICO DApp または他のタイプの DApp の構築には、アプリケーションの特定のニーズに対応するためのカスタマイズされたスマートコントラクトが必要です。ICO の場合、トークンの販売、配布、引き出しプロセスを処理するスマートコントラクトが必要です。ICO DApp の構築は難しく思われるかもしれませんが、ICO DApp 向けに明示的に設計された ICO（公開セール）V2 コントラクトモジュールテンプレートを使用することで簡素化することができます。

![](https://lh6.googleusercontent.com/eT8XghuM37ylUqOzURQohp7qasgW7suPnbIxtuY7wQwswOzc2yfed5iyz7DuMhVjCAIY58ll2ha9KItjrKOYKej9Q9g6k8fQkY0tKk6oUEQUMhS28TjN7fQVPgO-7FLuASALjGz0jaVgPQU70Nt4OyM)

ICO（公開セール）コントラクトを使用するには、次のものが必要です。

- **Bunzz アカウント**：お好きなブロックチェーンにスマートコントラクトをデプロイするために Bunzz アカウントを作成します。
- **ABI とスマートコントラクトアドレス**：ABI（Application Binary Interface）を生成し、スマートコントラクトアドレスを取得します。これらはフロントエンドでコントラクトとのやり取りに使用されます。
- **ERC20 トークン**：初期コインオファリングに使用される ERC20 トークンを準備します。このトークンは ICO 中に参加者に配布されます。
- **IDE（できれば VSCode）**：コーディングと ICO DApp のテストのために統合開発環境（IDE）をセットアップします。
- **オプション**：GitHub から ICO DApp のボイラープレートをクローンします。これにより、DApp の基本的な構造を設定するのに時間を節約できます。

これらのコンポーネントが揃っていれば、ICO（公開セール）コントラクトモジュールを使用して ICO DApp を構築する準備が整います。さあ、始めましょう！

## Bunzz を使用した ICO DApp の構築

前述のように、Bunzz の[ICO（公開セール）V2 スマートコントラクト](https://app.bunzz.dev/module-templates/c922eb26-35b6-4c88-a667-a51ceba650f3?version=1.0.0)テンプレートは、ICO DApp の開発を簡素化します。このセクションでは、モジュールテンプレートと ICO DApp のボイラープレートを使用して ICO DApp を構築するプロセスを案内します。

ICO DApp のボイラープレートは、次のものを使用して構築されています。

- フロントエンドとユーザーインターフェースには React.js を使用
- Bunzz からデプロイされた[ICO（公開セール）V2 スマートコントラクト](https://app.bunzz.dev/module-templates/c922eb26-35b6-4c88-a667-a51ceba650f3?version=1.0.0)
- Web3.js と ethers.js を使用してスマートコントラクトとやり取り
- Binance Smart Chain（BSC）Testnet

以下は、ボイラープレートを実行しカスタマイズするために必要な手順の概要です。

- ICO DApp のボイラープレートの[GitHub リポジトリ](https://github.com/john082Coder/BunzzICOModuleTest)をローカルコンピュータにクローンします。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-2048x1017.png)

- 好みの IDE（Visual Studio Code など）を使用してクローンしたリポジトリを開きます。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/Screenshot-2023-06-13-at-11.45.10-AM-2048x1192.png

- ターミナルで*npm install*または*yarn install*を実行して必要な NPM パッケージをインストールします。

- Bunzz ダッシュボードから[ICO（公開セール）V2](https://app.bunzz.dev/module-templates/c922eb26-35b6-4c88-a667-a51ceba650f3?version=1.0.0)スマートコントラクトモジュールをデプロイします。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-1-2048x1094.png)

- デプロイする前に、*\_startTime*と*\_endTime*パラメータを渡します。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-2-2048x1017.png)

- デプロイ後、Bunzz ダッシュボードから ABI とスマートコントラクトアドレスをコピーします。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-3-2048x1094.png)

- **ICO.json** ファイルを開き、Bunzz ダッシュボードからコピーした ABI の内容で既存の ABI を置き換えます。同様に、**erc20.json** ファイルでも同じことを行います（[erc20 トークン](https://app.bunzz.dev/module-templates/e4c0005b-bf8c-4309-a16b-4f1e61d6e921?version=1.0.0)をデプロイし、ABI をコピーして既存のファイルを置き換えます）。

![](https://super-translator.inaridiy.workers.dev/assets/image/57c7c84b-c76d-4d24-acce-8fd035fb6647)

- _constants.js_ ファイルを開き、スマートコントラクトのアドレス変数を見つけます。Bunzz ダッシュボードからコピーしたアドレスで現在のアドレスを置き換えます。

![](https://super-translator.inaridiy.workers.dev/assets/image/c3db06e8-1d1e-407b-b628-aebbb7ee255f)

_PS: 56 は BSC メインネット ID を表し、97 は BSC テストネット ID を表します。_

- _npm run start_ または _yarn run start_ を実行してアプリを起動します。DApp は以下の画像のようになります。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-6-2048x1094.png)

## DApp との対話

- **ウォレット接続**: 画面右上の「ウォレットに接続」ボタンをクリックしてウォレットに接続します。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-7-2048x1094.png)

- **ICO トークンをモジュールに接続**: トークンのアドレスを入力し、「他のコントラクトに接続」ボタンをクリックして ICO トークンのアドレスを設定します。

![](https://super-translator.inaridiy.workers.dev/assets/image/6838cf51-bf70-41f7-8a0a-389cb615763b)

- **トークン価格の更新**: 新しい価格を入力し、「UpdatePrice」ボタンをクリックして ICO トークンの価格を更新します。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-9.png)

- **トークンの購入**: 「Buy」ボタンをクリックしてトークンを購入します。トークンの価格に応じて ETH を入金する必要があります。

![](https://blog.bunzz.dev/wp-content/uploads/2023/06/image-10.png)

- **ETH の引き出しとトークンの引き出し**: オーナーとして、ICO モジュールから ETH と残りのトークンを引き出すには、「WithdrawETH」ボタンと「WithdrawToken」ボタンをクリックします。

![](https://super-translator.inaridiy.workers.dev/assets/image/7eabe100-0429-46f0-86db-519600fc51b7)

---

これらの手順に従い、提供されたボイラープレートを使用すると、特定のユースケースに合わせて [ICO（パブリックセール）V2](https://app.bunzz.dev/module-templates/c922eb26-35b6-4c88-a667-a51ceba650f3?version=1.0.0) スマートコントラクトモジュールを構築およびカスタマイズするために必要なすべてが手に入ります。

---

---

:::note info
【Bunzz とは】
Bunzz はアジア最大級の DApps 開発インフラを運営する、web3×LLM におけるリーディングカンパニーです。「公共財としてのスマートコントラクト」の実現に向けて、各種 web3 インフラやサービスを開発・提供しております。

【Our Projects】

- **[Smart Contract Hub | スマートコントラクトの Github](https://www.bunzz.dev/)**
- **[DeCipher | "Read me" for All of Contracts](https://www.bunzz.dev/decipher)**
- **[Bunzz for Enterprise | Tier1 の技術リソースを日本企業に提供](https://enterprise.bunzz.dev/ja)**
- **[Bunzz Audit | 透明かつ持続的なコントラクト監査の仕組みを実現](hhttps://www.bunzz.dev/audit)**

【Social Links】

- [X(旧 Twitter))](https://twitter.com/BunzzDev)
- [Discord Community](https://t.co/6hHgssJdvW)
- [Youtube](https://www.youtube.com/@bunzzdev)
- [Instagram](https://www.instagram.com/bunzzdev/)

【お問合せ】
web3 開発・コンサルティングのご相談はこちらから 👉[Google Form](https://forms.gle/4tgQjWSw2MMMZW6E6)
:::

:::note info
Bunzz R&D エンジニア荒巻さんの著書[『スマートコントラクトの仕組みと法律』](https://amzn.to/3V03sNH)が好評発売中です 📕
<a href="https://amzn.to/3V03sNH" rel="nofollow" referrerpolicy="no-referrer-when-downgrade">
<img
    src="https://m.media-amazon.com/images/I/81wopoZ1K4L._SY522_.jpg"
    alt="『スマートコントラクトの仕組みと法律』（中央経済グループパブリッシング）"
    width="200px"
    height="auto"
    Style="border: 0px;"
  />
</a>
:::