web3.jsを使ったNFTのミント方法

このチュートリアルでは、Web 3とPart I: How to Create an NFTで作成したスマートコントラクトを使って、Ethereumブロックチェーン上にNFTをミントする方法を説明します

このガイドの所要時間の目安：約10分

また、NFTチュートリアルシリーズの他の記事もぜひご覧ください：

• 🪄 How to mint an NFT with Ether.js
• 👛 How to view your NFT in your mobile wallet
• 💸 How to set a price on an NFT
• 💻 NFT minter tutorial: How to create a full stack dApp

「NFTをミントする」とは、ERC721トークンの一意のインスタンスをブロックチェーン上に公開する行為を指します。このNFTチュートリアルシリーズのPart IでSepoliaネットワークへのスマートコントラクトのデプロイに成功したので、web3のスキルを活かしてNFTをミントしていきましょう！

このチュートリアルを終える頃には、このコードを使って好きなだけNFTをミントできるようになります。それでは始めましょう！

ステップ1：Web3をインストールする

NFTスマートコントラクトの作成に関する最初のチュートリアルを進めていれば、Ethers.jsを使った経験がすでにあるはずです。Web3はEthersと似ており、Ethereumブロックチェーンへのリクエスト作成を容易にするためのライブラリです。このチュートリアルでは、自動リトライと堅牢なWebSocketサポートを提供する拡張web3ライブラリであるAlchemy Web3を使用します。

プロジェクトのホームディレクトリで以下を実行します：

ステップ2：mint-nft.jsファイルを作成する

scriptsディレクトリ内にmint-nft.jsファイルを作成し、以下のコードを追加します：

ステップ3：コントラクトABIを取得する

コントラクトABI（Application Binary Interface）は、スマートコントラクトとやり取りするためのインターフェースです。Hardhatが自動的にABIを生成し、MyNFT.jsonファイルに保存します。これを使用するには、mint-nft.jsファイルに以下のコードを追加して内容をパースする必要があります：

ABIを確認したい場合は、コンソールに出力できます：

mint-nft.jsを実行してABIをコンソールに出力するには、ターミナルで以下を実行します

ステップ4：IPFSを使ってNFTのメタデータを設定する

Part Iのチュートリアルを覚えていれば、mintNFTスマートコントラクト関数はtokenURIパラメータを受け取り、これがNFTのメタデータを記述するJSONドキュメントに解決される必要があることを思い出すでしょう。このメタデータこそがNFTに命を吹き込むものであり、名前、説明、画像、その他の属性といった設定可能なプロパティを持たせることができます。

NFTが真に分散化されていることを保証するため、NFTのアセットとメタデータの保存には、便利なIPFS APIおよびツールキットであるPinataを使用します。Pinataのアカウントを持っていない場合は、pinata.cloudで無料アカウントに登録し、メール認証の手順を完了してください。

アカウントを作成したら：

• 右上の「Pinata Upload」ボタンに移動します
• Pinataに画像をアップロードします—これがNFTの画像アセットになります。アセットの名前は自由に付けて構いません
• アップロード後、ページ上部に緑色のポップアップが表示され、アップロードのハッシュを確認できます—そのハッシュコードをコピーしてください。アップロードしたものは以下で確認できます：https://gateway.pinata.cloud/ipfs/<hash-code>

視覚的に理解したい方向けに、上記の手順をまとめました。次に、Pinataにもう一つドキュメントをアップロードします。ただし、その前にそのドキュメントを作成する必要があります！

ルートディレクトリ内にnft-metadata.jsonという新しいファイルを作成し、以下のjsonコードを追加します：

​jsonの内容は自由に変更して構いません。attributesセクションの項目を削除したり追加したりできます。最も重要なのは、image欄がIPFS画像の場所を指すようにすることです—そうしないと、NFTには（とても可愛い！）犬の写真が含まれることになります。

jsonファイルの編集が終わったら保存し、画像のアップロード時と同じ手順でPinataにアップロードします。

ステップ5：コントラクトのインスタンスを作成する

コントラクトとやり取りするには、コード内でそのインスタンスを作成する必要があります。そのためには、コントラクトのデプロイ時に取得したコントラクトアドレス、またはEtherscanでコントラクトをデプロイしたアドレスを検索して取得したものが必要です。

上記の例では、コントラクトアドレスは0x81c587EB0fE773404c42c1d2666b5f557C470eEDです。

次に、web3のcontractメソッドを使い、ABIとアドレスを使ってコントラクトを作成します。mint-nft.jsファイルに以下を追加します：

ステップ6：.envファイルを更新する

Ethereumチェーンにトランザクションを作成・送信するために、パブリックなEthereumアカウントアドレスを使用してアカウントのnonceを取得します（後述します）。

.envファイルにパブリックキーを追加してください—チュートリアルのPart 1を完了していれば、.envファイルは以下のようになっているはずです：

ステップ7：トランザクションを作成する

まず、mintNFT(tokenData)という関数を定義し、以下の手順でトランザクションを作成します：

1. .envファイルからPRIVATE_KEYとPUBLIC_KEYを取得します。
2. 次に、アカウントのnonceを調べる必要があります。nonceは、あなたのアドレスから送信されたトランザクション数を追跡するために使われ、セキュリティ上の理由やリプレイ攻撃を防ぐために必要です。アドレスから送信されたトランザクション数を取得するには、getTransactionCountを使用します。
3. 最後に、以下の情報を使ってトランザクションを設定します：
4. 'from': PUBLIC_KEY：トランザクションの発信元は自分のパブリックアドレスです
5. 'to': contractAddress：やり取りしトランザクションを送信するコントラクトです
6. 'nonce': nonce：自分のアドレスから送信されたトランザクション数を示すアカウントnonceです
7. 'gas': estimatedGas：トランザクションの完了に必要な推定ガス量です
8. 'maxPriorityFeePerGas': estimatedFee：ガスあたりの入札推定手数料です
9. 'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI()：このトランザクションで実行したい計算内容—この場合はNFTのミントです

mint-nft.jsファイルは、今頃以下のようになっているはずです：

ステップ8：トランザクションに署名する

トランザクションを作成したので、次はそれを送信するために署名する必要があります。ここでプライベートキーを使用します。

web3.eth.sendSignedTransactionはトランザクションハッシュを返してくれるので、これを使ってトランザクションがマイニングされたか、ネットワークにドロップされずに済んだかを確認できます。トランザクション署名のセクションでは、トランザクションが正常に完了したかどうかを把握できるよう、エラーチェックを追加していることにお気づきでしょう。‍

ステップ9：mintNFTを呼び出しnode contract-interact.jsを実行する

Pinataにアップロードしたmetadata.jsonを覚えていますか？Pinataからそのハッシュコードを取得し、以下をmintNFTの呼び出しに渡します https://gateway.pinata.cloud/ipfs/​

ハッシュコードの取得方法は以下の通りです：

すべてをまとめると、コードは以下のようになるはずです：

では、node scripts/mint-nft.jsを実行してNFTをデプロイしましょう。数秒後、ターミナルに以下のようなレスポンスが表示されるはずです：

次に、Alchemy mempoolにアクセスして、トランザクションの状態（保留中、マイニング済み、またはネットワークにドロップされたか）を確認してください。トランザクションがドロップされた場合は、Sepolia Etherscanでトランザクションハッシュを検索して確認するのも有用です。

以上です！これでEthereumブロックチェーン上にNFTをデプロイし、ミントすることができました 🎉

mint-nft.jsを使えば、あなたの心（と財布）が望むだけNFTをミントできます！ただし、NFTのメタデータを記述する新しいtokenURIを必ず渡すようにしてください—そうしないと、IDだけ異なる同一のNFTを量産することになります。

おそらく、ウォレット内でNFTを見せびらかしたいと思っていることでしょう😉—ぜひPart III：How to View Your NFT in Your Walletもご覧ください。