Web3 は間違いなく存続します。ビットコイン、イーサリアム、ソラナ、その他多数のネットワークは急速に成長しており、すべてのアプリもその上に構築されています。

あなたが JavaScript 開発者で、Web3 に足を踏み入れたいと考えている場合、最初のステップは Metamask をインストールすることです。そこから、メタマスクがブラウザに挿入する window.ethereum オブジェクトで利用可能な API メソッドの 1 つを使用できます。

Web3 プロジェクトは通常、ウォレットの接続から始まります。 Web3 では、ウォレットはユーザー アカウントのようなものですが、Gmail、Instagram、TikTok などの集中型サービスのアカウントとは異なり、ウォレットは分散型ネットワーク自体の中核部分です。メタマスクはプロキシとして機能し、ネットワークとの対話やウォレットの作成などの操作を容易にします。ウォレットを作成する方法は他にもありますが、Metamask が最も一般的です。

これを念頭に置いて、ユーザーがウォレットに接続できるようにする Web アプリケーションを構築しましょう。

前提条件

メタマスク拡張機能をブラウザにインストールするか、モバイル デバイスにアプリをダウンロードする必要があります。どちらのオプションも機能します。

ダイアグラム

Web アプリケーションのフローの概要を示す次の図を見てみましょう。

論理

ロジックは単純で、次のステップに分かれています:

• メタマスクがインストールされていない場合: メタマスクをダウンロードするリンクを表示します。

これは簡単です。メタマスクがインストールされると、window.ethereum オブジェクトが挿入されます。このオブジェクトが存在しない場合は、メタマスクがインストールされていないか有効になっていないと考えられます。

• ウォレットが接続されていない場合: ウォレットに接続するためのボタンを表示します。

window.ethereum が利用可能な場合、ユーザーがウォレットをリンクするための「接続」ボタンを表示できます。

• ウォレットが接続されている場合: ウォレットのアドレスを表示します。

window.ethereum が提供する主要なメソッドの 1 つは request です。これは次のようなアカウントをリクエストするために使用できます:

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

これにより、ユーザーにウォレットへのアクセスが求められます。権限を付与すると、メソッドはアカウントの配列を返します。話を簡単にするために、最初のアカウントを取得し、そのアドレスを表示します。

デモ

メタマスクをインストールせずにデモを開くと、次のような内容が表示されるはずです:

メタマスクをインストールすると、[接続] ボタンが表示されるはずです。クリックすると、メタマスクは接続するアカウントを選択するよう求めます。視覚的な例については、次の GIF を確認してください:

最終状態でウォレットのアドレスがどのように表示されるかに注目してください。このデモは非常に単純ですが、すべての Web3 アプリケーションには接続されたウォレットが必要です。 RainbowKit や WAGMI など、Web3 統合を簡素化する優れたライブラリがいくつかあります。ただし、このデモでは、プレーンなメタマスク API メソッドを使用して同じ結果を実現しています。もちろん、ユーザーがアクセスを拒否した場合や複数のアカウントを持っていた場合に何が起こるかなど、私がまだ扱っていない多くのエッジケースがあります。これは、発生する可能性のあるさまざまなシナリオのほんの一例です。

コード

完全なコードは GitHub で見つけることができます。

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

結論

これは非常に基本的なデモであり、コードのほとんどは標準的な React です。実際、Web3 に特に関連する唯一の行は次のとおりです:

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

メタマスクの代替手段があり、これらのウォレットは API と対話するために window.ethereum に似たオブジェクトも挿入します。

前述したライブラリのように、Web3 統合に必要な定型文のほとんどを処理し、ビジネスと UI ロジックに集中できるライブラリをいつでも選択できます。

Web3 はどこにも行きません。おそらく、最終的にはプロジェクトの 1 つに Web3 を組み込む必要があるでしょう。もしかしたら、あなたも暗号通貨愛好家になるかもしれません!もしそうなら、これがあなたの旅の始まりです。

リンク

• デモ
• コードベース