[翻訳] ERC-4671トークンスタンダードを使用して、シンプルなDAppを構築

:::note info
本記事は下記の翻訳となります。
[『Build a Simple DApp using ERC-4671 Token Standard』](https://blog.bunzz.dev/build-a-simple-dapp-using-erc-4671-token-standard/)
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926720/b718f2e5-7e83-ef16-516f-3ea9b346b46b.png)

ERC-4671 モジュールを使用して分散型アプリケーション（DApp）を構築する方法についてのガイドへようこそ！

このガイドでは、ブロックチェーンの新たな標準である Ethereum の ERC-4671 を使用した DApp 開発の実践的な入門を提供します。このチュートリアルの終わりまでに、BSC ブロックチェーンと対話できる機能を備えた DApp を作成することができます。

## 使用される技術

このガイドでは、Ethereum 開発エコシステムでいくつかの主要な技術とツールを使用します：

- Binance Smart Chain（BSC）テストネット
- Bunzz エコシステム
- React.js と Ethers.js
- ERC-4671
- Metamask
- Bunzz ボイラープレート

## 前提条件

このガイドを始める前に、Ethereum と BSC に焦点を当てたブロックチェーン技術の基礎的な理解を持つことが望ましいです。JavaScript と VScode にある程度の理解があると有益です。Web3.js ライブラリを使用して BSC ブロックチェーンと対話するために使用します。スマートコントラクト、Metamask ウォレット、および Ethereum トークンの基本的な概念を理解していると非常に役立ちます。

始める前に、ERC-4671 が何であるかを理解する必要がありますが、長くて退屈な歴史の授業ではありません、約束します！

## ERC-4671 とは

ERC-4671、または Non-Tradable Tokens（NTT）は、Ethereum ブロックチェーン上の個人の所有物や成果を表します。これらのトークンは、学位、証明書、政府の文書、その他の個人のアイテムや成果を象徴しています。これらは「ソウルバウンド」と呼ばれ、取引や譲渡のために設計されておらず、金銭的な価値を持たず、所有権や達成の証明として機能します。

ERC-4671 は、このようなトークンに対する標準化されたインターフェースを提供し、アプリケーション開発を拡大し、ブロックチェーンを単なる金融取引以上の個人の所有物や成果を検証するツールとして位置付けることを目指しています。

さあ、このトークン標準を使用してシンプルな DApp を構築しましょう。

## ERC-4671 を使用した DApp の構築

ERC-4671 標準に基づいた ERC-4671 DApp の構築は複雑なプロセスですが、Bunzz のボイラープレートの助けを借りれば、簡単に行うことができます。

ボイラープレートの使用手順を見ていきましょう。ボイラープレートは、あなたの特定のニーズに合わせて簡単にカスタマイズできる事前に書かれたコードベースを提供し、時間を節約し、DApp を迅速にテストして展開することができます。

### **Bunzz ボイラープレートの使用方法**

ERC-4671 DApp ボイラープレートを使用するための主な手順と、ボイラープレートを実行およびカスタマイズするために必要なすべてのものを確認する方法を以下に示します。

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

![](https://super-translator.inaridiy.workers.dev/assets/image/f709b94c-bb8d-4410-89ee-9042a71407ad)

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

![](https://super-translator.inaridiy.workers.dev/assets/image/ce5fcc91-e4b9-4710-afc9-46b2680c8982)

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

![](https://super-translator.inaridiy.workers.dev/assets/image/fcdf3c18-0242-41cc-9ab3-d955847b9b15)

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

![](https://super-translator.inaridiy.workers.dev/assets/image/2a7314e1-3023-4b68-bb1c-4b8c605bb9b2)

- erc4671.json ファイルを開き、既存の ABI コンテンツを Bunzz ダッシュボードからコピーしたものに置き換えます。

![](https://super-translator.inaridiy.workers.dev/assets/image/4b28f1a0-98b8-49ff-b6af-e086fd7be2dd)

- *constants.js*ファイルを開き、スマートコントラクトアドレスの変数を検索します。現在のアドレスを Bunzz ダッシュボードからコピーしたものに置き換えます。

![](https://super-translator.inaridiy.workers.dev/assets/image/637397c7-f5a9-44f3-879d-60b9561495eb)

PS：56 は BSC メインネット ID を表し、97 は BSC テストネット ID です。

- ターミナルで*npm start*または yarn start\_を実行してアプリを起動します。アプリのインターフェースは以下の画像とまったく同じになります。

![](https://super-translator.inaridiy.workers.dev/assets/image/b2b4a376-3346-4b2e-88ac-a1b93e6edfdd)

## DApp との対話

ブラウザ上で DApp が正常に動作している場合、次のように対話することができます。

- **ウォレットの接続**：画面の右上にある「ウォレットに接続」ボタンをクリックして、Metamask ウォレットに接続する必要があります。

![](https://github.com/john082Coder/BunzzERC4671ModuleTest0)

- **トークンの作成**：トークンを作成するには、トークンの所有者となるアカウントのアドレスを入力する必要があります。その後、「作成」ボタンをクリックして Mint 関数を呼び出します。

![](https://super-translator.inaridiy.workers.dev/assets/image/244b3f77-8aa7-4bb3-910a-c30cd89f479f)

- **トークンの取り消し**：取り消すトークンの ID を入力する必要があります。その後、「取り消し」ボタンをクリックして Revoke 関数を呼び出します。

![](https://super-translator.inaridiy.workers.dev/assets/image/c30182b9-fd36-4ca6-9bbf-7fa023ddf342)

ボイラープレートのコードを編集およびカスタマイズして、インターフェースを変更したり新機能を追加したりすることができます。

これらの手順により、[ERC-4671 スマートコントラクト](https://app.bunzz.dev/module-templates/5b1ba3ee-6efa-4b90-bbae-9723f014d110?version=1.0.0)モジュールを使用して、特定の ERC-4671 のユースケースに合わせた DApp を構築およびカスタマイズするために必要なすべてが提供されます。

——————

これらの手順に従い、[ボイラープレート](https://github.com/john082Coder/BunzzERC4671ModuleTest)を使用すると、ユースケースに合わせたベスティングウォレットを構築およびカスタマイズするために必要なすべてが提供されます。

---

---

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