NFTミンターチュートリアル:フルスタックdAppの作り方
著者: Alchemy Team
このチュートリアルでは、NFTミンターを構築し、MetamaskとWeb3ツールを使ってスマートコントラクトをReactフロントエンドに接続する方法を学びながら、フルスタックdAppの作り方を学びます。
さらに、NFTチュートリアルシリーズの他の記事もぜひチェックしてください：
Web2出身の開発者にとって最大の課題の一つが、スマートコントラクトをフロントエンドプロジェクトに接続し、それとやり取りする方法を理解することです。
NFTミンター（デジタルアセットへのリンク、タイトル、説明を入力できるシンプルなUI）を構築することで、次のことを学びます：
- フロントエンドプロジェクトからMetamaskに接続する
- フロントエンドからスマートコントラクトのメソッドを呼び出す
- Metamaskを使ってトランザクションに署名する
このチュートリアルでは、フロントエンドフレームワークとしてReactを使用します。このチュートリアルは主にWeb3開発に焦点を当てているため、Reactの基礎を詳しく解説することはしません。代わりに、プロジェクトに機能を持たせることに重点を置きます
前提条件として、Reactの初級レベルの理解（コンポーネント、props、useState/useEffect、基本的な関数呼び出しの仕組み）が必要です。これらの用語を聞いたことがない場合は、このReactの入門チュートリアルをチェックすることをおすすめします。より視覚的に学びたい方には、Net Ninjaによるこの優れたFull Modern React Tutorialビデオシリーズを強くおすすめします。
それでは、早速始めましょう！
ステップ0：NFT作成の基礎
コードを見る前に、NFTの作成がどのように機能するか理解しておくことが重要です。これには2つのステップがあります：
1) NFTスマートコントラクトをEthereumブロックチェーン上に公開します。通常、これはERC-721またはERC-1155スマートコントラクトです。
この2つのNFTスマートコントラクト規格の最大の違いは、ERC-1155がマルチトークン規格でバッチ機能を含んでいるのに対し、ERC-721はシングルトークン規格であり、一度に1つのトークンしか転送できないという点です。
2) そのNFTスマートコントラクトのミント関数を呼び出してNFTをミントします。_ミント_とは、単に非代替性トークンの一意のインスタンスをブロックチェーン上に公開する行為です。
通常、このミント関数には2つの変数をパラメータとして渡す必要があります。1つ目は受取人で、新しくミントされたNFTを受け取るアドレスを指定します。2つ目はNFTのtokenURIで、NFTのメタデータを記述するJSONドキュメントに解決される文字列です。
NFTのメタデータこそが、名前、説明、画像（または他のデジタルアセット）、その他の属性といったプロパティを持たせ、NFTに命を吹き込むものです。こちらはtokenURIの例で、NFTのメタデータを含んでいます。
このチュートリアルでは、パート2、つまりReact UIを使って既存のNFTスマートコントラクトのミント関数を呼び出すことに焦点を当てます。
このチュートリアルで呼び出すERC-721 NFTスマートコントラクトへのリンクはこちらです。作り方を学びたい場合は、私たちの別のチュートリアル「NFTの作り方」をチェックすることを強くおすすめします。
よし、これでNFT作成の仕組みが理解できたので、スターターファイルをクローンしましょう！
ステップ1：スターターファイルをクローンする
まず、nft-minter-tutorial githubリポジトリにアクセスして、このプロジェクトのスターターファイルを取得してください。このリポジトリをローカル環境にクローンします。
リポジトリのクローン方法がわからない場合は、Githubのこのガイドをチェックしてください。
クローンしたnft-minter-tutorialリポジトリを開くと、minter-starter-filesとnft-minterという2つのフォルダが含まれていることがわかります。
- minter-starter-filesには、このプロジェクトのスターターファイル（実質的にReact UI）が含まれています。このチュートリアルでは、このディレクトリで作業を進めます。EthereumウォレットとNFTスマートコントラクトに接続することで、このUIに命を吹き込む方法を学びます。
- nft-minterには、完成したチュートリアル全体が含まれており、行き詰まった場合の参照用です。
次に、minter-starter-filesのコピーをお好みのコードエディタ（AlchemyではVSCodeのファンです）で開き、srcフォルダに移動します：
srcフォルダの中で作業を進めます
これから書くコードはすべてsrcフォルダの下に置かれます。Minter.jsコンポーネントを編集し、プロジェクトにWeb3機能を持たせるための追加のjavascriptファイルを書いていきます。
ステップ2：スターターファイルを確認する
コーディングを始める前に、スターターファイルにすでに用意されているものを確認しておくことが重要です。
Reactプロジェクトを実行する
まず、ブラウザでReactプロジェクトを実行してみましょう。Reactの良いところは、一度ブラウザでプロジェクトが実行されていれば、保存した変更がブラウザ上でリアルタイムに更新されることです。
プロジェクトを実行するには、minter-starter-filesフォルダのルートディレクトリに移動し、ターミナルでnpm installを実行してプロジェクトの依存関係をインストールします：
インストールが完了したら、ターミナルでnpm startを実行します：
これを行うと、ブラウザでhttp://localhost:3000/が開き、プロジェクトのフロントエンドが表示されます。3つのフィールドがあるはずです：NFTのアセットへのリンクを入力する場所、NFTの名前を入力する場所、そして説明を入力する場所です。
「Connect Wallet」や「Mint NFT」ボタンをクリックしてみると、動作しないことに気づくでしょう。これはまだ機能をプログラムしていないからです！:)
minter.jsコンポーネント
注： minter-starter-filesフォルダにいることを確認してください。nft-minterフォルダではありません！
エディタでsrcフォルダに戻り、Minter.jsファイルを開きましょう。このファイルの内容をすべて理解することが非常に重要です。これが、これから作業する主要なReactコンポーネントだからです。
このファイルの先頭には、特定のイベント後に更新するステート変数があります。
Reactのステート変数やステートフックを聞いたことがない場合は、こちらのドキュメントをチェックしてください。
それぞれの変数が表すものは次の通りです：
- walletAddress - ユーザーのウォレットアドレスを保存する文字列
- status - UIの下部に表示するメッセージを含む文字列
- name - NFTの名前を保存する文字列
- description - NFTの説明を保存する文字列
- url - NFTのデジタルアセットへのリンクである文字列
ステート変数の後に、3つの未実装の関数、useEffect、connectWalletPressed、onMintPressedがあります。これらの関数がすべてasyncであることに気づくでしょう。それは、その中で非同期API呼び出しを行うからです！名前はそれぞれの機能を表しています：
- useEffect- これはコンポーネントがレンダリングされた後に呼び出されるReactフックです。空の配列**[]**がpropとして渡されているため（3行目参照）、コンポーネントの_最初の_レンダリング時にのみ呼び出されます。ここでは、ウォレットリスナーと、ウォレットがすでに接続されているかどうかをUIに反映させる別のウォレット関数を呼び出します。
- connectWalletPressed - この関数は、ユーザーのMetamaskウォレットをdAppに接続するために呼び出されます。
- onMintPressed - この関数は、ユーザーのNFTをミントするために呼び出されます。
このファイルの終わり近くに、コンポーネントのUIがあります。このコードを注意深く見ると、対応するテキストフィールドの入力が変化したときに、url、name、descriptionのステート変数を更新していることがわかります。
また、mintButtonとwalletButtonというIDを持つボタンがそれぞれクリックされたときに、connectWalletPressedとonMintPressedが呼び出されることもわかります。
最後に、このMinterコンポーネントがどこに追加されているかを確認しましょう。
App.jsファイル（Reactの主要コンポーネントで、他のすべてのコンポーネントのコンテナとして機能する）を見ると、Minterコンポーネントが7行目で挿入されているのがわかります。
このチュートリアルでは、Minter.jsファイルの編集と、srcフォルダ内へのファイルの追加のみを行います。
作業対象の内容が理解できたので、Ethereumウォレットを設定しましょう！
ステップ3：Ethereumウォレットを設定する
ユーザーがスマートコントラクトとやり取りできるようにするには、EthereumウォレットをあなたのdAppに接続する必要があります。
MetaMaskをダウンロードする
このチュートリアルでは、Ethereumアカウントアドレスを管理するためのブラウザ内仮想ウォレットであるMetamaskを使用します。Ethereumのトランザクションの仕組みについて詳しく知りたい場合は、Ethereum財団のこのページをチェックしてください。
Metamaskアカウントはこちらから無料でダウンロード・作成できます。アカウントを作成する際、またはすでにアカウントを持っている場合は、右上で「Ropsten Test Network」に切り替えてください（実際のお金を扱わないようにするためです）。
フォーセットからetherを追加する
NFTをミントする（あるいはEthereumブロックチェーン上で何らかのトランザクションに署名する）には、偽のEthが必要です。Ethを取得するには、Sepoliaフォーセットにアクセスし、Ropstenアカウントアドレスを入力して「Send Ropsten Eth」をクリックしてください。しばらくすると、Metamaskアカウントにethが表示されるはずです！
残高を確認する
残高があるか再確認するために、Alchemyのコンポーザーツールを使ってeth_getBalanceリクエストを行いましょう。これにより、ウォレット内のEthの量が返されます。Metamaskアカウントアドレスを入力し、「Send Request」をクリックすると、次のようなレスポンスが表示されるはずです：
注： この結果はethではなくweiで表示されています。weiはetherの最小単位として使われます。weiからethへの変換は次の通りです：1 eth = 10¹⁸ wei。したがって、0xde0b6b3a7640000を10進数に変換すると1*10¹⁸となり、これは1 ethに等しくなります。
ふう！偽のお金がすべてそこにあります！🤑
ステップ4：MetaMaskをUIに接続する
Metamaskウォレットの設定が完了したので、dAppをそれに接続しましょう！
M-V-Cパラダイムに従いたいため、dAppのロジック、データ、ルールを管理する関数を含む別のファイルを作成し、それらの関数をフロントエンド（Minter.jsコンポーネント）に渡します。
connectWallet関数
そのために、srcディレクトリにutilsという新しいフォルダを作成し、その中にinteract.jsというファイルを追加しましょう。このファイルには、ウォレットとスマートコントラクトのやり取りに関するすべての関数が含まれます。
interact.jsファイルの中に、connectWallet関数を書きます。これを後でMinter.jsコンポーネントにインポートして呼び出します。
interact.jsファイルに、以下を追加してください
このコードが何をしているか分解してみましょう：
まず、この関数はブラウザでwindow.ethereumが有効になっているかをチェックします。
window.ethereumは、Metamaskや他のウォレットプロバイダーによって注入されるグローバルAPIで、ウェブサイトがユーザーのEthereumアカウントをリクエストできるようにします。承認されると、ユーザーが接続しているブロックチェーンからデータを読み取り、ユーザーにメッセージやトランザクションへの署名を提案できます。詳しくはMetamaskのドキュメントをチェックしてください！
window.ethereumが存在_しない_場合、それはMetamaskがインストールされていないことを意味します。この場合、JSONオブジェクトが返され、addressは空の文字列、statusのJSXオブジェクトはユーザーにMetamaskのインストールが必要であることを伝えます。
私たちが書くほとんどの関数は、ステート変数やUIを更新するために使えるJSONオブジェクトを返します。
さて、window.ethereum が_存在する_場合、ここから面白くなってきます。
try/catchループを使って、window.ethereum.request\(\{ method: "eth\_requestAccounts" \}\); を呼び出すことでMetamaskへの接続を試みます。この関数を呼び出すと、ブラウザでMetamaskが開き、ユーザーにウォレットをdAppに接続するよう促されます。
- ユーザーが接続を選択すると、
method: "eth_requestAccounts"は、dAppに接続されたユーザーのすべてのアカウントアドレスを含む配列を返します。全体として、connectWallet関数は、この配列の最初のaddress（9行目参照）と、ユーザーにスマートコントラクトへのメッセージの書き込みを促すstatusメッセージを含むJSONオブジェクトを返します。 - ユーザーが接続を拒否した場合、JSONオブジェクトには返された
addressとして空の文字列と、ユーザーが接続を拒否したことを伝えるstatusメッセージが含まれます。
connectWallet関数をminter.js UIコンポーネントに追加する
connectWallet関数を書いたので、これをMinter.jsコンポーネントに接続しましょう。
まず、Minter.jsファイルの先頭にimport \{ connectWallet \} from "./utils/interact.js"**;**を追加して、この関数をインポートする必要があります。Minter.jsの最初の11行は、これで次のようになるはずです：
次に、connectWalletPressed関数の中で、インポートしたconnectWallet関数を次のように呼び出します：
Minter.jsコンポーネントから機能の大部分がinteract.jsファイルに抽象化されていることに気づきましたか？これはM-V-Cパラダイムに準拠するためです！
connectWalletPressedでは、インポートしたconnectWallet関数への呼び出しをawaitするだけで、そのレスポンスを使って、ステートフックを通じてstatusとwalletAddress変数を更新します。
それでは、両方のファイル（Minter.jsとinteract.js）を保存して、ここまでのUIをテストしてみましょう。
ブラウザでhttp://localhost:3000/ページを開き、ページ右上の「Connect Wallet」ボタンを押してください。
Metamaskがインストールされている場合、ウォレットをdAppに接続するよう促されるはずです。接続の招待を受け入れてください。
ウォレットボタンにアドレスが接続されたことが反映されるはずです！Yasssss 🔥
次に、ページを更新してみてください…これはおかしいですね。すでに接続されているにもかかわらず、ウォレットボタンがMetamaskへの接続を促しています…
でも心配いりません！getCurrentWalletConnectedという関数を実装することで簡単に修正できます。これは、dAppにアドレスがすでに接続されているかをチェックし、それに応じてUIを更新します！
getCurrentWalletConnected関数
interact.jsファイルに、以下のgetCurrentWalletConnected関数を追加してください：
このコードは、先ほど書いたconnectWallet関数と_非常に_似ています。
主な違いは、ユーザーがウォレットを接続するためにMetamaskを開くメソッドeth_requestAccountsを呼び出す代わりに、ここではメソッドeth_accountsを呼び出す点です。これは、dAppに現在接続されているMetamaskアドレスを含む配列を単に返します。
この関数の動作を確認するために、Minter.jsコンポーネントのuseEffect関数の中でこれを呼び出しましょう。
connectWalletのときと同様に、interact.jsファイルからこの関数をMinter.jsファイルにインポートする必要があります：
さて、単純にuseEffect関数の中でこれを呼び出します：
getCurrentWalletConnectedへの呼び出しのレスポンスを使って、walletAddressとstatusステート変数を更新していることに気づいてください。
このコードを追加したら、ブラウザウィンドウを更新してみてください。ボタンには接続済みであることが表示され、接続済みウォレットのアドレスのプレビューが表示されるはずです — 更新後も！😅
addWalletListenerを実装する
dAppのウォレットセットアップの最後のステップは、ウォレットリスナーを実装することです。これにより、ユーザーが切断したりアカウントを切り替えたりしたときなど、ウォレットの状態が変化したときにUIが更新されます。
Minter.jsファイルに、次のようなaddWalletListener関数を追加してください：
ここで何が起きているか簡単に分解してみましょう：
まず、この関数はwindow.ethereumが有効になっているか（つまり、Metamaskがインストールされているか）をチェックします。
- 有効でない場合、単に
statusステート変数を、ユーザーにMetamaskのインストールを促すJSX文字列に設定します。 - 有効な場合、3行目でリスナー
window.ethereum.on("accountsChanged")を設定します。これは、Metamaskウォレットの状態変化をリッスンします。これには、ユーザーがdAppに別のアカウントを接続した場合、アカウントを切り替えた場合、またはアカウントを切断した場合が含まれます。少なくとも1つのアカウントが接続されている場合、walletAddressステート変数は、リスナーによって返されたaccounts配列の最初のアカウントとして更新されます。そうでない場合、walletAddressは空の文字列に設定されます。
最後に、これをuseEffect関数の中で呼び出す必要があります：
そしてこれで完了です！ウォレット機能のプログラミングがすべて完了しました！ウォレットのセットアップが終わったので、次はNFTをミントする方法を見ていきましょう！
ステップ5：NFTメタデータの基礎
このチュートリアルのステップ0で話したNFTメタデータを覚えていますか？これはNFTに命を吹き込み、デジタルアセット、名前、説明、その他の属性といったプロパティを持たせるものです。
このメタデータをJSONオブジェクトとして構成し、それを保存する必要があります。これにより、スマートコントラクトのmintNFT関数を呼び出す際にtokenURIパラメータとして渡すことができます。
「Link to Asset」「Name」「Description」フィールドのテキストが、NFTメタデータのさまざまなプロパティを構成します。このメタデータをJSONオブジェクトとしてフォーマットしますが、このJSONオブジェクトをどこに保存するかにはいくつかの選択肢があります：
- Ethereumブロックチェーン上に保存することもできますが、Ethereumの性質上、これは非常に高価になります（数百ドル以上の話をしています）。❌
- AWSやFirebaseのような中央集権型サーバーに保存することもできますが、それでは私たちの分散化の理念に反してしまいます。❌
- IPFS、つまり分散ファイルシステムでデータを保存・共有するための分散プロトコルおよびピアツーピアネットワークを使うこともできます。このプロトコルは分散型で無料なので、これが最良の選択肢です！✅
メタデータをIPFSに保存するために、便利なIPFS APIおよびツールキットであるPinataを使用します。次のステップで、その具体的な方法を説明します！
ステップ6：Pinataを使ってメタデータをIPFSにピン留めする
Pinataアカウントをお持ちでない場合は、こちらから無料アカウントにサインアップし、メールとアカウントの確認手順を完了してください。
Pinata APIキーを作成する
https://app.pinata.cloud/developers/api-keysページに移動し、上部の「New Key」ボタンを選択し、Adminウィジェットを有効にして、キーに名前を付けます。
その後、API情報が記載されたポップアップが表示されます。これを安全な場所に保管してください。
キーの設定が完了したので、これをプロジェクトに追加して使えるようにしましょう。
.envファイルを作成する
Pinataのキーとシークレットは、環境ファイルに安全に保存できます。プロジェクトディレクトリにdotenvパッケージをインストールしましょう。
ターミナルで新しいタブを開き（ローカルホストを実行しているタブとは別に）、minter-starter-filesフォルダにいることを確認してから、ターミナルで次のコマンドを実行してください：
次に、ターミナルで次のコマンドを実行して、minter-starter-filesのルートディレクトリに**.env**ファイルを作成します：
これにより、.envファイルがvim（テキストエディタ）で開きます。保存するには、キーボードで「esc」+「:」+「q」をこの順番で押してください。
次に、VSCodeで.envファイルに移動し、次のようにPinata APIキーとAPIシークレットを追加します：
ファイルを保存すれば、JSONメタデータをIPFSにアップロードする関数を書く準備が整いました！
pinJSONToIPFSを実装する
幸いなことに、PinataにはJSONデータをIPFSにアップロードするための専用APIがあり、少し修正すれば使える便利なaxiosを使ったJavaScriptの例もあります。
utilsフォルダに、pinata.jsという別のファイルを作成し、.envファイルからPinataのシークレットとキーを次のようにインポートしましょう：
次に、以下の追加コードをpinata.jsファイルに貼り付けてください。心配しないでください、すべての意味を分解して説明します！
では、このコードは正確には何をしているのでしょうか？
まず、ブラウザとnode.js向けのpromiseベースのHTTPクライアントであるaxiosをインポートします。これをPinataへのリクエストに使用します。
次に、非同期関数pinJSONToIPFSがあります。これは入力としてJSONBodyを受け取り、ヘッダーにPinataのapiキーとシークレットを含めて、彼らのpinJSONToIPFS APIへPOSTリクエストを行います。
- このPOSTリクエストが成功すると、この関数は
successブール値をtrueとし、メタデータがピン留めされたpinataUrlを含むJSONオブジェクトを返します。この返されたpinataUrlを、スマートコントラクトのmint関数へのtokenURI入力として使用します。 - このPOSTリクエストが失敗すると、この関数は
successブール値をfalseとし、エラーを伝えるmessage文字列を含むJSONオブジェクトを返します。
connectWallet関数の戻り値の型と同様に、ステート変数やUIを更新するために使えるJSONオブジェクトを返しています。
ステップ7：スマートコントラクトを読み込む
pinJSONToIPFS関数によってNFTメタデータをIPFSにアップロードする方法ができたので、次に、mintNFT関数を呼び出せるようにスマートコントラクトのインスタンスを読み込む方法が必要です。
前述の通り、このチュートリアルではこの既存のNFTスマートコントラクトを使用しますが、作り方を学びたい、または自分で作ってみたい場合は、私たちの別のチュートリアル「NFTの作り方」をチェックすることを強くおすすめします。
コントラクトABI
ファイルを注意深く確認していれば、srcディレクトリにcontract-abi.jsonファイルがあることに気づいたでしょう。ABIは、コントラクトがどの関数を呼び出すかを指定するため、また関数が期待される形式でデータを返すことを保証するために必要です。
また、Ethereumブロックチェーンに接続してスマートコントラクトを読み込むために、Alchemy APIキーとAlchemy Web3 APIも必要になります。
Alchemy APIキーを作成する
まだAlchemyアカウントをお持ちでない場合は、こちらで無料サインアップしてください。
Alchemyアカウントを作成したら、アプリを作成することでAPIキーを生成できます。これにより、Ropstenテストネットワークにリクエストを行えるようになります。
Alchemyダッシュボードのナビゲーションバーで「Apps」にホバーして「Create App」をクリックし、「Create App」ページに移動します
アプリに名前を付け（私たちは「My First NFT!」を選びました）、短い説明を入力し、Environmentには「Staging」（アプリの管理用）を選択し、ネットワークには「Ropsten」を選んでください。
「Create app」をクリックすれば完了です！アプリが下の表に表示されるはずです。
素晴らしい、HTTP Alchemy API URLを作成できたので、これをクリップボードにコピーしましょう…
…そしてこれを**.env**ファイルに追加しましょう。全体として、.envファイルは次のようになるはずです：
コントラクトABIとAlchemy APIキーが揃ったので、Alchemy Web3を使ってスマートコントラクトを読み込む準備が整いました。
Alchemy Web3エンドポイントとコントラクトを設定する
まず、まだインストールしていない場合は、ターミナルでホームディレクトリnft-minter-tutorialに移動してAlchemy Web3をインストールする必要があります：
次に、interact.jsファイルに戻りましょう。ファイルの先頭に、以下のコードを追加して.envファイルからAlchemyキーをインポートし、Alchemy Web3エンドポイントを設定します：
Alchemy Web3はWeb3.jsのラッパーで、拡張されたAPIメソッドや、web3開発者としての作業をより楽にするための他の重要な利点を提供します。最小限の設定で済むよう設計されているので、すぐにアプリで使い始めることができます！
次に、コントラクトABIとコントラクトアドレスをファイルに追加しましょう。
両方が揃ったら、mint関数のコーディングを始める準備が整いました！
ステップ8：mintNFT関数を実装する
interact.jsファイルの中で、関数mintNFTを定義しましょう。この名前の通り、NFTをミントします。
多数の非同期呼び出し（メタデータをIPFSにピン留めするためのPinata、スマートコントラクトを読み込むためのAlchemy Web3、トランザクションに署名するためのMetamaskへの呼び出し）を行うため、この関数も非同期になります。
この関数への3つの入力は、デジタルアセットのurl、name、descriptionです。connectWallet関数の下に、以下の関数シグネチャを追加してください：
入力エラーハンドリング
当然ながら、関数の開始時に何らかの入力エラーハンドリングを行い、入力パラメータが正しくない場合はこの関数を終了するのが理にかなっています。関数の中に、以下のコードを追加しましょう：
基本的に、入力パラメータのいずれかが空の文字列であれば、successブール値がfalseで、status文字列がUI内のすべてのフィールドを入力する必要があることを伝えるJSONオブジェクトを返します。
メタデータをIPFSにアップロードする
メタデータが適切にフォーマットされていることがわかったら、次のステップはそれをJSONオブジェクトに包み、書いたpinJSONToIPFSを通じてIPFSにアップロードすることです！
そのために、まずpinJSONToIPFS関数をinteract.jsファイルにインポートする必要があります。interact.jsの一番上に、以下を追加しましょう：
思い出してください、pinJSONToIPFSはJSONボディを受け取ります。ですから、これを呼び出す前に、url、name、descriptionパラメータをJSONオブジェクトにフォーマットする必要があります。
コードを更新して、metadataというJSONオブジェクトを作成し、このmetadataパラメータを使ってpinJSONToIPFSを呼び出しましょう：
pinJSONToIPFS(metadata)への呼び出しのレスポンスをpinataResponseオブジェクトに保存していることに気づいてください。その後、このオブジェクトをエラーがないか解析します。
エラーがあれば、successブール値がfalseで、status文字列が呼び出しの失敗を伝えるJSONオブジェクトを返します。そうでなければ、pinataResponseからpinataURLを抽出し、tokenURIvariableとして保存します。
さて、ファイルの先頭で初期化したAlchemy Web3 APIを使ってスマートコントラクトを読み込む時です。mintNFT関数の末尾に次のコード行を追加し、window.contractグローバル変数にコントラクトを設定します：
mintNFT関数に追加する最後のものは、Ethereumトランザクションです：
すでにEthereumトランザクションに詳しい方なら、その構造がこれまで見てきたものとかなり似ていることに気づくでしょう。
まず、トランザクションのパラメータを設定します。
toは受取人アドレス（私たちのスマートコントラクト）を指定しますfromはトランザクションの署名者（Metamaskに接続されたユーザーのアドレス：window.ethereum.selectedAddress）を指定します\)dataには、スマートコントラクトのmintNFTメソッドへの呼び出しが含まれており、入力としてtokenURIとユーザーのウォレットアドレスwindow.ethereum.selectedAddressを受け取ります
その後、awaitでwindow.ethereum.requestを呼び出し、Metamaskにトランザクションへの署名を依頼します。このリクエストでは、ethメソッド（eth\_SentTransaction）を指定し、transactionParametersを渡していることに気づいてください。この時点で、Metamaskがブラウザに開き、ユーザーにトランザクションへの署名または拒否を促します。
- トランザクションが成功すると、関数はブール値
successがtrueに設定され、status文字列がトランザクションの詳細についてEtherscanを確認するようユーザーに促すJSONオブジェクトを返します。 - トランザクションが失敗すると、関数は
successブール値がfalseに設定され、status文字列がエラーメッセージを伝えるJSONオブジェクトを返します。
全体として、mintNFT関数は次のようになるはずです：
これは巨大な関数です！さて、あとはmintNFT関数をMinter.jsコンポーネントに接続するだけです…
ステップ9：mintNFTをminter.jsフロントエンドに接続する
Minter.jsファイルを開き、先頭のimport \{ connectWallet \} from "./utils/interact.js"；行を次のように更新してください：
最後に、onMintPressed関数を実装して、インポートしたmintNFT関数へのawait呼び出しを行い、トランザクションが成功したか失敗したかを反映するようstatusステート変数を更新します：
ステップ10：NFTをライブウェブサイトにデプロイする
ユーザーがやり取りできるよう、プロジェクトを本番公開する準備はできましたか？ミンターをライブウェブサイトにデプロイするためのチュートリアルをチェックしてください：
ステップ11：ブロックチェーンの世界に旋風を巻き起こそう 🚀
冗談です、チュートリアルの最後まで到達しました！おさらいすると、NFTミンターを構築することで、次のことを学びました：
- フロントエンドプロジェクトからMetamaskに接続する
- フロントエンドからスマートコントラクトのメソッドを呼び出す
- Metamaskを使ってトランザクションに署名する
おそらく、dAppを通じてミントしたNFTをウォレットで見せびらかしたいと思うでしょう — How to View Your NFT in Your Walletの短いチュートリアルをぜひチェックしてください！
そして、いつものように、何かご質問があれば、Alchemyサポートセンターをご覧ください。このチュートリアルの概念を今後のプロジェクトにどう応用するか、楽しみにしています！🧙♂️
Alchemy Newsletter
リリース情報をいち早く受け取る
ニュースレターに登録する
Alchemyの最新のプロダクト情報とリソースをお届けします
メールアドレスを入力すると、当社のマーケティング情報およびプロダクト最新情報の受信に同意したことになります。Alchemyが受け取った情報をプライバシー通知に従って取り扱うことに同意するものとします。購読はいつでも解除できます。
関連記事
Claude Codeをオンチェーンリサーチエージェントに変える
Alchemy CLIでClaude Codeをオンチェーンリサーチエージェントに変える。適切な質問をすることで、トークンローンチ、デプロイヤーウォレット、管理者キーを追跡できる。
Cortexルーター:あらゆるリクエストに対して最速の健全なノードを選ぶ仕組み
リクエストを近くのリージョンに届けることは最低限の条件にすぎない。次にどのノードが応答するかを選ぶ処理、そここそCortexの仕事だ。
AIエージェント向けブロックチェーンインフラのベスト比較(2026年)
2026年のAIエージェント向けブロックチェーンインフラを比較:エージェントフレームワーク、エージェント対応のRPCおよびデータプロバイダー、それらを繋ぐ標準規格について解説します。