投稿

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

  こんにちは!昨日はローカルブロックチェーン(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, ...

💡GMOコインで始めた初心者が次に進むなら?Bybitで積極運用スタート!

  仮想通貨に初めて触れる方には、国内の安全な取引所「GMOコイン」がおすすめです。使いやすいインターフェースと安心のサポート体制で、初めの一歩には最適。 でも、ある程度慣れてくるとこう思いませんか? 「もっと多くの通貨に触れたい」 「デリバティブや積立、レンディングなど、積極的な運用をしてみたい」 そんなあなたにおすすめなのが海外取引所「Bybit」です。 🚀Bybitとは? Bybitはグローバルに展開する暗号資産取引所で、取扱通貨の多さ、先進的な運用サービス、そしてアプリの使いやすさが魅力。現物取引に加えて、デリバティブ(先物)、積立、コピートレードなど、仮想通貨の可能性を最大限に引き出す機能が充実しています。 📝Bybitの登録手順(初心者向け) 以下に、Bybitでアカウントを作成する手順をまとめました。数分で完了するので安心です! ✅【リンクをクリック】 紹介リンクから登録を開始します: 👉 Bybit紹介リンク ✅【メールアドレスを登録】 メールアドレスとパスワードを入力し、アカウントを作成。 ✅【本人確認(KYC)】 取引や入金を行うには、本人確認が必要です。スマホで運転免許証やマイナンバーカードを撮影するだけで完了。 ✅【資金を入金】 法定通貨で入金、または他の取引所から暗号資産を送金。クレカ決済やP2P取引も可能です。 ✅【取引をスタート!】 現物取引・デリバティブ・積立・コピートレードなど、目的に応じて自由に運用を開始できます。 🎁紹介特典も充実! 紹介コード「00LB8XM」を使って登録すると、様々な特典がもらえます(条件達成が必要): 💵 100ドル入金で10ドルのボーナス 💵 500ドル取引で15ドルのボーナス 🎁 最大1,000ドルのサプライズボックス 📈 最大30%の取引手数料還元など 詳細は Bybit公式紹介ページ をご確認ください。 💬まとめ GMOコインで仮想通貨の世界に足を踏み入れたあなた。次のステップとして、より自由度の高い運用が可能なBybitに挑戦してみませんか?積極的なトレードで資産運用の幅を広げるチャンスです!

💻 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:何がで...

🧠 Day 3:はじめてのスマートコントラクト開発!Remixで動かしてみよう

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

🔧 Day2:DApp開発に必要な環境を整えよう!

  こんにちは!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日間チャレンジ!

  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...

🌍 Day1:ブロックチェーンとEthereumってなに?DAppってどう違うの?

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