[Solidityのはじめ方] Part25: web3.js や ethers.js の基本操作

スマートコントラクトをデプロイしたら、次はそのコントラクトと対話するアプリケーション（DApp: Decentralized Application）を構築します。WebベースのDAppでは、フロントエンド（ユーザーが見る画面）からEthereumネットワーク上のスマートコントラクトを操作するために、JavaScriptライブラリが不可欠です。今回は、その代表的なライブラリである web3.js と ethers.js の基本的な使い方を学びましょう！ 🤝

web3.js は、Ethereumエコシステムで最も古くから使われているライブラリの一つです。Ethereumノードと通信するための豊富な機能を提供します。

1. インストール

まず、プロジェクトに web3.js をインストールします。

npm install web3

または

yarn add web3

2. 初期化とプロバイダ設定

web3.js を使用するには、Ethereumネットワークへの接続点となる「プロバイダ」を設定する必要があります。ブラウザ環境では MetaMask が提供するプロバイダ (`window.ethereum`) を使うのが一般的です。Node.js環境などでは、Infura のようなノードプロバイダサービスのエンドポイントURLを指定します。

// ブラウザ環境 (MetaMaskなど)
import Web3 from 'web3';

let web3;

if (window.ethereum) {
  web3 = new Web3(window.ethereum);
  try {
    // アカウントへのアクセスを要求
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  } catch (error) {
    console.error("User denied account access");
  }
} else if (window.web3) { // 古い DApp ブラウザの場合
  web3 = new Web3(window.web3.currentProvider);
} else {
  // MetaMaskなどがインストールされていない場合のフォールバック
  const provider = new Web3.providers.HttpProvider('YOUR_INFURA_ENDPOINT'); // 例: InfuraのURL
  web3 = new Web3(provider);
  console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
}

// Node.js 環境の例
// const Web3 = require('web3'); // CommonJSの場合
// const web3 = new Web3('YOUR_INFURA_ENDPOINT');

3. 基本的な操作例

アカウント取得

async function getAccounts() {
  try {
    const accounts = await web3.eth.getAccounts();
    console.log('Accounts:', accounts);
    return accounts;
  } catch (error) {
    console.error('Error fetching accounts:', error);
  }
}

getAccounts();

ネットワークID取得

async function getNetworkId() {
  try {
    const networkId = await web3.eth.net.getId();
    console.log('Network ID:', networkId);
    return networkId;
  } catch (error) {
    console.error('Error fetching network ID:', error);
  }
}

getNetworkId();

スマートコントラクトの操作

コントラクトを操作するには、コントラクトのABI（Application Binary Interface）とデプロイされたアドレスが必要です。ABIはコンパイル時に生成されるJSONファイルで、コントラクトの関数やイベントの定義情報が含まれています。

// 例: シンプルなカウンターコントラクト
const contractABI = [ /* ... コントラクトのABIをここに貼り付け ... */ ];
const contractAddress = 'YOUR_CONTRACT_ADDRESS'; // デプロイしたコントラクトのアドレス

// コントラクトインスタンスの作成
const contract = new web3.eth.Contract(contractABI, contractAddress);

// --- データの読み取り (call) ---
async function getCount() {
  try {
    // 'getCount' はコントラクト内の view または pure 関数の名前
    const count = await contract.methods.getCount().call();
    console.log('Current count:', count);
    return count;
  } catch (error) {
    console.error('Error calling getCount:', error);
  }
}

// --- データの書き込み (send) ---
async function incrementCount() {
  try {
    const accounts = await web3.eth.getAccounts();
    if (accounts.length === 0) {
        console.error("No accounts found. Make sure MetaMask is connected.");
        return;
    }
    const senderAccount = accounts[0];

    // 'increment' はコントラクト内の状態を変更する関数の名前
    // send() はトランザクションを送信し、ガス代が必要
    const receipt = await contract.methods.increment().send({ from: senderAccount });
    console.log('Transaction receipt:', receipt);
    // トランザクション成功後、再度カウントを取得して確認
    await getCount();
  } catch (error) {
    console.error('Error sending increment transaction:', error);
  }
}

// 実行例
getCount();
// incrementCount(); // 実行するとMetaMaskが起動し、トランザクションの承認を求められます

ethers.js は、web3.js と同様の目的を持つライブラリですが、よりモダンで軽量、そしてシンプルで一貫性のあるAPIを提供することを目指しています。ENS（Ethereum Name Service）のネイティブサポートなども特徴です。近年、多くの新しいプロジェクトで採用されています。 🎉

1. インストール

npm install ethers

または

yarn add ethers

2. 初期化とプロバイダ/サイナー設定

ethers.js では、「プロバイダ(Provider)」と「サイナー(Signer)」という概念が重要です。

• Provider: Ethereumネットワークへの読み取り専用の接続を提供します。アカウントの状態を知る必要はありません。
• Signer: Providerの機能に加え、特定のアカウント（秘密鍵を持つ）としてトランザクションに署名し、送信することができます。

// ブラウザ環境 (MetaMaskなど)
import { ethers } from 'ethers';

let provider;
let signer;

if (window.ethereum) {
  // MetaMask が提供するプロバイダを使用
  provider = new ethers.BrowserProvider(window.ethereum);
  try {
    // アカウントへの接続と署名者の取得
    signer = await provider.getSigner();
    console.log('Signer obtained:', await signer.getAddress());
  } catch (error) {
    console.error("Error getting signer:", error);
  }
} else {
  // MetaMaskなどがインストールされていない場合 (読み取り専用)
  // 例: Infura を使う場合
  provider = new ethers.InfuraProvider('mainnet', 'YOUR_INFURA_API_KEY'); // または JsonRpcProvider
  console.log('Connected to Infura (read-only)');
  // この場合、signer は取得できないため、書き込み操作は不可
}

// Node.js 環境の例 (読み取り専用)
// import { InfuraProvider } from 'ethers'; // ES Modules
// const provider = new InfuraProvider('mainnet', 'YOUR_INFURA_API_KEY');

// Node.js 環境の例 (秘密鍵を使って書き込み可能)
// import { Wallet, JsonRpcProvider } from 'ethers';
// const provider = new JsonRpcProvider('YOUR_RPC_ENDPOINT');
// const privateKey = 'YOUR_PRIVATE_KEY'; // 注意: 秘密鍵の管理には十分気をつけてください
// const wallet = new Wallet(privateKey, provider);
// const signer = wallet;

3. 基本的な操作例

アカウント（署名者のアドレス）取得

async function getSignerAddress() {
  if (!signer) {
    console.error('Signer not available.');
    // 必要に応じて再度接続を試みるか、ユーザーに接続を促す
    // await provider.send("eth_requestAccounts", []); // 再度MetaMaskに接続要求
    // signer = await provider.getSigner();
    return;
  }
  try {
    const address = await signer.getAddress();
    console.log('Signer Address:', address);
    return address;
  } catch (error) {
    console.error('Error getting signer address:', error);
  }
}

getSignerAddress();

ネットワーク情報取得

async function getNetworkInfo() {
  if (!provider) {
    console.error('Provider not available.');
    return;
  }
  try {
    const network = await provider.getNetwork();
    console.log('Network Name:', network.name);
    console.log('Network Chain ID:', network.chainId);
  } catch (error) {
    console.error('Error getting network info:', error);
  }
}

getNetworkInfo();

スマートコントラクトの操作

web3.js と同様に、コントラクトのABIとアドレスが必要です。ethers.js では ethers.Contract クラスを使用します。

// 例: シンプルなカウンターコントラクト
const contractABI = [ /* ... コントラクトのABIをここに貼り付け ... */ ];
const contractAddress = 'YOUR_CONTRACT_ADDRESS';

// 読み取り専用のコントラクトインスタンス (Providerを使用)
const readOnlyContract = new ethers.Contract(contractAddress, contractABI, provider);

// 書き込み可能なコントラクトインスタンス (Signerを使用)
// Signerが取得できている場合のみ作成可能
const writableContract = signer ? new ethers.Contract(contractAddress, contractABI, signer) : null;

// --- データの読み取り ---
async function getCountEthers() {
  try {
    // 'getCount' はコントラクト内の view または pure 関数の名前
    const count = await readOnlyContract.getCount(); // Provider経由で呼び出し
    console.log('Current count (ethers):', Number(count)); // BigIntで返ってくることが多いのでNumber()で変換
    return count;
  } catch (error) {
    console.error('Error calling getCount (ethers):', error);
  }
}

// --- データの書き込み ---
async function incrementCountEthers() {
  if (!writableContract) {
    console.error('Writable contract instance not available. Check if wallet is connected.');
    return;
  }
  try {
    // 'increment' はコントラクト内の状態を変更する関数の名前
    // Signer経由で呼び出すとトランザクションが送信される
    const tx = await writableContract.increment();
    console.log('Transaction sent:', tx.hash);

    // トランザクションがブロックに含まれるのを待つ (任意)
    const receipt = await tx.wait();
    console.log('Transaction confirmed:', receipt);

    // トランザクション成功後、再度カウントを取得して確認
    await getCountEthers();
  } catch (error) {
    console.error('Error sending increment transaction (ethers):', error);
  }
}

// 実行例
getCountEthers();
// if (writableContract) {
//   incrementCountEthers(); // 実行するとMetaMaskが起動し、トランザクションの承認を求められます
// }

どちらのライブラリも Ethereum との対話を実現する強力なツールですが、いくつかの違いがあります。

結論として：

• これから新しいプロジェクトを始める場合、ethers.js はシンプルさ、軽量さ、TypeScriptとの親和性の高さから、有力な選択肢となります。
• 既存のプロジェクトで web3.js が使われている場合や、豊富な情報量を重視する場合は、web3.js も引き続き良い選択です。

どちらのライブラリも基本的な操作（アカウント取得、ネットワーク接続、コントラクト呼び出し）は可能です。まずは両方のドキュメントやサンプルコードを見て、自分に合った方を選んでみましょう！

今回は、フロントエンドとスマートコントラクトを繋ぐための重要なライブラリである web3.js と ethers.js の基本的な使い方を紹介しました。

• プロバイダ/サイナーの設定方法
• アカウントやネットワーク情報の取得
• スマートコントラクトの読み取り (call/読み取り専用) と書き込み (send/Signer経由)

これらの基本をマスターすれば、いよいよ本格的なDApp開発に進むことができます。実際に簡単なDAppを作りながら、これらのライブラリの使い方に慣れていきましょう！🚀

• web3.js 公式ドキュメント
• ethers.js 公式ドキュメント (v6)
• Ethereum開発者ドキュメント – JavaScript API ライブラリ