見出し画像

特定のNFTアカウントのNFT所持数を取得する方法を解説第一章

H.T

はじめに

この記事はウォレットが保有する特定のNFTアカウントのNFT所持数の一覧を取得する方法を二章に分けて徹底解説します。NFT・ブロックチェーン・JavaScriptをあまり知らない初心者でも理解できるようにわかりやすく丁寧に説明していきます。

参考サイトと開発環境

PCスペック
MacBook Pro Apple M1
フレームワーク
Next.js（react）
※reactはJavaScriptで作られたweb上にUIを作成するためのフレームワークです。
ライブラリ
react
web3.js

ゴール

今回はある特定のNFTアカウントのNFT所持数を取得するプログラムを作成します。具体的にはウェブサイト内でmetamaskとウォレット接続を行い、そのウォレットがCryptoNinjaPartnersというNFTアカウントのNFTをいくつ所持しているかをコンソールで表示する機能を実現していきます。

対象読者

NFTやMetamaskの認証方法についてイメージを持ちたい方
NFT認証付きウェブサイトを構築してみたい方
web3の一部を除きたい方

注意

本記事は ERC721 のみを対象にしており、ERC1155 は対象にしておりません。
またこの記事はNFT所持数を取得するためにコードが作成されています。より詳細なNFT情報は#02以降で解説予定です。（まだ未定）

記事を読む姿勢

この記事は二章編成ですが少し長尺な内容になっています。しかし理解できないところがないように、丁寧に解説しています。コードをコピぺすれば実装できるかもしれませんが、一つ一つ内容を理解して読み進めるようにしましょう。休憩をとりながらプログラミング学習を進めてください。

本題（第一章）

それでは実際にコードを見ながら実装をしていきましょう。
Next.jsの環境構築ができていない方は以下の記事で環境構築をしてください。↓

公式Documenで環境構築をしよう！
Comming soon !!

第一章

Step 1　ファイルの整理と作成

まずはNext.jsの中に必要なファイルを作成します。
next.jsアプリを作成した時に作成されたディレクトリの直下にcomponentsフォルダを作成します。以下の写真のようになっていればOKです。

app/components

これ以降はファイルの階層構造をapp/componentsというふうに表現していきます。

次にpages/index.js内を以下のコードに置き換えてください。すでに記述されているコードは必要ないので削除しても構いません。

// pages/index.js
export default function Home() {
  return <h1>Hello Next.js</h1>;
}

ここで一度ターミナルでnpmを起動してみましょう。next.jsのアプリがある階層までcdコマンドで移動し以下のコードを実行しましょう。

次にcomponentsフォルダ内にmetamaskConnection.jsという名前のJavaScriptファイルを作成します。

npm run dev

http://localhost:3000/にアクセスして以下の写真のように表示されていることを確認してください。

Step２　コンポーネントの作成・インポート

components/内にmetamaskConnection.jsという名前のJavaScriptファイルを作成し、その中に以下のコードを挿入します。

// components/metamaskConnection.js
export default function MetamaskConnection() {
  return <>This is Metamask Connection Page</>;
}

次にpages/index.js内の一行目に

import MetamaskConnection from "../components/metamaskConnection";

を挿入し、<h1>Hello Next.js</h1>を<MetamaskConnection />に置き換えてください。
そして再びhttp://localhost:3000/にアクセスし、以下の写真のようになっていることを確認してください。

これでcomponents/metamaskConnectionで作成したMetamaskConnectionコンポーネントがpages/index.jsで呼び出すことができました。このようなコンポーネントを活用した開発ができるのがreactの便利な部分です。

Step３　web3をインストールしてMetaMaskと連携する

このステップでは難易度が一気に上がります。一度チョコレートで糖分を摂取してから読み進めてください。

まずはMetaMaskの公式Documentを一緒に読み進めていきましょう。
以下のリンクをクリックして別タグにDocumentを表示します。
MetaMask公式Document

読み進める部分を解説していきますので翻訳はせずに英語のままにしておきましょう。まず目に飛び込むのは「Detect MetaMask」という文字ですね。これは直訳すると「MetaMaskを見抜く」一体どういうことでしょうか。

そのすぐ下にはこのように書かれています。
The presence of the MetaMask Ethereum provider object, window.ethereum, in a user's browser indicates an Ethereum user.
ブラウザ上のEthereumのMetaMaskプロバイダーはwindow.ethereumによって確認することができる。と書かれています。試しにhttp://localhost:3000/でDeveloper consoleのコンソールで window.ethereumと打ち込んでみましょう。

何かオブジェクトが送信されています。これはwindow.ethereumを実行するとMetaMaskプロバイダを呼び出すことができるということです。ここでいうプロバイダとはMetaMask内のサービスや情報を提供してくれるものという認識で大丈夫です。

window.ethereumを確認できたら、実際にアカウント接続をしていきましょう。アカウント接続はMetaMaskのDocumentの以下のページを確認します。

Access a user's accounts

色々と書かれていますが、最後の文章にeth_requestAccountsを使用することでアクセスすることができると記載されています。具体的な使用方法は以下の通りです。


では次にWeb3.jsを利用してウェブサイト内のMetaMaskアカウントのアドレスを呼び出していきましょう。MetaMaskのDocument内にもアカウントの取得情報は記載されていますが今回は汎用性の高いWeb3.jsから取得を目指します。

await window.ethereum.request({ method: 'eth_requestAccounts' })

コードの挿入は後で行いますが動作が気になる方はMetaMaskをインストールしていることを確認してDeveloper Consoleで確認してみてください。

それでは次にWeb3.jsの公式Documentを以下のリンクから確認しましょう。
Web3.js公式Docuent

公式Documentは大体の場合、Getting Startedから読み進めれば間違いないのでまずはそのページを探すようにしましょう。

Getting Startedの下にはThe web3.js library is a collection of modules that contain functionality for the ethereum ecosystem.と記載されており、イーサリアムのエコシステムの機能が集まったものがweb3.jsですと示されています。なんとなくWeb3.jsを使えばイーサリアムと接続して色々な機能を試すことができそうな予感がしますね。

その下に3パターンのインストール方法が記載されています。今回はnpm install web3でインストールをしましょう。これまでと同様にコンソール画面で実行してください。package.jsonにweb3の文字が記載されていればインストールはうまく行っています。
その下には以下の写真のように記載されています。

この文章はweb3インスタンスの生成方法が説明されています。web3インスタンスはWeb3のインストールをした後、プロバイダーを使ってを生成することができます。生成方法は

const web3 = new Web3(provider);

と書くことで生成できます。

では実際にcomponents/metamaskConnection.jsのMetamaskConnection関数内に以下のコードを記述しましょう。

  const connectWallet = async () => {
    if (window.ethereum) {
      try {
　　　　　　　　　　　　　　　　await window.ethereum.request({ method: 'eth_requestAccounts' })
        const web3 = new Web3(window.ethereum);
        const accounts = await web3.eth.getAccounts();
        console.log(accounts);
      } catch (error) {
        console.error('Error connecting to Metamask:', error);
      }
    } else {
      alert('Please install Metamask to use this feature.');
    }
  };

※今回はreactの解説ではないので非同期処理やtry-catch文の詳しい説明は省略します。
このコードはMetaMaskの接続、アカウント取得をconnectWallet関数として定義しています。window.ethereumを呼び出すとオブジェクトが返ってくるかundifinedが返却されます。JavaScriptではオブジェクトなどの何かしらの情報はほとんどTrueとして、undifinedの場合はFalseとして扱われます。つまり、このコードではif文でwindow.ethereumを条件とすることでMetaMaskプロバイダーが検出されるとTrueにされないとMetaMaskをinstallしてくださいとアラートを出すことができます。

もう少し細かく見ていきましょう。if文の条件が真の場合はtry-catch文に入ります。try-catchもif文と似ていて、try文のなかのコードにエラーがあるとその時点でcatch文に入る仕様になっています。try文の中身を見ていきましょう。

await window.ethereum.request({ method: 'eth_requestAccounts' })
const web3 = new Web3(window.ethereum);
const accounts = await web3.eth.getAccounts();
console.log(accounts); // accountsをconsoleで確認

一行目でサイトとMetaMaskの接続を行っています。
二行目では先ほどWeb3.js公式Docuentで確認したweb3インスタンスの生成を行っています。作成したweb3インスタンス内には沢山の情報が格納されていますが「.（ドット）」で繋げることで深層部の関数を呼び出すことができます。三行目ではgetAccount()という関数を呼び出しています。
公式Docuentで確認してみましょう。以下のリンクを押すと説明している箇所に飛びます。

getAccount()

web3.eth.getAccount()で接続されているアカウントのリストを表示することができます。実際にコードを動かしてみたいのですが、このままではUIが作成されていません。
connectWallet関数を実行するためのボタンをJSX（JavaScript内でHTMLを書く手法）を使って作成していきます。

reactではreturn文の後にJSXを記述します。以下のコードをcomponents/metamaskConnection.jsの<>This is Metamask Connection Page</>と置き換えてください。

    <div>
      <button onClick={connectWallet}>Connect Wallet</button>
    </div>

JSXでbuttonタグを作成し、onClickメソッドでconnectWallet関数を呼び出しています。onClickメソッドを使うとクリックされた時に定義した関数を呼び出すことができます。
コードを作成できたら、npm run devでコードを実行しConnect Walletと表示されたボタンが作成されていることを確認してください。

それではDeveloper Consoleを立ち上げ、コンソール画面を開きボタンを押して見ましょう。

ボタンを押すと無事にアカウントアドレスを呼び出すことができました。
少しコードを付け加えてこのセクションを終えたいと思います。取得した配列にはいくつかの情報が格納されていますが、私たちが欲しい情報はアドレスのみです。そこで以下のコードをconsole.logの上に差し込み、console.logの中身をaccountに変更しましょう。

const account = accounts[0];
console.log(account);

ページをリロードもしくはnpm run devをしなおしてボタンを押して見てください。

今度はアドレスだけが取得できていることができました。

第一章のまとめ

今回はサイトをMetaMaskと接続し、Web3.jsを使用してアカウント情報を取得することができました。次回は取得したアカウント情報から特定のNFTアカウントのNFT所持数を取得する機能の実装をしていきます。


第二章へは以下の写真から飛ぶことができます。

第二章NFT会員サイト

この記事が気に入ったらサポートをしてみませんか？