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 is2// what MetaMask injects as window.ethereum into each page3const provider = new ethers.BrowserProvider(window.ethereum)45// The MetaMask plugin also allows signing transactions to6// 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// or3var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))45// change provider6web3.setProvider("ws://localhost:8546")7// or8web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"))910// Using the IPC provider in node.js11var net = require("net")12var web3 = new Web3("/Users/myuser/Library/Ethereum/geth.ipc", net) // mac os path13// or14var web3 = new Web3(15 new Web3.providers.IpcProvider("/Users/myuser/Library/Ethereum/geth.ipc", net)16) // mac os path17// 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)56// ...or from a private key7walletPrivateKey = new Wallet(walletMnemonic.privateKey)89walletMnemonic.address === walletPrivateKey.address10// true1112// The address as a Promise per the Signer API13walletMnemonic.getAddress()14// { Promise: '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1' }1516// A Wallet address is also available synchronously17walletMnemonic.address18// '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1'1920// The internal cryptographic components21walletMnemonic.privateKey22// '0x1da6847600b0ee25e9ad9a52abbd786dd2502fa4005dd5af9310b7cc7a3b25db'23walletMnemonic.publicKey24// '0x04b9e72dfd423bcf95b3801ac93f4392be5ff22143f9980eb78b3a860c4843bfd04829ae61cdba4b3b1978ac5fc64f5cc2f4350e35a108a9c9a92a81200a60cd64'2526// The wallet mnemonic27walletMnemonic.mnemonic28// {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// }3334// Note: A wallet created with a private key does not35// have a mnemonic (the derivation prevents it)36walletPrivateKey.mnemonic37// null3839// Signing a message40walletMnemonic.signMessage("Hello World")41// { Promise: '0x14280e5885a19f60e536de50097e96e3738c7acae4e9e62d67272d794b8127d31c03d9cd59781d4ee31fb4e1b893bd9b020ec67dfa65cfb51e2bdadbb1de26d91c' }4243tx = {44 to: "0x8ba1f109551bD432803012645Ac136ddd64DBA72",45 value: utils.parseEther("1.0"),46}4748// Signing a transaction49walletMnemonic.signTransaction(tx)50// { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd64dba72880de0b6b3a7640000801ca0918e294306d177ab7bd664f5e141436563854ebe0a3e523b9690b4922bbb52b8a01181612cec9c431c4257a79b8c9f0c980a2c49bb5a0e6ac52949163eeb565dfc' }5152// The connect method returns a new instance of the53// Wallet connected to a provider54wallet = walletMnemonic.connect(provider)5556// Querying the network57wallet.getBalance()58// { Promise: { BigNumber: "42" } }59wallet.getTransactionCount()60// { Promise: 0 }6162// Sending ether63wallet.sendTransaction(tx)すべて表示コピー
全ドキュメントを読む(opens in a new tab)
セットアップ後、以下が可能になります。
- アカウントの作成
- トランザクションの送信
- トランザクションへの署名
- 等々...
スマートコントラクト関数とのやり取り
Javascriptクライアントライブラリを使用すると、コンパイルされたコントラクトのアプリケーションバイナリインタフェース (ABI) を読み取ることによって、アプリからスマートコントラクト関数を呼び出せるようになります。
ABIには基本的に JSON形式でコントラクトの関数が記述されており、それを通常のJavaScriptオブジェクトのように使用することができます。
以下はSolidityのスマートコントラクトです:
1contract Test {2 uint a;3 address d = 0x12345678901234567890123456789012;45 function Test(uint testInt) { a = testInt;}67 event Event(uint indexed b, bytes32 c);89 event Event2(uint indexed b, bytes32 c);1011 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":false19 },{20 "type":"event",21 "name":"Event2",22 "inputs":[{"indexed":true,"name":"b","type":"uint256"},{"indexed":false,"name":"c","type":"bytes32"}],23 "anonymous":false24}]すべて表示コピー
次のことが可能であることを意味します:
- スマートコントラクトにトランザクションを送信し、メソッドを実行
- 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" }45// Often you will need to format the output for the user6// 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を使用してクエリを実行するためのプロトコル
- The Graph(opens in a new tab)
- Graph Explorer(opens in a new tab)
- ドキュメント(opens in a new tab)
- GitHub(opens in a new tab)
- Discord(opens in a new tab)
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を使用してトランザクションを送信する – バックエンドからトランザクションを送信するための段階的ガイド。