# ゼロからNFT分散化取引プラットフォームを実現するERC-721 プロトコルに準拠した NFT の分散化取引の方法は、ERC-20 トークンとは異なります。現在主流の NFT 取引プラットフォームは、商品を棚に陳列して買い手が選択するのに類似したオーダー方式で取引を行っています。本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを通じて、NFT の分散化取引を実現する方法について紹介します。なお、本稿の内容は学習参考用であり、実際の生産環境には適用できません。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc)## NFTの紹介NFT（非代替性トークン）は、ERC-721プロトコルに従った独特なデジタル資産です。各NFTはその独自性を持ち、通常はウォレット内で異なる画像形式で表示され、唯一のID識別子を持っています。NFTの特性により、ERC-20トークンのように価格曲線で価格を設定することはできないため、一般的な取引方法はオーダーブック形式を使用しています。! [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を操作する権限を与えます。契約内でユーザーが出品する商品の価格マッピングテーブルを維持する必要があります。このデータは契約の負担を軽減するために分散化サービスに保存することもできますが、本稿では契約内に保持します。### 商品購入プロセス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. フロントエンド開発フロントエンド開発には以下のツールを使用する必要があります：1. Ant Design Web3:ウォレット接続とNFTディスプレイ用2. Wagmi：ウォレットと相互作用するために3. Nextjs + Vercel：プロジェクトのデプロイに使用フロントエンドアプリケーションには、3つの主要なページがあります：Mint、Buy、およびPortfolio。#### 3.1 ウォレットを接続するAnt Design Web3が提供するコンポーネントを使用して、ウォレット接続機能を実装します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-56f66de1a4bb30af91363bd5cc567e40)####3.2ミントページNFTのミント機能を実装し、wagmiのuseWriteContractメソッドを使用してコントラクトと対話します。! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/social/moments-a11e2cb9eb62433a03adcf2abd7b56b5)#### 3.3 ポートフォリオページユーザーが所有するNFTを表示し、上架と下架の操作をサポートします。OpenSea APIを使用してユーザーのNFTリストを取得し、契約メソッドを通じてNFTの上架状態を判断します。! [Web3スターターシリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-0a338541b5f8b2aa130fb03a46027c47)#### 3.4 購入ページすべての上場しているNFTを表示し、購入機能を提供します。購入時には契約のpurchaseNFTメソッドを呼び出し、ETHで支払います。! [Web3初心者シリーズ:NFT DEXをゼロから実装する](https://img-cdn.gateio.im/social/moments-6d344484abad011d83b96ff377ffae1f)以上のステップを完了すると、基本機能を備えた NFT 分散化取引プラットフォームが構築されます。それを Vercel プラットフォームにデプロイして展示および使用することができます。
ゼロからNFT分散化取引プラットフォームを構築するための完全ガイド
ゼロからNFT分散化取引プラットフォームを実現する
ERC-721 プロトコルに準拠した NFT の分散化取引の方法は、ERC-20 トークンとは異なります。現在主流の NFT 取引プラットフォームは、商品を棚に陳列して買い手が選択するのに類似したオーダー方式で取引を行っています。本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを通じて、NFT の分散化取引を実現する方法について紹介します。なお、本稿の内容は学習参考用であり、実際の生産環境には適用できません。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)
NFTの紹介
NFT（非代替性トークン）は、ERC-721プロトコルに従った独特なデジタル資産です。各NFTはその独自性を持ち、通常はウォレット内で異なる画像形式で表示され、唯一のID識別子を持っています。NFTの特性により、ERC-20トークンのように価格曲線で価格を設定することはできないため、一般的な取引方法はオーダーブック形式を使用しています。
! 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つの主要なページがあります：Mint、Buy、およびPortfolio。
3.1 ウォレットを接続する
Ant Design Web3が提供するコンポーネントを使用して、ウォレット接続機能を実装します。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
####3.2ミントページ
NFTのミント機能を実装し、wagmiのuseWriteContractメソッドを使用してコントラクトと対話します。
! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)
3.3 ポートフォリオページ
ユーザーが所有するNFTを表示し、上架と下架の操作をサポートします。OpenSea APIを使用してユーザーのNFTリストを取得し、契約メソッドを通じてNFTの上架状態を判断します。
! Web3スターターシリーズ:NFT DEXをゼロから実装する
3.4 購入ページ
すべての上場しているNFTを表示し、購入機能を提供します。購入時には契約のpurchaseNFTメソッドを呼び出し、ETHで支払います。
! Web3初心者シリーズ:NFT DEXをゼロから実装する
以上のステップを完了すると、基本機能を備えた NFT 分散化取引プラットフォームが構築されます。それを Vercel プラットフォームにデプロイして展示および使用することができます。