メインコンテンツへスキップ
Change page

JavaScript APIライブラリ

Webアプリがイーサリアムのブロックチェーンと対話する(つまり、ブロックチェーンのデータを読み取ったり、ネットワークにトランザクションを送信したりする)ためには、イーサリアムのノードに接続する必要があります。

この目的のために、すべてのイーサリアムクライアントはJSON-RPC仕様を実装しているため、アプリケーションが依存できる統一されたメソッドのセットが存在します。

JavaScriptを使用してイーサリアムのノードに接続する場合、バニラJavaScriptを使用することも可能ですが、エコシステム内にはこれをはるかに簡単にする便利なライブラリがいくつか存在します。これらのライブラリを使用すると、開発者は直感的な1行のメソッドを記述するだけで、イーサリアムと対話するJSON-RPCリクエストを(内部的に)初期化できます。

マージ以降、ノードを実行するには、実行クライアントとコンセンサス・クライアントという2つの接続されたイーサリアムソフトウェアが必要になることに注意してください。ノードに実行クライアントとコンセンサス・クライアントの両方が含まれていることを確認してください。ノードがローカルマシン上にない場合(例:ノードがAWSインスタンスで実行されている場合)は、チュートリアルのIPアドレスを適宜更新してください。詳細については、ノードの実行に関するページをご覧ください。

前提条件

JavaScriptを理解することに加えて、イーサリアムスタックイーサリアムクライアントについて理解しておくと役立つ場合があります。

なぜライブラリを使用するのか?

これらのライブラリは、イーサリアムのノードと直接対話する際の複雑さの多くを抽象化します。また、ユーティリティ関数(例:ETHからGweiへの変換)も提供するため、開発者はイーサリアムクライアントの複雑な処理に費やす時間を減らし、アプリケーション独自の機能に集中する時間を増やすことができます。

ライブラリの機能

イーサリアムのノードへの接続

プロバイダーを使用することで、これらのライブラリはイーサリアムに接続し、JSON-RPC、Infura、Etherscan、Alchemy、メタマスクのいずれを経由する場合でも、そのデータを読み取ることができます。

警告: Web3.jsは2025年3月4日にアーカイブされました。発表を読む (opens in a new tab)。新しいプロジェクトでは、ethers.js (opens in a new tab)viem (opens in a new tab)などの代替ライブラリの使用を検討してください。

Ethersの例

// BrowserProviderは標準のWeb3プロバイダーをラップします。これは
// メタマスクが各ページにwindow.ethereumとして注入するものです
const provider = new ethers.BrowserProvider(window.ethereum)

// メタマスクのプラグインは、トランザクションに署名して
// イーサを送信し、ブロックチェーン内の状態を変更するための支払いをすることも可能にします。
// このためには、アカウントの署名者(signer)が必要です...
const signer = provider.getSigner()

Web3jsの例

セットアップが完了すると、ブロックチェーンに対して以下のクエリを実行できるようになります。

  • ブロック番号
  • ガスの見積もり
  • スマート・コントラクトのイベント
  • ネットワークID
  • その他...

ウォレット機能

これらのライブラリは、ウォレットの作成、キーの管理、トランザクションの署名を行う機能を提供します。

以下はEthersの例です。

ドキュメント全文を読む (opens in a new tab)

セットアップが完了すると、以下のことができるようになります。

  • アカウントの作成
  • トランザクションの送信
  • トランザクションの署名
  • その他...

スマート・コントラクトの関数との対話

JavaScriptクライアントライブラリを使用すると、コンパイルされたコントラクトのアプリケーション・バイナリ・インターフェース(ABI)を読み取ることで、アプリケーションからスマート・コントラクトの関数を呼び出すことができます。

ABIは基本的にコントラクトの関数をJSON形式で説明するものであり、通常のJavaScriptオブジェクトのように使用できるようにします。

したがって、以下のSolidityコントラクトは:

次のようなJSONになります。

これにより、以下のことが可能になります。

  • スマート・コントラクトにトランザクションを送信し、そのメソッドを実行する
  • EVMで実行された場合にメソッドの実行にかかるガスを見積もるために呼び出す
  • コントラクトをデプロイする
  • その他...

ユーティリティ関数

ユーティリティ関数は、イーサリアムでの構築を少し簡単にする便利なショートカットを提供します。

ETHの値はデフォルトでWei単位です。1 ETH = 1,000,000,000,000,000,000 WEIであり、これは非常に大きな数値を扱うことを意味します!web3.utils.toWeiは、イーサをWeiに変換してくれます。

Ethersでは次のようになります。

// アカウントの残高を取得する(アドレスまたはENS名による)
balance = await provider.getBalance("ethers.eth")
// { BigNumber: "2337132817842795605" }

// 多くの場合、ユーザー向けに出力をフォーマットする必要があります
// ユーザーは(Weiではなく)イーサで値を見ることを好むためです
ethers.utils.formatEther(balance)
// '2.337132817842795605'

利用可能なライブラリ

Web3.js - イーサリアムJavaScript API

Ethers.js - JavaScriptおよびTypeScriptによる完全なイーサリアムウォレットの実装とユーティリティ

The Graph - イーサリアムおよびIPFSのデータをインデックス化し、GraphQLを使用してクエリを実行するためのプロトコル

Alchemy SDK - 強化されたAPIを備えたEthers.jsのラッパー

viem - イーサリアムのためのTypeScriptインターフェース

Codex - 数十のチェーンにわたるリアルタイムで強化されたブロックチェーンデータAPI

Drift - キャッシュ、フック、テストモックが組み込まれたTypeScriptメタライブラリ

参考文献

役に立ったコミュニティリソースをご存知ですか?このページを編集して追加してください!

チュートリアル:イーサリアム上のJavaScript APIとWebSocket

  • WebSocketの使用 – AlchemyでWebSocketを使用してイーサリアムのイベントをサブスクライブし、リアルタイムのJSON-RPCリクエストを行う方法。