1. Mini App開発の概要

Mini Appsは、World App内で動作するWebアプリケーションです。MiniKit-JS SDKを使うことで、 World AppのネイティブUIやWorld ID認証、決済機能と連携できます。

できること

🔐

World ID認証

ユーザーがOrb認証済みの人間かを確認

💳

USDC決済

World Chain上でのステーブルコイン決済

👤

ユーザー情報取得

ウォレットアドレス、ユーザー名などの取得

📱

ネイティブUI連携

World Appのネイティブ機能を活用

技術スタック

• フロントエンド：React, Next.js, Vue.js, Vanilla JS
• SDK：@worldcoin/minikit-js, @worldcoin/minikit-react
• UI Kit：mini-apps-ui-kit-react (オプション)
• Blockchain：World Chain (Optimism L2)

2. MiniKit-JSのセットアップ

インストール

# npm
npm install @worldcoin/minikit-js

# React用（オプション）
npm install @worldcoin/minikit-react

# UIキット（オプション）
npm install @worldcoin/mini-apps-ui-kit-react

React/Next.jsでの初期化

components/MiniKitProvider.tsx

"use client";

import { MiniKit } from "@worldcoin/minikit-js";
import { useEffect, ReactNode } from "react";

export function MiniKitProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    MiniKit.install();
  }, []);

  return <>{children}</>;
}

app/layout.tsx

import { MiniKitProvider } from "@/components/MiniKitProvider";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MiniKitProvider>
          {children}
        </MiniKitProvider>
      </body>
    </html>
  );
}

Mini Appの検出

import { MiniKit } from "@worldcoin/minikit-js";

// World App内で動作しているか確認
if (MiniKit.isInstalled()) {
  console.log("World App内で動作中");
} else {
  console.log("ブラウザで動作中");
}

3. World ID認証の実装

MiniKitを使うと、ユーザーがOrb認証済みの人間かを簡単に確認できます。

認証の実装

import { MiniKit, VerificationLevel } from "@worldcoin/minikit-js";

async function verifyUser() {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.verify({
      action: "your-app-action-id", // Developer Portalで設定
      verification_level: VerificationLevel.Orb, // Orb認証を要求
    });

    if (result.finalPayload.status === "success") {
      // バックエンドで検証
      const response = await fetch("/api/verify", {
        method: "POST",
        body: JSON.stringify(result.finalPayload),
      });

      return { success: true, data: await response.json() };
    }
  } catch (error) {
    return { success: false, error };
  }
}

認証レベル

VerificationLevel.Orb

Orb認証済みユーザーのみ許可。最も高いセキュリティレベル。

VerificationLevel.Device

デバイス認証レベル。より多くのユーザーが利用可能。

⚠️

重要

認証結果は必ずバックエンドで検証してください。フロントエンドだけでの検証は安全ではありません。

4. USDC決済の実装

MiniKitを使うと、World Chain上でのUSDC決済を簡単に実装できます。ウォレット接続不要、手数料無料の決済体験を提供できます。

決済の実装

import { MiniKit, Tokens, tokenToDecimals } from "@worldcoin/minikit-js";

async function initiatePayment(amount: number, reference: string) {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.pay({
      reference,  // 注文IDなど
      to: "0xYourWalletAddress",  // 受取先アドレス
      tokens: [
        {
          symbol: Tokens.USDCE,  // USDC
          token_amount: tokenToDecimals(amount, Tokens.USDCE).toString(),
        },
      ],
      description: "商品購入",
    });

    if (result.finalPayload.status === "success") {
      // 決済成功
      return {
        success: true,
        transactionId: result.finalPayload.transaction_id
      };
    }
  } catch (error) {
    return { success: false, error };
  }
}

対応トークン

• Tokens.USDCE：USDC（ステーブルコイン）
• Tokens.WLD：WLDトークン

メリット

✅ ウォレット接続不要 - ユーザーはタップするだけ
✅ ガス代無料 - World Chain上のトランザクション
✅ 即時決済 - 秒単位で完了
✅ 中間業者なし - ダイレクトな送金

5. テストとデバッグ

ローカル開発

NGROKでローカルを公開

ngrok http 3000

NGROKで公開URLを取得し、World Appからアクセス可能にします

Developer Portalで設定

Developer PortalでApp URLをNGROK URLに設定

World Appでテスト

実機のWorld Appから直接Mini Appを開いてテスト

デバッグのヒント

• console.logを活用してSDKのレスポンスを確認
• MiniKit.isInstalled()でWorld App環境を検出
• ブラウザでのフォールバック動作も実装しておく
• エラーハンドリングを丁寧に実装

6. リソースとドキュメント

📚

公式ドキュメント

docs.world.org/mini-apps - 最新のAPI仕様とガイド

🐙

GitHub - MiniKit-JS

SDKのソースコードとサンプル

🔧

Developer Portal

アプリ登録、Action ID取得、設定管理

📦

npm - @worldcoin/minikit-js

パッケージ情報とバージョン履歴

テンプレートリポジトリ

• React template （バックエンド付き）
• Vanilla JS template
• Next.js template

GitHubのworldcoin/minikit-jsリポジトリから入手可能

1. Mini App開発の概要

できること

🔐

World ID認証

ユーザーがOrb認証済みの人間かを確認

💳

USDC決済

World Chain上でのステーブルコイン決済

👤

ユーザー情報取得

ウォレットアドレス、ユーザー名などの取得

📱

ネイティブUI連携

World Appのネイティブ機能を活用

技術スタック

• フロントエンド：React, Next.js, Vue.js, Vanilla JS
• SDK：@worldcoin/minikit-js, @worldcoin/minikit-react
• UI Kit：mini-apps-ui-kit-react (オプション)
• Blockchain：World Chain (Optimism L2)

2. MiniKit-JSのセットアップ

インストール

# npm
npm install @worldcoin/minikit-js

# React用（オプション）
npm install @worldcoin/minikit-react

# UIキット（オプション）
npm install @worldcoin/mini-apps-ui-kit-react

React/Next.jsでの初期化

components/MiniKitProvider.tsx

"use client";

import { MiniKit } from "@worldcoin/minikit-js";
import { useEffect, ReactNode } from "react";

export function MiniKitProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    MiniKit.install();
  }, []);

  return <>{children}</>;
}

app/layout.tsx

import { MiniKitProvider } from "@/components/MiniKitProvider";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MiniKitProvider>
          {children}
        </MiniKitProvider>
      </body>
    </html>
  );
}

Mini Appの検出

import { MiniKit } from "@worldcoin/minikit-js";

// World App内で動作しているか確認
if (MiniKit.isInstalled()) {
  console.log("World App内で動作中");
} else {
  console.log("ブラウザで動作中");
}

3. World ID認証の実装

MiniKitを使うと、ユーザーがOrb認証済みの人間かを簡単に確認できます。

認証の実装

import { MiniKit, VerificationLevel } from "@worldcoin/minikit-js";

async function verifyUser() {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.verify({
      action: "your-app-action-id", // Developer Portalで設定
      verification_level: VerificationLevel.Orb, // Orb認証を要求
    });

    if (result.finalPayload.status === "success") {
      // バックエンドで検証
      const response = await fetch("/api/verify", {
        method: "POST",
        body: JSON.stringify(result.finalPayload),
      });

      return { success: true, data: await response.json() };
    }
  } catch (error) {
    return { success: false, error };
  }
}

認証レベル

VerificationLevel.Orb

Orb認証済みユーザーのみ許可。最も高いセキュリティレベル。

VerificationLevel.Device

デバイス認証レベル。より多くのユーザーが利用可能。

⚠️

重要

認証結果は必ずバックエンドで検証してください。フロントエンドだけでの検証は安全ではありません。

4. USDC決済の実装

MiniKitを使うと、World Chain上でのUSDC決済を簡単に実装できます。ウォレット接続不要、手数料無料の決済体験を提供できます。

決済の実装

import { MiniKit, Tokens, tokenToDecimals } from "@worldcoin/minikit-js";

async function initiatePayment(amount: number, reference: string) {
  if (!MiniKit.isInstalled()) {
    return { success: false, error: "World App required" };
  }

  try {
    const result = await MiniKit.commandsAsync.pay({
      reference,  // 注文IDなど
      to: "0xYourWalletAddress",  // 受取先アドレス
      tokens: [
        {
          symbol: Tokens.USDCE,  // USDC
          token_amount: tokenToDecimals(amount, Tokens.USDCE).toString(),
        },
      ],
      description: "商品購入",
    });

    if (result.finalPayload.status === "success") {
      // 決済成功
      return {
        success: true,
        transactionId: result.finalPayload.transaction_id
      };
    }
  } catch (error) {
    return { success: false, error };
  }
}

対応トークン

• Tokens.USDCE：USDC（ステーブルコイン）
• Tokens.WLD：WLDトークン

メリット

✅ ウォレット接続不要 - ユーザーはタップするだけ
✅ ガス代無料 - World Chain上のトランザクション
✅ 即時決済 - 秒単位で完了
✅ 中間業者なし - ダイレクトな送金

5. テストとデバッグ

ローカル開発

NGROKでローカルを公開

ngrok http 3000

NGROKで公開URLを取得し、World Appからアクセス可能にします

Developer Portalで設定

Developer PortalでApp URLをNGROK URLに設定

World Appでテスト

実機のWorld Appから直接Mini Appを開いてテスト

デバッグのヒント

• console.logを活用してSDKのレスポンスを確認
• MiniKit.isInstalled()でWorld App環境を検出
• ブラウザでのフォールバック動作も実装しておく
• エラーハンドリングを丁寧に実装

1. Mini App開発の概要

できること

World ID認証

USDC決済

ユーザー情報取得

ネイティブUI連携

技術スタック

2. MiniKit-JSのセットアップ

インストール

React/Next.jsでの初期化

Mini Appの検出

3. World ID認証の実装

認証の実装

認証レベル

VerificationLevel.Orb

VerificationLevel.Device

重要

4. USDC決済の実装

決済の実装

対応トークン

メリット

5. テストとデバッグ

ローカル開発

NGROKでローカルを公開

Developer Portalで設定

World Appでテスト

デバッグのヒント

6. リソースとドキュメント

公式ドキュメント

GitHub - MiniKit-JS

Developer Portal

npm - @worldcoin/minikit-js

テンプレートリポジトリ

5,000円相当を追加でGET

1. Mini App開発の概要

できること

World ID認証

USDC決済

ユーザー情報取得

ネイティブUI連携

技術スタック

2. MiniKit-JSのセットアップ

インストール

React/Next.jsでの初期化

Mini Appの検出

3. World ID認証の実装

認証の実装

認証レベル

VerificationLevel.Orb

VerificationLevel.Device

重要

4. USDC決済の実装

決済の実装

対応トークン

メリット

5. テストとデバッグ

ローカル開発

NGROKでローカルを公開

Developer Portalで設定

World Appでテスト

デバッグのヒント

6. リソースとドキュメント

公式ドキュメント

GitHub - MiniKit-JS

Developer Portal

npm - @worldcoin/minikit-js

テンプレートリポジトリ

5,000円相当を追加でGET