🎨 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 btn-primary me-2" onClick={setMessageOnChain}>
      ブロックチェーンに保存
    </button>
    <button className="btn btn-secondary" onClick={getMessageFromChain}>
      メッセージを取得
    </button>
  </div>

  <div className="alert alert-info mt-4">
    取得したメッセージ：<strong>{message}</strong>
  </div>
</div>

💡 className="me-2" は Bootstrap 5の「margin-end」で、ボタン間のスペースを調整！

🚨 Step 3：エラーハンドリング追加

Metamask未接続やトランザクション失敗時に、ユーザーへメッセージを表示します。

jsx

try {
  const tx = await contract.setMessage(input);
  await tx.wait();
} catch (error) {
  alert("エラーが発生しました：" + error.message);
}

🎯 これで初心者ユーザーも安心して操作できるDAppになります。

🖼️ Step 4：アイコンやロゴも追加しよう（任意）

以下のようなアイコンを使うとDAppっぽさUP：

• Metamaskアイコン（ウォレット接続ボタンを追加）

• Ethereumロゴ

• チェーンID表示（開発者向け）

📚 今日のまとめ

やったこと	内容
✅ Bootstrap導入	UIが一気に見やすくなった
✅ 入力フォームと表示領域の整備	ユーザー操作がスムーズに
✅ エラー処理追加	実用アプリらしい安心設計

🔮 明日（Day 7）の予告

ついに最終日！Day7では、このアプリをEthereumのテストネット（例：Sepolia）に実際にデプロイして、リアルなDAppとして公開・稼働させます。Metamaskと本番に近い環境での体験にチャレンジ！