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

JavaScript APIライブラリ

最終編集者: @HiroyukiNaito(opens in a new tab), 2024年6月28日

Webアプリはイーサリアムブロックチェーンとやりとりを行うために(例えば、ブロックチェーンデータの読み込みやトランザクションの送信など) 、イーサリアムノードに接続する必要があります。

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

JavaScriptでイーサリアムノードに接続する場合、通常のJavaScriptを使用することは可能です。しかし、エコシステム内には、作業をより簡単にするいくつかの便利なライブラリがあります。 これらのライブラリにより、デベロッパーは直感的な1行のメソッドを作成するだけで、イーサリアムとやり取りするJSON-RPCリクエストを (内部的に) 初期化できるようになります。

マージ以降は、ノードの実行には、実行クライアントとコンセンサスクライアントという2つのつながったイーサリアムソフトウェアが必要になることに注意してください。 必ず、ノードに実行クライアントとコンセンサスクライアントの両方が含まれるようにしてください。 ノードがローカルマシン上にない(ノードがAWSインスタンス上で動作しているなど)場合は、適宜、チュートリアルのIPアドレスをアップデートしてください。 詳細については、ノードの実行ページをご覧ください。

前提知識

JavaScriptを理解している必要があります。また、イーサリアムスタックイーサリアムクライアントについても理解していることが推奨されます。

ライブラリの利点

これらのライブラリにより、イーサリアムノードと直接やり取りする際の複雑さが抽象化されます。 また、ユーティリティ関数 (ETHをGweiに変換する関数など) も提供されています。そのため、デベロッパーは複雑なイーサリアムクライアントの作業に費やす時間を削減でき、自身のアプリケーションの独自機能の開発作業に専念できます。

ライブラリの機能

イーサリアムノードに接続

providersライブラリを使用することで、JSON-RPC、INFURA、Etherscan、AlchemyまたはMetaMaskであっても、イーサリアムに接続してデータを読み取ることができます。

Ethers.jsを使った例

1// A BrowserProvider wraps a standard Web3 provider, which is
2// what MetaMask injects as window.ethereum into each page
3const provider = new ethers.BrowserProvider(window.ethereum)
4
5// The MetaMask plugin also allows signing transactions to
6// send ether and pay to change state within the blockchain.
7// For this, we need the account signer...
8const signer = provider.getSigner()
コピー

Web3.jsを使った例

1var web3 = new Web3("http://localhost:8545")
2// or
3var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
4
5// change provider
6web3.setProvider("ws://localhost:8546")
7// or
8web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"))
9
10// Using the IPC provider in node.js
11var net = require("net")
12var web3 = new Web3("/Users/myuser/Library/Ethereum/geth.ipc", net) // mac os path
13// or
14var web3 = new Web3(
15 new Web3.providers.IpcProvider("/Users/myuser/Library/Ethereum/geth.ipc", net)
16) // mac os path
17// on windows the path is: "\\\\.\\pipe\\geth.ipc"
18// on linux the path is: "/users/myuser/.ethereum/geth.ipc"
すべて表示
コピー

一度セットアップすると、ブロックチェーンへ以下のクエリが可能になります。

  • ブロック番号
  • ガスの推定値
  • スマートコントラクトのイベント
  • ネットワークID
  • その他

ウォレットの機能

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

Ethers.jsを使った例

1// Create a wallet instance from a mnemonic...
2mnemonic =
3 "announce room limb pattern dry unit scale effort smooth jazz weasel alcohol"
4walletMnemonic = Wallet.fromPhrase(mnemonic)
5
6// ...or from a private key
7walletPrivateKey = new Wallet(walletMnemonic.privateKey)
8
9walletMnemonic.address === walletPrivateKey.address
10// true
11
12// The address as a Promise per the Signer API
13walletMnemonic.getAddress()
14// { Promise: '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1' }
15
16// A Wallet address is also available synchronously
17walletMnemonic.address
18// '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1'
19
20// The internal cryptographic components
21walletMnemonic.privateKey
22// '0x1da6847600b0ee25e9ad9a52abbd786dd2502fa4005dd5af9310b7cc7a3b25db'
23walletMnemonic.publicKey
24// '0x04b9e72dfd423bcf95b3801ac93f4392be5ff22143f9980eb78b3a860c4843bfd04829ae61cdba4b3b1978ac5fc64f5cc2f4350e35a108a9c9a92a81200a60cd64'
25
26// The wallet mnemonic
27walletMnemonic.mnemonic
28// {
29// locale: 'en',
30// path: 'm/44\'/60\'/0\'/0/0',
31// phrase: 'announce room limb pattern dry unit scale effort smooth jazz weasel alcohol'
32// }
33
34// Note: A wallet created with a private key does not
35// have a mnemonic (the derivation prevents it)
36walletPrivateKey.mnemonic
37// null
38
39// Signing a message
40walletMnemonic.signMessage("Hello World")
41// { Promise: '0x14280e5885a19f60e536de50097e96e3738c7acae4e9e62d67272d794b8127d31c03d9cd59781d4ee31fb4e1b893bd9b020ec67dfa65cfb51e2bdadbb1de26d91c' }
42
43tx = {
44 to: "0x8ba1f109551bD432803012645Ac136ddd64DBA72",
45 value: utils.parseEther("1.0"),
46}
47
48// Signing a transaction
49walletMnemonic.signTransaction(tx)
50// { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd64dba72880de0b6b3a7640000801ca0918e294306d177ab7bd664f5e141436563854ebe0a3e523b9690b4922bbb52b8a01181612cec9c431c4257a79b8c9f0c980a2c49bb5a0e6ac52949163eeb565dfc' }
51
52// The connect method returns a new instance of the
53// Wallet connected to a provider
54wallet = walletMnemonic.connect(provider)
55
56// Querying the network
57wallet.getBalance()
58// { Promise: { BigNumber: "42" } }
59wallet.getTransactionCount()
60// { Promise: 0 }
61
62// Sending ether
63wallet.sendTransaction(tx)
すべて表示
コピー

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

セットアップ後、以下が可能になります。

  • アカウントの作成
  • トランザクションの送信
  • トランザクションへの署名
  • 等々...

スマートコントラクト関数とのやり取り

Javascriptクライアントライブラリを使用すると、コンパイルされたコントラクトのアプリケーションバイナリインタフェース (ABI) を読み取ることによって、アプリからスマートコントラクト関数を呼び出せるようになります。

ABIには基本的に JSON形式でコントラクトの関数が記述されており、それを通常のJavaScriptオブジェクトのように使用することができます。

以下はSolidityのスマートコントラクトです:

1contract Test {
2 uint a;
3 address d = 0x12345678901234567890123456789012;
4
5 function Test(uint testInt) { a = testInt;}
6
7 event Event(uint indexed b, bytes32 c);
8
9 event Event2(uint indexed b, bytes32 c);
10
11 function foo(uint b, bytes32 c) returns(address) {
12 Event(b, c);
13 return d;
14 }
15}
すべて表示
コピー

上記は次のようなJSONになります:

1[{
2 "type":"constructor",
3 "payable":false,
4 "stateMutability":"nonpayable"
5 "inputs":[{"name":"testInt","type":"uint256"}],
6 },{
7 "type":"function",
8 "name":"foo",
9 "constant":false,
10 "payable":false,
11 "stateMutability":"nonpayable",
12 "inputs":[{"name":"b","type":"uint256"}, {"name":"c","type":"bytes32"}],
13 "outputs":[{"name":"","type":"address"}]
14 },{
15 "type":"event",
16 "name":"Event",
17 "inputs":[{"indexed":true,"name":"b","type":"uint256"}, {"indexed":false,"name":"c","type":"bytes32"}],
18 "anonymous":false
19 },{
20 "type":"event",
21 "name":"Event2",
22 "inputs":[{"indexed":true,"name":"b","type":"uint256"},{"indexed":false,"name":"c","type":"bytes32"}],
23 "anonymous":false
24}]
すべて表示
コピー

次のことが可能であることを意味します:

  • スマートコントラクトにトランザクションを送信し、メソッドを実行
  • EVMでメソッド実行時にかかるガス代を見積もるためにコール
  • コントラクトのデプロイ
  • 等々...

ユーティリティ関数

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

ETHの値は、デフォルトでweiに設定されています。 1 ETHは、1,000,000,000,000,000,000,000,000,000,000,000,000 wei です。つまり、非常に巨大な数値を扱っているということです。 Etherはweb3.utils.toWeiによって、weiに変換されます。

Ethers.jsで記述した場合は次のようになります:

1// Get the balance of an account (by address or ENS name)
2balance = await provider.getBalance("ethers.eth")
3// { BigNumber: "2337132817842795605" }
4
5// Often you will need to format the output for the user
6// which prefer to see values in ether (instead of wei)
7ethers.utils.formatEther(balance)
8// '2.337132817842795605'
コピー

利用可能なライブラリ

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

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

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

light.js - ライトクライアント向けに最適化された高位のリアクティブJSライブラリ

Web3-wrapper - Typescriptで記述された、Web3.jsの代替ライブラリ

Alchemyweb3 - 自動リトライと強化されたAPIを備えた、Web3.jsのラッパー

Alchemy NFT API - 所有権やメタデータ属性などのNFTデータを取得するためのAPI

viem - イーサリアム用のTypeScriptインターフェース。

参考文献

役に立ったコミュニティリソースがあれば、 ぜひこのページに追加してください。

  • ノードとクライアント
  • 開発フレームワーク
  • Javascriptでイーサリアムブロックチェーンを使用するためのWeb3jsのセットアップ – プロジェクトでweb3.jsをセットアップするための手順。
  • JavaScriptからスマートコントラクトを呼び出す – DAIトークンを使って、JavaScriptからスマートコントラクトを呼び出す方法を確認する。
  • Web3とAlchemyを使用してトランザクションを送信する – バックエンドからトランザクションを送信するための段階的ガイド。

この記事は役に立ちましたか?