🔗 Day5：React × Ethereum連携！DAppの姿が見えてきた

7月 26, 2025

こんにちは！昨日はローカルブロックチェーン（Ganache）を構築しましたね。今日はそのネットワークと、Reactで作るWebアプリを接続して、Ethereumにリクエストを送る本格的な連携に挑みます！

🎯 今日のゴール

Reactアプリを作成する
Webページからスマートコントラクトを操作する
Metamaskで取引を承認して、メッセージを保存＆取得する

🧱 Step 1：Reactアプリを作ってみよう

まずはReactでプロジェクトを作成します。

bash

npx create-react-app my-dapp
cd my-dapp
npm start

ブラウザに「Welcome to React」の画面が表示されればOK！

🔌 Step 2：必要なライブラリをインストール

スマートコントラクトと接続するために、を使います。

bash

npm install ethers

さらに、スタイル調整用にBootstrapやTailwind CSSを入れてもOK（今回は最小構成に絞ります）。

📄 Step 3：スマートコントラクトの情報を準備

RemixやHardhatでデプロイした「Message.sol」のABIとコントラクトアドレスを取得しておきます。

例：

const contractAddress = "0x1234..."; // デプロイ先のアドレス
const abi = [ ... ]; // Remixでコンパイル後に表示されるABI

※ ABIはJSON形式の関数定義です。ethers.jsはこれをもとに関数呼び出しします。

💬 Step 4：フロントエンドと契約をつなぐ！

App.jsまたはMessageComponent.jsxに以下のようなコードを記述：

jsx

import { useState } from "react";
import { ethers } from "ethers";
import abi from "./abi.json";

const contractAddress = "0x...";

function App() {
  const [input, setInput] = useState("");
  const [message, setMessage] = useState("");

  async function setMessageOnChain() {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, abi, signer);
    const tx = await contract.setMessage(input);
    await tx.wait(); // トランザクション完了を待つ
  }

  async function getMessageFromChain() {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(contractAddress, abi, provider);
    const msg = await contract.getMessage();
    setMessage(msg);
  }

  return (
    <div style={{ padding: "2rem" }}>
      <h2>Ethereum DApp連携テスト</h2>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={setMessageOnChain}>ブロックチェーンに保存</button>
      <button onClick={getMessageFromChain}>メッセージを取得</button>
      <p>取得したメッセージ：{message}</p>
    </div>
  );
}

export default App;

📱 Step 5：Metamask連携＆操作

ブラウザでReactアプリを開き、「ブロックチェーンに保存」をクリック
Metamaskが開いて、トランザクション承認画面が表示
承認後、Ganacheにトランザクションが記録されます！

👉 「メッセージを取得」で、保存された内容が表示されれば成功です🎉

🧠 今日のまとめ

やったこと	内容
✅ Reactプロジェクトの作成	最小構成でDAppの骨組み完成
✅ ethers.jsで契約呼び出し	フロントエンドとブロックチェーンの連携
✅ Metamask操作	実際に送金＆データ保存を体験！

🧭 明日の予告（Day 6）

いよいよUIを磨き上げるタイミング！Day6では、もっと見やすく・使いやすい画面を構築しながら、実用的なDAppに仕上げていきます！

このブログを検索

ブロックチェーンや暗号資産