🚀 Day7：Ethereumテストネットへデプロイ！DApp完成の瞬間

 


こんにちは！ いよいよこの7日間チャレンジも最終日。今日は、スマートコントラクトをEthereumのテストネットにデプロイして、Reactアプリから本物のブロックチェーンとつながる体験をしていきます！

🎯 今日のゴール

  • テストネットのセットアップ（Sepolia推奨）

  • スマートコントラクトをデプロイ

  • Reactアプリとテストネットを接続

  • 実際にメッセージを保存・取得してみる

🛠️ Step 1：テストネット（Sepolia）準備

✅ Metamaskに追加

  1. Metamaskを開いて「ネットワークを追加」

  2. 以下の情報を入力：

項目値
ネットワーク名Sepolia
RPC URLhttps://rpc-sepolia.metamask.io または Infura経由のURL
チェーンID11155111
通貨記号ETH

💰 Step 2：テストETHを入手

Sepolia用のFaucet（給水所）から無料ETHを取得します。

👉

  1. Metamaskのウォレットアドレスをコピー

  2. Faucetに貼り付けて「Send me ETH!」をクリック

  3. 数分後、MetamaskにETHが届く

💡 テスト用なので、ガス代などはかかりません！

🧾 Step 3：スマートコントラクトをデプロイ

今回はHardhatまたはRemix IDEを使用します（Remixがおすすめ）。

✅ Remix手順（再掲）：

  1. Message.sol を開く

  2. 左メニューの「Deploy & Run Transactions」へ

  3. 「環境」を Injected Provider - Metamask に変更

  4. アカウントが表示されたら「Deploy」をクリック！

📦 デプロイが完了すると、コントラクトのアドレスが表示されます（Reactで使用）

🌐 Step 4：Reactアプリと接続

✅ 変更点：

  • contractAddress を テストネットにデプロイしたアドレスに更新

  • provider を ethers.providers.Web3Provider(window.ethereum) に設定

  • Metamaskを Sepoliaネットワークに接続

🎯 これだけで、本番さながらの動作が可能に！

🧪 Step 5：DAppを動かしてみる

  • ブラウザでReactアプリを開く

  • メッセージを入力して「ブロックチェーンに保存」

  • Metamaskが取引を要求 → 承認

  • 「メッセージを取得」をクリック → ちゃんと表示される！

✨ 世界に公開されたあなたのDAppが、Ethereumチェーンと対話しています！

📚 今日のまとめ

やったこと内容
✅ テストネットの設定SepoliaとMetamaskを連携
✅ コントラクトの公開Ethereumブロックチェーン上へデプロイ成功
✅ Webアプリ連携UIからブロックチェーンと通信できた！

🏁 7日間チャレンジ完走！

本当にお疲れさまでした！ この1週間であなたは：

  • Ethereumの基本とDApp構造を理解し

  • Solidityでスマートコントラクトを書き

  • Reactとブロックチェーンをつないで

  • 実際にデプロイした自分のアプリを動かしました！

コメント

コメントを投稿

このブログの人気の投稿

💻 Day 4：Ethereumをローカルで動かしてみよう！Ganache入門編

  こんにちは！ Ethereum DApp開発チャレンジもついに折り返し地点。今日はちょっと技術寄りの内容ですが、 本物に近いEthereumネットワークをローカルで立ち上げてしまう という、とても重要なステップです。 使うツールは「Ganache」。簡単に言えば、 あなたのPC上に“自分専用のEthereumネットワーク”を作れる魔法の箱 です。 🧰 Ganacheってなに？ Ganacheは、Truffleが提供する ローカルEthereumブロックチェーンのシミュレーター です。 主な特徴： 自分だけの開発用チェーンを構築できる テスト用ETHが最初から配布されている（無料） スマートコントラクトの動作確認やデバッグに最適 超軽量・GUIありで初心者に優しい！ 🛠️ Step 1：Ganacheをインストールしよう ✅ ダウンロード手順 公式サイトにアクセス： 👉 https://trufflesuite.com/ganache/ OSに合わせたバージョン（Windows/Mac/Linux）を選んでダウンロード インストールして起動 🎉 起動すると、10個のテストアカウントとそれぞれ100 ETHが配布された状態のGUI画面が表示されます！ 🌐 Step 2：ローカルブロックチェーンの確認 Ganacheを起動すると、自動で以下の情報が表示されます： 10個のウォレットアドレス 各ウォレットに残高（100 ETH） ポート番号（通常は 7545 ） RPCサーバー（例： http://127.0.0.1:7545 ） 👉 このRPCアドレスは、ReactアプリやHardhatなどと接続する際に使用します！ 🔌 Step 3：Metamaskと接続してみよう！ Metamaskのネットワーク設定を変更することで、Ganacheと連携できます。 ✅ 追加手順： Metamaskを開いて「ネットワークを追加」を選択 以下を入力： 項目 値 ネットワーク名 Ganache Local RPC URL http://127.0.0.1:7545 チェーンID 1337 （Ganacheのデフォルト） 通貨記号 ETH Ganacheで表示されたウォレットの秘密鍵をインポートすれば、テストETHも使えるように！ ⚗️ Step 4：何がで...
続きを読む

🎨 Day6：DAppの顔を作ろう！ReactでUIをブラッシュアップ

  こんにちは！ 昨日はスマートコントラクトとReactの連携に成功して、DAppのエンジンが完成しました。今日はその デザイン（外観）とユーザー体験 にフォーカスして、アプリとしての完成度を高めていきます。 🎯 今日の目標 フォームやボタンをわかりやすく整える メッセージ表示エリアやエラー通知も追加 DAppらしい雰囲気のUIをReactで実装 🛠️ Step 1：スタイルライブラリ導入（Bootstrap） 初心者でも扱いやすい Bootstrap を導入してみましょう。 bash npm install bootstrap index.js に以下を追加して有効化： js import 'bootstrap/dist/css/bootstrap.min.css'; これで、ボタンやフォームをかっこよく装飾できます！ 💻 Step 2：UIを整理する 昨日のApp.jsを、Bootstrapベースの構成に変更してみます。 🧩 新しいレイアウト例 jsx <div className="container mt-5"> <h2 className="text-center">📝 Ethereum DApp メッセージ送信</h2> <div className="form-group mt-4"> <label htmlFor="messageInput">メッセージ入力</label> <input type="text" className="form-control" id="messageInput" value={input} onChange={e => setInput(e.target.value)} /> </div> <div className="mt-3"> <button className="btn b...
続きを読む