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

  こんにちは！昨日はローカルブロックチェーン（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：必要なライブラリをインストール スマートコントラクトと接続するために、 ethers.js を使います。 bash npm install ethers さらに、スタイル調整用にBootstrapやTailwind CSSを入れてもOK（今回は最小構成に絞ります）。 📄 Step 3：スマートコントラクトの情報を準備 RemixやHardhatでデプロイした「Message.sol」の ABIとコントラクトアドレス を取得しておきます。 例： js 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, ...

  こんにちは！ 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：何がで...

  ついにコーディング開始！ 今日の目標は、Ethereumで使われる言語「Solidity」で スマートコントラクトを作成・実行 すること。しかも、環境構築不要のブラウザツール「Remix IDE」を使うのでめっちゃ簡単！

  こんにちは！7日間チャレンジ2日目は、Ethereumアプリ開発に向けた 最小構成の開発環境の準備 です。 昨日はブロックチェーンやDAppの概念をざっくり理解しましたが、今日は実際に手を動かせるようにしていきます！ 🖥️ Step 1：Node.js & npmをインストール まずは、Reactやマイニングツールなどでも使用される「Node.js」と「npm（Node Package Manager）」をインストールしましょう。 ✅ インストール方法 Node.js公式サイト にアクセス 推奨バージョン（LTS）をダウンロード インストール後、ターミナルで以下を入力して確認 bash node -v npm -v 🎉 バージョンが表示されれば成功！ 🦊 Step 2：Metamaskウォレットを作成 Ethereumアプリにはウォレットが必要不可欠。今回はChromeの拡張機能で人気の「Metamask」を使います。 ✅ 手順 Metamask公式サイト にアクセス Chromeに拡張機能を追加 新しいウォレットを作成（秘密鍵やリカバリーフレーズは必ず保存！） 💡 便利ポイント テストネット（SepoliaやGoerli）も簡単に切り替え可能 ブラウザとReactアプリとの連携がスムーズ 🖥️ Step 3：VS Code（Visual Studio Code）を導入 コーディングには VS Code がオススメ。軽量で使いやすく、Web3関連の拡張機能も豊富です。 ✅ インストール VS Code公式サイト よりDL 必要な拡張機能（Solidity, Prettierなど）も導入しておくと◎ 🔌 Step 4：テストネット環境の準備（※概要） 今日はインストールまででOK！明日以降使う予定のものを紹介： ツール名 用途 備考 Ganache ローカルEthereum環境 Truffleと連携も可能 Remix IDE SolidityのブラウザIDE Webブラウザだけで使える Hardhat or Truffle スマートコントラクト開発フレームワーク 本格開発に必要 ⏳ これらはDay3以降に触れる予定です。 🔒 まとめ & 明日の予告 ✅ 今日できたことまとめ： Node.jsとnpmで開発基盤を構築 Metam...

  Ethereumのアプリって難しそう？そんな不安は今日で解消！この記事では、完全初心者が7日間でDApp（分散型アプリ）を作って動かすまでの道のりを紹介します。専門知識は不要。必要なのは、ちょっとした好奇心だけ！ 🗓️ Day 1：ブロックチェーンとは何かを理解しよう！ 内容： Ethereumとは？DAppとは？ スマートコントラクトの概要 Web2とWeb3の違い アクション： Ethereum公式ドキュメントをざっくり眺める ブログやYouTubeで「スマートコントラクト」の基本を調査 🗓️ Day 2：開発環境を整える 内容： Node.jsとnpmのインストール Metamaskウォレットの作成 コーディング環境（VS Code）を準備 アクション： bash # Node.jsの確認 node -v npm -v ChromeにMetamaskをインストール＆テストネットのアカウント作成 🗓️ Day 3：スマートコントラクトを作ってみる！ 内容： Solidityという言語の基礎 Remix IDEで簡単なコントラクトを書く サンプルコード： solidity pragma solidity ^0.8.0; contract Message { string public message; function setMessage(string memory newMessage) public { message = newMessage; } function getMessage() public view returns (string memory) { return message; } } アクション： Remix IDEで実行し、「setMessage」と「getMessage」を試す 🗓️ Day 4：ローカルでEthereumを動かす 内容： Ganacheのインストールと設定 ローカルでブロックチェーンをシミュレート アクション： Ganacheを立ち上げてアカウントとネットワークを確認 コントラクトをTruffleまたはHardhatでデプロイ 🗓️ Day 5：Reactアプリとスマートコントラクトをつなげる 内容： create...

  こんにちは！ いよいよこの7日間チャレンジも最終日。今日は、スマートコントラクトを Ethereumのテストネットにデプロイして、Reactアプリから本物のブロックチェーンとつながる体験 をしていきます！ 🎯 今日のゴール テストネットのセットアップ（Sepolia推奨） スマートコントラクトをデプロイ Reactアプリとテストネットを接続 実際にメッセージを保存・取得してみる 🛠️ Step 1：テストネット（Sepolia）準備 ✅ Metamaskに追加 Metamaskを開いて「ネットワークを追加」 以下の情報を入力： 項目 値 ネットワーク名 Sepolia RPC URL https://rpc-sepolia.metamask.io または Infura経由のURL チェーンID 11155111 通貨記号 ETH 💰 Step 2：テストETHを入手 Sepolia用のFaucet（給水所）から無料ETHを取得します。 👉 https://sepoliafaucet.com Metamaskのウォレットアドレスをコピー Faucetに貼り付けて「Send me ETH!」をクリック 数分後、MetamaskにETHが届く 💡 テスト用なので、ガス代などはかかりません！ 🧾 Step 3：スマートコントラクトをデプロイ 今回はHardhatまたはRemix IDEを使用します（Remixがおすすめ）。 ✅ Remix手順（再掲）： Message.sol を開く 左メニューの「Deploy & Run Transactions」へ 「環境」を Injected Provider - Metamask に変更 アカウントが表示されたら「Deploy」をクリック！ 📦 デプロイが完了すると、コントラクトのアドレスが表示されます（Reactで使用） 🌐 Step 4：Reactアプリと接続 ✅ 変更点： contractAddress を テストネットにデプロイしたアドレスに更新 provider を ethers.providers.Web3Provider(window.ethereum) に設定 Metamaskを Sepoliaネットワークに接続 🎯 これだけで、本番さながらの動作が可能に！ 🧪...

  こんにちは！ 昨日はスマートコントラクトと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...

  こんにちは！ この7日間チャレンジは「Ethereumの分散型アプリ（DApp）を作れるようになりたい」という方のための 超入門ロードマップ です。今日はその第一歩。 ブロックチェーンとEthereumのしくみを学びます 。