【ITニュース解説】Connecting to the Ethereum Blockchain
2025年09月27日に「Dev.to」が公開したITニュース「Connecting to the Ethereum Blockchain」について初心者にもわかりやすく解説しています。
ITニュース概要
Ethereumブロックチェーンと接続するJavaScriptライブラリ「Ethers.js」と「MetaMask」の連携ガイド。dAppからMetaMaskを介してブロックチェーンにアクセスする方法を解説する。データ参照にはProviderを、トランザクション署名にはSignerを使い、ローカルサーバーで動作させる必要がある。
ITニュース解説
Ethereumブロックチェーンに接続し、その情報にアクセスしたり、操作したりするための基本的な方法を学ぶことは、分散型アプリケーション（dApp）開発を目指すシステムエンジニアにとって非常に重要だ。ここでは、JavaScriptライブラリであるEthers.jsと、広く利用されているウォレットMetaMaskを使って、どのようにブロックチェーンと連携するかを具体的に解説する。
Ethers.jsは、JavaScriptを使ってEthereumブロックチェーンとやり取りするための基盤となるライブラリだ。これを使うと、複雑なブロックチェーンの内部構造を意識することなく、シンプルなコードでブロックチェーンのデータにアクセスしたり、トランザクションを送信したりできる。ブロックチェーンへの接続方法はいくつかあるが、例えばJSON-RPC、Infura、Alchemyといったサービスを通じて接続する方法や、MetaMaskのようなウォレットを介して接続する方法がある。特にMetaMaskは、ユーザーが自分の資産を管理し、dAppと安全に連携するための入り口となるため、多くのdAppで利用されている。この解説では、Webブラウザ上で動作するアプリケーション（クライアントサイドdApp）がMetaMaskとどのように連携するかに焦点を当てる。
MetaMaskを介した接続は、ユーザーのブラウザにMetaMaskがインストールされていることを前提としている。MetaMaskがブラウザにインストールされると、window.ethereumという特別なJavaScriptオブジェクトがブラウザの実行環境に自動的に注入される。私たちの開発するWebアプリケーションは、このwindow.ethereumオブジェクトを通じて、MetaMaskと対話し、結果的にブロックチェーンと連携することになる。Ethers.jsは、このwindow.ethereumオブジェクトを、より扱いやすいWeb3Providerという形でラップしてくれるため、開発者はMetaMaskとの複雑な通信の詳細を気にすることなく、ブロックチェーン操作に集中できる。
実際にMetaMaskと連携するWebアプリケーションを作るためには、いくつかの準備が必要だ。まず、Webページを構成するHTMLファイルを用意する。MetaMaskはブラウザのコンテキストで動作するため、ローカルファイルとして直接開く（例えばfile:///から始まるパスで開く）だけでは正常に動作しない。そのため、VS CodeのLive Serverのような簡単なHTTPサーバーを使って、Webページを配信する必要がある。これは、Webアプリケーションが通常インターネット上で動作する環境を模倣するためだ。
HTMLファイルの中では、まずEthers.jsライブラリを読み込む。これは、<script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.min.js"></script>のような記述をHTMLの<body>タグ内に含めることで可能になる。この一行で、Ethers.jsの全ての機能がJavaScriptコードから利用できるようになる。
次に、具体的なJavaScriptコードを見てみよう。コードは、ページが読み込まれた後に非同期で実行される関数の中に記述される。
最初に、if (!window.ethereum)という条件文で、MetaMaskがブラウザにインストールされているかどうかを確認する。もしMetaMaskが見つからなければ、エラーメッセージを表示して処理を中断する。これは、アプリケーションがMetaMaskに依存しているため、MetaMaskがないと機能しないことをユーザーに伝えるための重要なステップだ。
MetaMaskが検出されたら、const provider = new ethers.providers.Web3Provider(window.ethereum);という行で、Ethers.jsのWeb3Providerオブジェクトを作成する。このproviderオブジェクトが、私たちのアプリケーションからブロックチェーンの情報を読み取るための主要な窓口となる。
次に、await provider.send("eth_requestAccounts", []);という非同期処理が実行される。このコードは、MetaMaskに対して「このアプリケーションが、あなたのウォレットのアカウント情報にアクセスしたい」という要求を送信する。このとき、MetaMaskはユーザーに対して「このサイトに接続を許可しますか？」というプロンプトを表示し、ユーザーが承認すれば、アプリケーションはユーザーのEthereumアカウントにアクセスできるようになる。このステップは、ユーザーの同意なしに勝手にアカウント情報にアクセスできないようにするためのセキュリティ上の重要な仕組みだ。
ここで、ブロックチェーンとの対話における二つの重要な概念、「Provider（プロバイダ）」と「Signer（サイナー）」を理解する必要がある。
Providerは、ブロックチェーンから情報を「読み取る」役割を担う。例えば、現在のブロック番号を取得したり、特定のアドレスの残高を調べたり、スマートコントラクトの状態を照会したりといった、ブロックチェーンの情報を参照する操作に利用される。これらの操作はブロックチェーンの状態を変更しないため、ガス料金（トランザクション手数料）は発生しない。先ほど作成したproviderオブジェクトがこれにあたる。
一方、Signerは、ブロックチェーンの状態を「変更する」操作、つまりトランザクションの送信やメッセージへの署名など、ユーザーのアカウント固有の操作を行うために必要となる。これらの操作は、ユーザーの秘密鍵を使って署名される必要があり、多くの場合ガス料金が発生する。Signerは、provider.getSigner()というメソッドを呼び出すことで取得できる。Signerは特定のEthereumアカウントと紐付いており、そのアカウントの承認を得て初めて、ブロックチェーンに情報を書き込むような操作が可能になる。
コードの例では、まずproviderを使ってブロックチェーンの情報を読み取る操作を示している。const blockNumber = await provider.getBlockNumber();という行は、ブロックチェーンの現在のブロック番号を取得し、それをコンソールに表示する。これは、ブロックチェーンの状態がリアルタイムでどのように更新されているかを確認する簡単な方法だ。
次に、signerを使ってアカウント固有の情報を取得する例として、const address = await signer.getAddress();という行がある。これは、現在MetaMaskで接続が承認されているアカウントのEthereumアドレスを取得し、コンソールに表示する。このアドレスは、ユーザーがMetaMaskで選択しているアカウントのアドレスと一致するはずだ。
これらのコードを実行するには、先述の通りHTTPサーバーでHTMLファイルを配信し、MetaMaskが有効になっているブラウザでページを開く必要がある。ページを開くとMetaMaskから接続承認のプロンプトが表示されるので、それを承認すると、ブラウザの開発者ツールにあるコンソールに、現在のブロック番号と接続されているアカウントのアドレスが表示されるのを確認できるだろう。
このように、Ethers.jsとMetaMaskを組み合わせることで、WebアプリケーションからEthereumブロックチェーンへの接続を確立し、ブロックチェーンの情報を読み取ったり、ユーザーのアカウントを使って操作を行ったりする基盤を構築できる。これは、分散型アプリケーション開発の最初の、そして最も重要な一歩であり、ここからさまざまな複雑なブロックチェーンアプリケーションへと発展させていくことができる。ブロックチェーンの世界に足を踏み入れる上で、この基本的な接続フローとProvider、Signerの概念は必ず理解しておくべきものだ。