OpenClaw入門（応用編）——Ralph Loopで自律的なWeb開発を実現する

はじめに

導入編でOpenClawの全体像を理解し、初心者編でセットアップとGitHub連携を体験しました。

最終回の応用編では、OpenClawの最も強力な活用法——Ralph Loopによる自律的な自動開発に挑戦します。

「要件定義を渡すだけで、AIが計画を立て、コードを書き、テストを実行し、完了するまで繰り返す」——そんな開発スタイルが、OpenClawとRalph Loopの組み合わせで実現します。

本記事はOpenClaw 3部作の応用編です。

この記事を読み終わると、以下ができるようになります：

• Ralph Loopの仕組み（PLANNINGモードとBUILDINGモード）を理解する
• Next.jsプロジェクトでRalph Loopを実行し、自律的なコード生成を体験する
• 大規模プロジェクトでのバッチ戦略を設計できる
• OpenClawとClaude Codeの最適な使い分けを判断できる

Ralph Loopとは何か

概要

Ralph Loopは、AIエージェントにPRD（要件定義書）を渡すと、計画→実装→テストを自律的に繰り返すループ手法です。

名前の由来はThe Simpsonsのキャラクター Ralph Wiggumで、「失敗しても何度でも繰り返し挑戦する」という哲学を体現しています。

もともとはClaude Code向けのスクリプトとして広まりましたが、OpenClawのスキルとして統合されたことで、メッセージングプラットフォーム経由で手軽に実行できるようになりました。

2つのフェーズ

重要なのは、PLANNINGとBUILDINGの間にユーザーの確認ステップがあること。 計画を承認してからBUILDINGに進むため、想定外の実装を防げます。

ハンズオン 1: Ralph Loopの準備

Step 1: Ralph Loopスキルの有効化

OpenClawのダッシュボード（http://127.0.0.1:18789/）のスキル管理画面から「ralph-loop」を検索して有効化します。

Step 2: プロジェクトの作成

架空のNext.jsプロジェクト「TaskFlow」（タスク管理アプリ）を題材に進めます。

npx create-next-app@latest taskflow --typescript --tailwind --app --src-dir

cd taskflow

Step 3: PROMPT.mdの作成

Ralph Loopの起点となる要件定義ファイルを作成します。これがOpenClawへの「発注書」になります。

# TaskFlow - タスク管理機能

## 概要
Firestoreをバックエンドに使用したタスク管理アプリケーション。
ユーザーがタスクを作成・編集・削除・完了状態の切り替えができる。

## 技術スタック
- Next.js 15（App Router）
- TypeScript（strictモード）
- Tailwind CSS
- Firebase Firestore

## 機能要件

### タスク一覧表示
- Firestoreからタスクを取得して一覧表示する
- タスクには「タイトル」「説明」「ステータス」「作成日」がある
- ステータスは「未着手」「進行中」「完了」の3種類

### タスク作成
- モーダルダイアログでタスクを新規作成できる
- タイトルは必須、説明は任意

### タスク更新
- タスクのステータスをクリックで切り替えられる
- インライン編集でタイトルと説明を更新できる

### タスク削除
- 確認ダイアログの後にタスクを削除できる

## 非機能要件
- Server Componentsを活用し、初期表示を高速化する
- 楽観的更新（Optimistic Updates）でUXを向上させる
- TypeScript strictモード準拠
- any型の使用禁止

Step 4: AGENTS.mdの作成

AIエージェントに対するコンテキスト指示を設定します。これにより、モリソンのコーディング規約に沿ったコードが生成されます。

# AGENTS.md

## コーディング規約
- TypeScript strictモードを使用する
- any型の使用を禁止する
- コンポーネントはFC型で定義する
- Tailwind CSSでスタイリングする
- 不要なコメントを追加しない

## ディレクトリ構成
- src/app/ - ページ・レイアウト
- src/components/ - UIコンポーネント
- src/lib/ - ユーティリティ・Firebase設定
- src/types/ - 型定義

## Firestoreの規約
- コレクション名はキャメルケース
- ドキュメントIDは自動生成
- タイムスタンプはserverTimestamp()を使用

ハンズオン 2: PLANNINGフェーズの実行

Step 1: PLANNINGモードの開始

OpenClawのチャネル（Telegram等）から以下のように指示します。

~/projects/taskflow ディレクトリでRalph Loopを実行して。
まずPLANNINGモードで仕様書と実装計画を生成して。
PROMPT.md と AGENTS.md を参照してください。

Step 2: 生成された仕様書の確認

OpenClawはPROMPT.mdを分析し、以下のファイルを自動生成します。

taskflow/
├── PROMPT.md
├── AGENTS.md
├── SPECS/
│   ├── task-list.md          # タスク一覧の詳細仕様
│   ├── task-create.md        # タスク作成の詳細仕様
│   ├── task-update.md        # タスク更新の詳細仕様
│   └── task-delete.md        # タスク削除の詳細仕様
└── IMPLEMENTATION_PLAN.md    # 実装計画

Step 3: 実装計画の確認

IMPLEMENTATION_PLAN.md には、実装順序と依存関係が記載されます。

# 実装計画

## Phase 1: 基盤（依存なし）
- [ ] 型定義の作成（src/types/task.ts）
- [ ] Firebase設定の作成（src/lib/firebase.ts）
- [ ] Firestoreユーティリティの作成（src/lib/tasks.ts）

## Phase 2: UIコンポーネント（Phase 1に依存）
- [ ] TaskCard コンポーネント
- [ ] TaskList コンポーネント
- [ ] TaskCreateModal コンポーネント
- [ ] TaskDeleteDialog コンポーネント

## Phase 3: ページ統合（Phase 2に依存）
- [ ] メインページへの統合（src/app/page.tsx）
- [ ] 楽観的更新の実装
- [ ] Server Componentsの活用

ここでユーザーが計画を確認し、承認してからBUILDINGに進みます。 問題があれば修正を依頼できます。

Phase 2のTaskCardに、ステータスバッジの色分け機能も追加して。
未着手=グレー、進行中=ブルー、完了=グリーンで。

ハンズオン 3: BUILDINGフェーズの実行

Step 1: BUILDINGモードの開始

計画を承認したら、BUILDINGモードに進みます。

PLANNINGの結果を確認しました。BUILDINGモードに進んでください。
IMPLEMENTATION_PLAN.md に従って実装してください。

Step 2: 自律的な実装ループ

Ralph Loopが以下を自動的に繰り返します。

Step 3: 進捗のモニタリング

OpenClawのダッシュボード（http://127.0.0.1:18789/）で進捗をリアルタイムに確認できます。

また、チャネルに進捗報告を送るよう指示することもできます。

各フェーズが完了するたびにこのチャットに報告して

すると、OpenClawは以下のような報告を送ってきます。

✅ Phase 1 完了
- src/types/task.ts — 型定義（Task, TaskStatus, CreateTaskInput）
- src/lib/firebase.ts — Firebase初期化
- src/lib/tasks.ts — Firestore CRUD関数

Phase 2 を開始します...

Step 4: 生成されたコードの確認

BUILDINGフェーズが完了すると、以下のようなコードが生成されます。

型定義の例（src/types/task.ts）：

import type { Timestamp } from "firebase/firestore";

export type TaskStatus = "todo" | "in_progress" | "done";

export interface Task {
  id: string;
  title: string;
  description: string;
  status: TaskStatus;
  createdAt: Timestamp;
  updatedAt: Timestamp;
}

export interface CreateTaskInput {
  title: string;
  description?: string;
}

コンポーネントの例（src/components/TaskCard.tsx）：

import type { FC } from "react";
import type { Task, TaskStatus } from "@/types/task";

interface TaskCardProps {
  task: Task;
  onStatusChange: (id: string, status: TaskStatus) => void;
  onDelete: (id: string) => void;
}

const statusConfig: Record<TaskStatus, { label: string; className: string }> = {
  todo: { label: "未着手", className: "bg-gray-100 text-gray-600" },
  in_progress: { label: "進行中", className: "bg-blue-100 text-blue-600" },
  done: { label: "完了", className: "bg-green-100 text-green-600" },
};

export const TaskCard: FC<TaskCardProps> = ({ task, onStatusChange, onDelete }) => {
  const config = statusConfig[task.status];

  const nextStatus: Record<TaskStatus, TaskStatus> = {
    todo: "in_progress",
    in_progress: "done",
    done: "todo",
  };

  return (
    <div className="rounded-lg border bg-white p-4 shadow-sm">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <h3 className="font-medium text-gray-900">{task.title}</h3>
          {task.description && (
            <p className="mt-1 text-sm text-gray-500">{task.description}</p>
          )}
        </div>
        <button
          onClick={() => onDelete(task.id)}
          className="ml-2 text-gray-400 hover:text-red-500"
        >
          <span className="sr-only">削除</span>
          ×
        </button>
      </div>
      <div className="mt-3">
        <button
          onClick={() => onStatusChange(task.id, nextStatus[task.status])}
          className={`rounded-full px-3 py-1 text-xs font-medium ${config.className}`}
        >
          {config.label}
        </button>
      </div>
    </div>
  );
};

このように、AGENTS.mdのコーディング規約に沿ったコードが自動生成されます。

全体戦略: 大規模プロジェクトへの適用

バッチ戦略: 依存関係を考慮した並列処理

20〜30のタスクがある実務レベルのプロジェクトでは、すべてを直列に処理すると時間がかかります。PROMPT.mdにバッチ戦略を明記することで、OpenClawが効率的な順序で実装を進めます。

PROMPT.mdに以下のように記載します。

## 実装順序（バッチ戦略）

### バッチ1: 基盤（最優先・直列実行）
型定義、Firebase設定、共通UIコンポーネントを先に実装する。
これらは他のすべての機能の前提となる。

### バッチ2: コア機能（バッチ1完了後・並列実行可能）
タスクのCRUD操作を実装する。
各機能は独立しているため、並列実装が可能。

### バッチ3: 応用機能（バッチ2完了後）
検索、ドラッグ&ドロップ、通知などの追加機能。

### バッチ4: 品質（最後に実行）
E2Eテスト、パフォーマンス最適化。

スケール感: 実務での数字

実際にRalph Loopで開発した場合の時間とコストの目安です（Claude Sonnet 4.5利用時）。

注意： これはコード生成の時間とAPIコストの目安です。生成されたコードのレビュー、動作確認、手動調整の時間は別途必要です。コストはBatch API（50%オフ）やプロンプトキャッシュ（最大90%オフ）を活用することで大幅に削減できます。APIの料金詳細は初心者編を参照してください。

OpenClaw × Claude Code: 最適な使い分け

OpenClawとClaude Codeは競合ではなく、補完関係にあります。

併用の具体例

Tips・注意点

Ralph Loopを成功させるコツ

セキュリティの再確認

応用編で扱うRalph Loopは、OpenClawが自律的にコードを書き換えるため、セキュリティリスクが高まります。

Ralph Loopは必ず新規ブランチで実行してください。 mainブランチで直接実行すると、意図しない変更が本番に影響する可能性があります。

OpenClawが向いていないケース

• 機密性の高いコードベース — LLMにコードを送信することに変わりはない
• 既存の大規模コードベースのリファクタリング — コンテキストの理解にはClaude Codeが向いている
• 本番環境への直接操作 — 自律型エージェントに本番操作をさせるのは危険

まとめ

OpenClaw 3部作を通じて、導入から応用までを一通り体験しました。

次のアクションとしておすすめ：

1. まず導入編・初心者編でセットアップを済ませる — まだの方は導入編から
2. 小さなサイドプロジェクトでRalph Loopを試す — 既存プロジェクトではなく、新規プロジェクトが安全
3. PROMPT.mdの書き方を磨く — Ralph Loopの品質は要件定義の質に比例する
4. Claude Codeと併用する — 設計はClaude Code、実装はOpenClaw、レビューはClaude Codeが黄金パターン

開発者が寝ている間にも、OpenClawがIssueを処理し、コードを書き、PRを作成している——そんな開発スタイルがすでに始まっています。

---

参考リンク：

• OpenClaw公式サイト
• OpenClaw公式ドキュメント
• OpenClaw GitHub
• Ralph Loop スキル
• Ralph GitHub
• ClawHub — スキルディレクトリ

---

関連記事：

• OpenClaw入門（導入編）——2026年最注目のオープンソースAIエージェントを徹底解説
• OpenClaw入門（初心者編）——セットアップからGitHub連携まで手を動かして学ぶ
• Claude Cowork × MCP連携実践ガイド——Google Drive・Slack・Notionを繋いで業務フローを丸ごと自動化
• SDD（仕様駆動開発）入門——Vibe Codingを卒業してAI開発の精度を上げる方法