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

web3.jsJavaScript

初級

jdourlens

EthereumDev(opens in a new tab)

2020年4月11日

5 分の読書

著者にチップを渡す 0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE

このチュートリアルでは、イーサリアム・ブロックチェーンでのやりとりで使用するために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>
2

バックエンドで使用するライブラリをインストールしたい場合や、ビルドが必要なフロントエンドのプロジェクトの場合は、 次のように npm を使用してインストールします。

npm install web3 --save

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

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

プロジェクトにライブラリを追加したので、初期化する必要があります。 プロジェクトは、ブロックチェーンと通信できなければなりません。 イーサリアムのほとんどのライブラリは、リモートプロシージャーコール（RPC）を使ってノードと通信します。 Web3 プロバイダを開始するには、プロバイダの URL をコンストラクタとして橋渡しする Web3 のインスタンスを生成します。 お使いのコンピュータで、ノードあるいはGanache インスタンス(opens in a new tab)を実行中の場合は、以下のようになります：

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

ホストされたノードに直接アクセスしたい場合は、Infura や、Cloudflare(opens in a new tab)が提供する無料サービスを利用できます。

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

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})
7
 コピー

このプログラムを実行すると、最新のブロック番号（ブロックチェーンの最上部） が表示されます。 また、await/asyncの関数呼び出しを使用することで、コードにおける入れ子状の呼び出しを回避することができます。

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

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}
11
すべて表示
 コピー

web3.js の代替として Ethers.js なども存在しますが、web3.js はブラウザからイーサリアムとやりとりする際の公式ライブラリですので、JavaScript に関するチュートリアルはすべて web3.js を使用します。 次のチュートリアルでは、ブロックチェーンに新たに追加されたブロックを簡単にリッスンし、その内容を確認する方法(opens in a new tab)を紹介します。