イーサリアムブロックチェーン上で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インスタンスを直接注入します。トランザクションを行うためにユーザーのイーサリアムアドレスとやり取りを行う予定がある場合は特に、可能な限りawait/async関数呼び出しを使用するようにしてください。

以下のコードスニペットは、MetaMaskウォレットが利用可能か確認し、利用できる場合は有効化するものです。 その後、あなたはユーザーの残高を確認できるようになり、各ユーザーは、あなたが彼らにイーサリアムブロックチェーン上で実行させたいトランザクションを各自で検証できるようになります：

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Request account access if needed
5    await window.ethereum.enable()
6    // Accounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
すべて表示
 コピー

他にもEthers.js(opens in a new tab) など、 web3.js のようにイーサリアム・ブロックチェーンとやりとりするライブラリがあります。 次のチュートリアルでは、ブロックチェーンに新たに追加されたブロックを簡単にリッスンし、その内容を確認する方法(opens in a new tab)を紹介します。