JavaScriptでイーサリアムブロックチェーンを使用するためにweb3.jsをセットアップする

このチュートリアルでは、web3.js (opens in a new tab)を使ってイーサリアムブロックチェーンと対話する方法を解説します。 Web3.jsは、フロントエンドとバックエンドの両方において、ブロックチェーンからデータを読み取ったり、トランザクションを行ったり、スマートコントラクトをデプロイするために使用できます。

最初のステップは、プロジェクトにweb3.jsを組み込むことです。 Webページで使用するには、JSDeliverのようなCDNを使用してライブラリを直接インポートします。

1<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

バックエンドやビルドを要するフロントエンドプロジェクトで使うためにライブラリをインストールする場合は、npmを使ってインストールできます：

npm install web3 --save

次に、Node.jsのスクリプトやBrowserifyのフロントエンドプロジェクトにWeb3.jsをインポートするには、以下のJavaScriptの行を使用します：

1const Web3 = require("web3")
コピー

プロジェクトにライブラリを組み込んだので、次に初期化が必要です。 プロジェクトは、ブロックチェーンと通信できる必要があります。 ほとんどのイーサリアムライブラリは、RPCコールを介してノードと通信します。 Web3プロバイダーを初期化するには、プロバイダーのURLをコンストラクタに渡してWeb3インスタンスを生成します。 お使いのコンピュータでノードまたはganacheインスタンスを実行 (opens in a new tab)している場合は、次のようになります：

1const web3 = new Web3("http://localhost:8545")
コピー

ホストされているノードに直接アクセスしたい場合は、サービスとしてのノードでオプションを見つけることができます。

1const web3 = new Web3("https://cloudflare-eth.com")
コピー

Web3インスタンスが正しく設定されたかテストするために、getBlockNumber関数を使って最新のブロック番号を取得してみましょう。 この関数は、コールバックをパラメータとして受け取り、ブロック番号を整数として返します。

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
コピー

このプログラムを実行すると、最新のブロック番号、つまりブロックチェーンの最上部が、シンプルに表示されます。 また、await/async関数呼び出しを使うと、コード内でのコールバックのネストを避けることができます：

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
コピー

Web3インスタンスで利用可能なすべての関数は、web3.jsの公式ドキュメント (opens in a new tab)で確認できます。

ほとんどのWeb3ライブラリは非同期です。これは、バックグラウンドでライブラリがノードにJSON-RPCコールを行い、ノードが結果を返すためです。

ブラウザで作業している場合、一部のウォレットはWeb3インスタンスを直接インジェクトします。特にユーザーのイーサリアムアドレスとやり取りしてトランザクションを行う予定がある場合は、可能な限りそのインスタンスを使用するようにしてください。

これは、MetaMaskウォレットが利用可能かどうかを検出し、利用可能であれば有効化を試みるスニペットです。 これにより、後でユーザーの残高を読み取ったり、イーサリアムブロックチェーン上で実行させたいトランザクションをユーザーが検証できるようになります：

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // 必要に応じてアカウントへのアクセスを要求
5    await window.ethereum.enable()
6    // アカウントが公開されました
7  } catch (error) {
8    // ユーザーがアカウントアクセスを拒否しました...
9  }
10}
すべて表示
コピー

Ethers.js (opens in a new tab)のようなweb3.jsの代替ライブラリも存在し、同様に広く使われています。 次のチュートリアルでは、ブロックチェーン上で新たに着信するブロックを簡単にリッスンし、その内容を確認する方法 (opens in a new tab)を見ていきます。

最終更新： 2025年8月21日

c (opens in a new tab)

p (opens in a new tab)

n (opens in a new tab)

+9

貢献者を表示