# ゼロからNFT分散化取引所を構築する以前の記事では、ERC-20トークンが分散化取引所を通じてどのように取引されるかを探りました。それでは、ERC-721プロトコルに従ったNFTは、どのように分散化取引を実現できるのでしょうか？現在主流のNFT取引プラットフォームのほとんどは、商品の陳列を買い手が選ぶための棚に似たオーダーモードを採用しています。本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを作成することによって、基本的なNFT分散化取引システムを実現します。なお、本稿は学習参考用であり、プロダクション環境には適していません。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc)## NFTの紹介NFTは非代替性トークンであり、各トークンは唯一無二です。それはERC-721プロトコルに従い、通常はウォレット内で異なる画像形式で表示され、各NFTには一意のIDがあり、区別されます。NFTの特性により、ERC-20トークンのように価格曲線を通じて価格を設定することはできません。したがって、NFT取引は通常、注文簿の形式を採用しています。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-65746508ae31b6e3e418c31b6e8bcdc2)## オーダーブック取引モードオーダーブック方式では、商品価格は売り手が自ら設定し、アルゴリズムによって計算されるものではありません。一般的に2つの取引方法があります:1. 価格設定注文: 売り手が販売価格を設定し、買い手がそれを適切だと感じれば購入できます。2. 購入依頼: バイヤーが購入注文を発行し、売り手が価格が適切だと感じた場合、販売することができますこの記事では、最初の価格設定取引方法に重点を置いて紹介します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-f6f730a4e82de02e49d30d9089e8716e)## NFT取引所の基本機能基本的なNFT取引所には以下の機能が含まれるべきです:1. 商品を上架:設定した価格でNFTを上架する2. 商品の購入: NFTの価格に従って購入する3.手数料:取引価格に比例して請求されます### 上場プロセス1. ユーザーはフロントエンドでNFTを選択し、価格を設定します。2. ユーザーは契約にNFTの操作を許可する3. リスティング情報を契約書に記録する### 購入プロセス1. ユーザーはフロントエンドでNFTを選択し、購入をクリックします。2. 契約は買い手の資金を売り手に移転し、NFTを買い手に転送します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b6b3dc59b2ca9328bb852240a2181119)## NFT取引所を実装する下に、ゼロからシンプルなNFT取引所を実現します。### 1. テスト用NFTを作成するテストを便利にするために、Remixを使用してERC-721プロトコルのNFTコントラクトを迅速にデプロイできます。もちろん、既存のNFTを使用してテストすることもできます。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-8dc32f1a83e46e857340f9841df2c7f5)### 2. スマートコントラクトの作成契約は以下の主要機能を実現する必要があります:#### 2.1 売り手がNFTを出品するプロセス:1. NFTの所有権を確認する2. リスティングレコードを追加する 3. 上場イベントをトリガーする! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-64251e5648f68085d608a40fe42097c4)#### 2.2 バイヤーがNFTを購入プロセス:1. NFTのリスティング情報を取得する2. 手数料を計算して差し引く3. NFTの所有権を譲渡する4. 購入イベントをトリガーする! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-b47304559c5b8978028d581df19049c8)#### 2.3 上場を取り消すisActiveフィールドをfalseに設定することで実現します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-4dc46af090a3d3987626b915c0d5f1ac)#### 2.4 手数料の引き出し契約の所有者は累積された手数料を引き出すことができます。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-4e5e1ba70137403b4ea0e0503378e14a)### 3. フロントエンドインターフェースの開発以下のツールを使用してください:- Ant Design Web3:ウォレットを接続してNFTを展示- Wagmi:ウォレットとインタラクションする- Next.js + Vercel:プロジェクトをデプロイするフロントエンドには3つの主要なページが含まれています:- Mint:テスト用NFTを鋳造する- 購入:NFTマーケットプレイス- ポートフォリオ: ユーザーのNFTを管理! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-56f66de1a4bb30af91363bd5cc567e40)#### 3.1 ウォレットを接続Ant Design Web3の接続されたコンポーネントを使用して実装されています。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-a11e2cb9eb62433a03adcf2abd7b56b5)####3.2ミントページ wagmiのuseWriteContractメソッドを使用して、契約を呼び出してNFTをミントします。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-0a338541b5f8b2aa130fb03a46027c47)#### 3.3 ポートフォリオページユーザーのNFTを表示し、上架/下架操作をサポートします。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-6d344484abad011d83b96ff377ffae1f)#### 3.4 購入ページ販売中のすべてのNFTを表示し、購入機能をサポートします。上記の手順を通じて、基本機能を備えたNFT分散型取引所を実現しました。最後に、プロジェクトをVercelにデプロイして使用できます。
0から1へ：NFT分散化取引所の完全ガイド
ゼロからNFT分散化取引所を構築する
以前の記事では、ERC-20トークンが分散化取引所を通じてどのように取引されるかを探りました。それでは、ERC-721プロトコルに従ったNFTは、どのように分散化取引を実現できるのでしょうか？
現在主流のNFT取引プラットフォームのほとんどは、商品の陳列を買い手が選ぶための棚に似たオーダーモードを採用しています。本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを作成することによって、基本的なNFT分散化取引システムを実現します。なお、本稿は学習参考用であり、プロダクション環境には適していません。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)
NFTの紹介
NFTは非代替性トークンであり、各トークンは唯一無二です。それはERC-721プロトコルに従い、通常はウォレット内で異なる画像形式で表示され、各NFTには一意のIDがあり、区別されます。
NFTの特性により、ERC-20トークンのように価格曲線を通じて価格を設定することはできません。したがって、NFT取引は通常、注文簿の形式を採用しています。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
オーダーブック取引モード
オーダーブック方式では、商品価格は売り手が自ら設定し、アルゴリズムによって計算されるものではありません。一般的に2つの取引方法があります:
この記事では、最初の価格設定取引方法に重点を置いて紹介します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-f6f730a4e82de02e49d30d9089e8716e.webp)
NFT取引所の基本機能
基本的なNFT取引所には以下の機能が含まれるべきです:
上場プロセス
購入プロセス
! Web3スターターシリーズ:NFT DEXをゼロから実装する
NFT取引所を実装する
下に、ゼロからシンプルなNFT取引所を実現します。
1. テスト用NFTを作成する
テストを便利にするために、Remixを使用してERC-721プロトコルのNFTコントラクトを迅速にデプロイできます。もちろん、既存のNFTを使用してテストすることもできます。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2. スマートコントラクトの作成
契約は以下の主要機能を実現する必要があります:
2.1 売り手がNFTを出品する
プロセス:
! Web3初心者シリーズ:NFT DEXをゼロから実装する
2.2 バイヤーがNFTを購入
プロセス:
! Web3スターターシリーズ:NFT DEXをゼロから実装する
2.3 上場を取り消す
isActiveフィールドをfalseに設定することで実現します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)
2.4 手数料の引き出し
契約の所有者は累積された手数料を引き出すことができます。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3. フロントエンドインターフェースの開発
以下のツールを使用してください:
フロントエンドには3つの主要なページが含まれています:
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.1 ウォレットを接続
Ant Design Web3の接続されたコンポーネントを使用して実装されています。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)
####3.2ミントページ
wagmiのuseWriteContractメソッドを使用して、契約を呼び出してNFTをミントします。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.3 ポートフォリオページ
ユーザーのNFTを表示し、上架/下架操作をサポートします。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
3.4 購入ページ
販売中のすべてのNFTを表示し、購入機能をサポートします。
上記の手順を通じて、基本機能を備えたNFT分散型取引所を実現しました。最後に、プロジェクトをVercelにデプロイして使用できます。