0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Web3】MetaMask不要。フロントエンド(JavaScript)だけで完結するローカルウォレット機能の実装手法

0
Last updated at Posted at 2026-06-15

はじめに

Web3アプリケーション(DApp)を開発・公開する際に多くの開発者が直面する最大の壁が「ユーザーのオンボーディング(初期導入)」です。
暗号資産に触れたことのないユーザーにとって「MetaMask等のウォレット拡張機能のインストール」や「シードフレーズの厳重な管理」は非常にハードルが高く大半のユーザーがこの段階で離脱してしまいます。

この課題を解決するためにユーザーがブラウザでサイトを開いた瞬間にバックグラウンドでウォレットを自動生成して即座にオンチェーン操作を体験できる「Instant Wallet(誰でもウォレット)」の実装手法を解説します。

💡 実装のデモについて

本記事のロジックを用いて開発したWeb3シミュレーター(Genesis Ecosystem)を公開しています。ウォレット不要・ガス代ゼロで実際のコントラクト挙動を体験できますので動作イメージを掴みたい方は記事末尾のリンクからお試しください。

アーキテクチャと開発環境

今回はバックエンドを持たずフロントエンド(HTML / JavaScript)のみで完結する構成とします。

  • フロントエンド: Vanilla JavaScript (ES Modules)

  • Web3ライブラリ: Ethers.js v6 (ethers@6.7.0)

  • 対象ネットワーク: EVM互換のテストネット(今回は例としてRobinhood Testnet等のテスト用RPCを想定)

Instant Walletのコアロジック実装

1. ウォレットの自動生成と保存

ユーザーが初めてサイトを訪れた際、Ethers.jsを用いてランダムな秘密鍵(Private Key)を生成し、ブラウザのlocalStorageに保存します。次回以降の訪問時は保存された鍵を読み込むことで、同一のアドレスを維持します。

JavaScript

import { ethers } from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.min.js";

// ウォレットの初期化・取得関数
function initializeWallet() {
    const STORAGE_KEY = "instant_wallet_private_key";
    let privateKey = localStorage.getItem(STORAGE_KEY);
    let wallet;

    if (privateKey) {
        // 既存の秘密鍵がある場合は読み込む
        wallet = new ethers.Wallet(privateKey);
        console.log("既存のウォレットを読み込みました:", wallet.address);
    } else {
        // 新規作成
        wallet = ethers.Wallet.createRandom();
        localStorage.setItem(STORAGE_KEY, wallet.privateKey);
        console.log("新規ウォレットを生成しました:", wallet.address);
    }
    
    return wallet;
}

const myWallet = initializeWallet();
// 画面のUIに myWallet.address を表示する処理などをここに記述

2. プロバイダーの接続とコントラクト実行

生成したウォレットを特定のネットワーク(RPC)に接続し、スマートコントラクトの関数(Write処理)を実行するロジックです。Ethers.js v6ではプロバイダーの指定に JsonRpcProvider を使用します。

JavaScript
async function executeContractFunction(wallet) {
    // 1. プロバイダーの設定 (v6の構文)
    const RPC_URL = "https://your-testnet-rpc-url.com";
    const provider = new ethers.JsonRpcProvider(RPC_URL);

    // 2. ウォレットとプロバイダーを接続(Signerの作成)
    const connectedWallet = wallet.connect(provider);

    // 3. コントラクトのインスタンス化
    const contractAddress = "0xYourContractAddress...";
    const abi = [
        // 実行したい関数のABIを定義(例:Faucet機能)
        "function claimTokens() external"
    ];
    const contract = new ethers.Contract(contractAddress, abi, connectedWallet);

    try {
        console.log("トランザクションを送信中...");
        // 4. 関数の実行(署名はconnectedWalletが自動で行う)
        const tx = await contract.claimTokens();
        
        // トランザクションの完了を待機
        const receipt = await tx.wait();
        console.log("トランザクション成功! Hash:", receipt.hash);
        
    } catch (error) {
        console.error("エラーが発生しました:", error);
    }
}

このロジックにより、ユーザーは拡張機能のポップアップで「承認(Approve)」ボタンを押すことなくWebサイト上のボタンをクリックするだけでオンチェーンへの書き込み(トランザクション)を完了できます。

⚠️ セキュリティ上の制約と注意点(重要)

エンジニアとしてこのアーキテクチャの重大なリスクを認識しておく必要があります。

ブラウザのlocalStorageやメモリ上に秘密鍵を平文で保持する仕組みはXSS(クロスサイトスクリプティング)攻撃によって容易に鍵を窃取される危険性があります。

そのため、この「Instant Wallet」のアプローチはメインネット(実際の金銭的価値を持つ暗号資産を扱う環境)では絶対に本番導入しないでください。
あくまでテストネットを利用した「学習用シミュレーター」や価値を持たないトークンを利用した「ゲームの体験版」におけるUX向上策として限定的に使用するべき手法です。

まとめと稼働デモ

フロントエンドに数行のJavaScript(Ethers.js)を追加するだけでMetaMask不要のシームレスなWeb3体験を構築することができます。セキュリティの制約を正しく理解すれば初心者の壁を壊す非常に強力なアプローチになります。

今回解説したInstant Walletの仕組みを実装し 「完全ノーリスク・ウォレット準備不要」 で実際のDeFi(Faucet, Swap, NFT Minting)を体験できる学習シミュレーターを個人開発しています。

「ウォレットレスなWeb3アプリの挙動」を実際に触って確認したい方はぜひ以下のポータルからアクセスしてみてください。

👇The Genesis Ecosystem (Robinhood Testnet)


🌌 【Update】新機能「Star Map」実装
最新のアップデートにて、錬成(Swap)したエネルギーを使って宇宙空間に自分だけの星を配置・延命できる「Star Map」機能を追加しました。
ウォレット不要のブラウザ上でどのように動くのか実際のプレイ画面をこちらの動画(27秒)でご覧ください👇

開発の裏側や最新のアップデート情報については、X(旧Twitter)で発信しています。
ご興味を持っていただけたら、ぜひフォローをお願いします!

最後まで読んでいただきありがとうございました。
Web3開発におけるUX改善の参考になれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?