AIエージェント活用ガイド

OpenCodeとは？

OpenCodeは、AIを活用したコード生成・編集ツールです。特にWebアプリ開発において、Next.jsやReactと組み合わせることで、効率的に開発を進められます。本記事では、OpenCodeを使ったWebアプリ開発の始め方を、具体的な手順とともに解説します。

1. 環境準備

必要なツール

Node.js (v18以上推奨)

npm または yarn

Git

テキストエディタ（VSCode推奨）

OpenCodeのインストール

OpenCodeはCLIツールとして提供されています。以下のコマンドでインストールします。

npm install -g @opencode/cli

インストール後、バージョンを確認します。

opencode --version

2. Next.jsプロジェクトの作成

OpenCodeはNext.jsとの親和性が高いため、まずはNext.jsのプロジェクトを作成します。

npx create-next-app@latest my-app --typescript
cd my-app

3. OpenCodeの初期化

プロジェクトディレクトリでOpenCodeを初期化します。

opencode init

これにより、.opencodeディレクトリが作成され、設定ファイルが生成されます。

4. AIコーディングの基本

OpenCodeの最大の特徴は、AIによるコード生成です。以下のように、自然言語で指示を出すだけでコードを生成できます。

例：Todoリストコンポーネントの作成

opencode generate "ReactのTodoリストコンポーネントを作成。追加、削除、完了の機能を持つ。TypeScriptで書く。"

OpenCodeは、components/TodoList.tsx にコードを生成します。

5. 生成されたコードの確認と修正

生成されたコードを確認し、必要に応じて修正します。OpenCodeはコードの品質が高いですが、人間のレビューは必須です。

// components/TodoList.tsx
import React, { useState } from 'react';
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}
const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState('');
const addTodo = () => {
    if (input.trim() === '') return;
    setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
    setInput('');
  };
const toggleTodo = (id: number) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };
const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && addTodo()}
      />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

6. アプリへの組み込み

生成したコンポーネントを、pages/index.tsx に組み込みます。

// pages/index.tsx
import type { NextPage } from 'next';
import TodoList from '../components/TodoList';
const Home: NextPage = () => {
  return (
    <div>
      <h1>My App</h1>
      <TodoList />
    </div>
  );
};
export default Home;

7. 開発サーバーの起動

npm run dev

ブラウザで http://localhost:3000 にアクセスし、Todoリストが動作することを確認します。

8. OpenCodeの高度な使い方

コンテキストを指定したコード生成

プロジェクトの既存コードをコンテキストとして与えることで、より適切なコードを生成できます。

opencode generate "このプロジェクトのスタイルに合わせて、ヘッダーコンポーネントを作成" --context ./styles/globals.css

リファクタリング

既存のコードを改善するよう指示することも可能です。

opencode refactor ./components/TodoList.tsx "パフォーマンスを最適化し、useCallbackとuseMemoを使用"

9. デプロイ

Next.jsアプリはVercelに簡単にデプロイできます。

GitHubリポジトリにコードをプッシュ

Vercelアカウントを作成し、リポジトリをインポート

自動デプロイ

または、以下のコマンドでビルドします。

npm run build

まとめ

OpenCodeを使うことで、Webアプリ開発の効率が大幅に向上します。特にNext.jsやReactとの組み合わせは強力で、AIの力を借りながら素早くプロトタイプを作成できます。ぜひ実際に試してみてください。