開発者向けのメタマスク：DAPPを接続する方法は？

メタマスクとDAPP開発におけるその役割を理解する

Metamaskは、ユーザーがWebブラウザーを介してEthereumブロックチェーンと直接対話できるようにする、広く使用されている暗号通貨ウォレットです。開発者にとって、分散型アプリケーション（DAPP）をテストおよび展開するための重要なツールとして機能します。財布としてだけでなく、 Ethereum JavaScript APIのプロバイダーとしても機能します。これにより、DappsはEthereum Networkと通信できます。

DAPPに構築または接続するとき、メタマスクがプロバイダーをブラウザ環境に挿入する方法を理解することが不可欠です。この挿入プロバイダーは、開発者がweb3.eth.getaccounts（） 、 web3.eth.sendtransaction（）などの機能にアクセスできるようにします。ユーザーの権限を要求し、トランザクションの署名を処理する機能により、メタマスクはブロックチェーンの相互作用を含むフロントエンド開発に不可欠になります。

開発環境を設定します

DAPPをメタマスクに接続する前に、開発スタックがWeb3.jsやEthers.jsなどのJavaScriptベースのEthereumライブラリをサポートしていることを確認してください。これらのライブラリは、メタマスクのEthereumプロバイダーとのインターフェースに一般的に使用されます。

• NPMを使用してWeb3.jsをインストール： npm install web3
• または、基本的なHTML/JSセットアップで動作する場合は、CDNリンクを使用します

ローカル開発サーバーが実行されていることを確認してください。 Vite 、 Webpack Dev Server 、またはVSコードのライブサーバーなどのツールが適切なオプションです。 Metamaskが正しく検出して対話できるように、DAPPはHTTPまたはHTTPSを介して提供する必要があります。

ブラウザでメタマスクを検出します

Metamaskは、ブラウザのグローバルウィンドウオブジェクトにEthereumオブジェクトを注入します。このオブジェクトを検査することで、その存在を確認できます。

 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } else { console.log('Please install MetaMask to use this dApp.'); }

この検出ステップは、サポートされていないブラウザーでメタマスク関数を呼び出そうとするときにエラーを防ぐため、重要です。検出されたら、ユーザーからアカウントアクセスを要求することができます。

メタマスクからアカウントアクセスを要求します

ユーザーのウォレットと対話するには、DAPPが最初にイーサリアムアカウントにアクセスする許可を取得する必要があります。これは通常、ethereum.request（{method： 'eth_requestacounts'}）メソッドを使用して行われます。

 const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); console.log('Connected account:', accounts[0]);

これにより、メタマスクのポップアップがトリガーされ、ユーザーにアカウントへのアクセスを許可するように依頼します。承認されると、DAPPはユーザーのウォレットに関連付けられた一連のパブリックアドレスを受け取ります。拒否された場合、約束は拒否され、UIでこれを優雅に処理する必要があります。

この要求は、ボタンをクリックするなど、ユーザーアクションによってトリガーされる必要があることに注意することが重要です。ブラウザは、セキュリティ上の理由で使用されていないリクエストをブロックします。

web3.jsまたはethers.jsを使用して接続します

メタマスクを検出してアカウントアクセスを取得したら、注入されたプロバイダーを使用してWeb3インスタンスを初期化できます。

 const web3 = new Web3(window.ethereum);

または、 Ethers.jsを使用すると、次のパターンを使用して接続できます。

 const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner();

これらのインスタンスにより、DAPPは契約データの読み取り、トランザクションの送信、イベントのリスニングなどのさまざまなアクションを実行できます。イベントリスナーを追加して、常にチェーンの変更とアカウントの変更を処理してください。

 window.ethereum.on('chainChanged', (chainId) => { window.location.reload(); }); window.ethereum.on（ 'accountschanged'、（accounts）=> { //アカウントの変更を処理します}）;

トランザクションとユーザーインタラクションの処理

接続が確立されると、DAPPはトランザクションを送信できるようになりました。これがweb3.jsを使用してETHを送信する例です。

 const transactionParameters = { to: '0x...', // Recipient address from: accounts[0], // Sender address value: Web3.utils.toHex(Web3.utils.toWei('0.1', 'ether')), };試す { const txhash = await window.ethereum.request（{




method: 'eth_sendTransaction', params: [transactionParameters],
 }）; console.log（ 'トランザクションハッシュ：'、txhash）; } catch（error）{ console.error（ 'トランザクションが失敗した：'、エラー）; }

Ethers.jsを使用すると、プロセスはわずかに異なります。

 const tx = await signer.sendTransaction({ to: '0x...', value: ethers.utils.parseEther('0.1'), }); await tx.wait(); console.log('Transaction mined:', tx.hash);

ロード状態、成功メッセージ、エラー処理など、これらの操作中にユーザーに常にフィードバックを提供します。

よくある質問

Q：メタマスクをモバイルダップに接続できますか？はい、 WalletConnectプロトコルを使用してMetamask Mobileを統合できます。これにより、DAPPはQRコードスキャンまたはディープリンクを介してメタマスクと通信できます。

Q：メタマスクがアカウントアクセスを求めない場合はどうすればよいですか？ボタンクリックなどのユーザージェスチャーによってリクエストが開始されることを確認してください。また、メタマスクがロック解除されており、少なくとも1つのアカウントが作成されていることを確認します。

Q：実際の資金なしでメタマスクでDAPPをテストするにはどうすればよいですか？ Rinkeby 、 Goerli 、またはSepolia Testnetsを使用してください。メタマスク内のネットワークを切り替え、蛇口からテストETHを要求して、実際の相互作用をシミュレートできます。

Q：プログラムでメタマスクから切断することは可能ですか？メタマスクは、プログラムの切断をサポートしていません。ただし、アプリの状態をクリアして、ユーザーに手動で再接続するように促すことができます。