Web3 & DApp Development Fundamentals · レッスン

Providerへの接続

RPCとウォレット

レッスン 1/413 ステップ

「Providerへの接続」はCoddyKit上の無料Web3 & DApp Development Fundamentalsレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWeb3 & DApp Development Fundamentals学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web3 & DApp Development Fundamentalsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Talking to a Blockchain

To interact with Ethereum from JavaScript you need a provider — an object that connects to a node and lets you read chain data and send transactions.

Libraries like ethers.js and web3.js wrap the JSON-RPC protocol nodes speak.

Providers vs Signers

Two key abstractions:

Provider — read-only connection to the chain (balances, blocks, view calls).
Signer — holds a private key and can sign and send transactions.

You read with a provider and write with a signer.

A JSON-RPC Provider

The most common provider connects to an RPC endpoint such as Infura, Alchemy, or a local node:

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

With it you can immediately query public chain data.

const { ethers } = require("ethers");
const provider = new ethers.JsonRpcProvider(
  "https://mainnet.example-rpc.io/KEY"
);

Reading Network Info

Once connected, query basic network state:

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

The chainId identifies which network you are on (1 = mainnet).

const network = await provider.getNetwork();
console.log(network.chainId);

const block = await provider.getBlockNumber();
console.log("Latest block:", block);

Checking a Balance

Get an account's ETH balance through the provider:

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

The raw value is in wei (a BigInt); formatEther converts it to a human-readable ETH string.

const balance = await provider.getBalance("0xAbc...");
console.log(ethers.formatEther(balance), "ETH");

Browser Wallets

In a browser dApp, the wallet (like MetaMask) injects a provider at window.ethereum. Wrap it with a BrowserProvider:

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

The eth_requestAccounts call prompts the user to connect.

const provider = new ethers.BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);

Getting a Signer

From a browser provider, obtain the connected account's signer:

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

This signer can now send transactions approved by the user in their wallet.

const signer = await provider.getSigner();
console.log("Connected as:", await signer.getAddress());

Wallet from a Private Key

On a backend you can create a signer from a private key. Connect it to a provider so it can broadcast:

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

Never hardcode private keys — load them from environment variables.

const wallet = new ethers.Wallet(
  process.env.PRIVATE_KEY,
  provider
);

web3.js Comparison

web3.js is the older alternative. Its connection looks like:

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

Concepts map closely, but ethers.js separates providers and signers more cleanly.

const { Web3 } = require("web3");
const web3 = new Web3("https://mainnet.example-rpc.io/KEY");
const block = await web3.eth.getBlockNumber();

Keeping Secrets Safe

RPC keys and private keys are sensitive:

Store them in .env, never in source control.
Use read-only providers in front-end code.
Private keys belong only on secure backends or in the user's own wallet.

Default and Fallback Providers

ethers can combine several backends for reliability. A fallback provider queries multiple endpoints and agrees on a result:

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

If one backend is down, others keep your app working.

const provider = ethers.getDefaultProvider("mainnet", {
  alchemy: process.env.ALCHEMY_KEY,
  infura: process.env.INFURA_KEY,
});

Quick Check

Test your understanding of providers and signers.

対話的なレッスンで答える

Recap

You learned to connect to a blockchain.

A provider reads chain data; a signer sends transactions.
JsonRpcProvider connects to an RPC URL; BrowserProvider wraps wallet injections.
getSigner returns the connected account; new Wallet(key, provider) signs on a backend.
Values are in wei; use formatEther to display them.
Keep RPC and private keys in .env, never in code.

無料で開始

AI チューターと学ぶ Web3 & DApp Development Fundamentals — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 29
レッスン: 105

無料で学習を始めるコース全体を表示

よくある質問

「Providerへの接続」レッスンは無料ですか？

はい。「Providerへの接続」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web3 & DApp Development Fundamentalsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web3 & DApp Development Fundamentalsコースには全4レッスンが含まれています。

「Providerへの接続」で何を学びますか？

RPCとウォレットブラウザで直接実行するハンズオンコードでWeb3 & DApp Development Fundamentalsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web3 & DApp Development Fundamentalsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb3 & DApp Development Fundamentalsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Providerへの接続」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb3 & DApp Development Fundamentalsレッスンでコードを書いて実行できますか？

はい。すべてのWeb3 & DApp Development Fundamentalsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Web3 & DApp Development Fundamentalsに戻る