記事一覧
「opencode」をお仕事で使おう（1/4）
「opencode」をお仕事で使おう（3/4）
「opencode」をお仕事で使おう（4/4）
今回のお題
前回は Windows 環境に opencode を導入し、簡単なゲームアプリを実装しました。今回は、opencode の流儀に従って設定ファイルを用意した上で、もう少し実践的な題材として「Web ベースの ユーザー認証機能付きテキストエディタ」を開発してみます。
ポイントは、
いきなり実装させない
仕様書・ルール・段取りを先に与える
という流れを、実際の開発に近い形で体験することです。
仕様書を準備する
適当な作業用フォルダを作成し、その中に ./spec/ サブフォルダを作成します。サブフォルダ内に、以下の 2 つのテキストファイルを作成してください。
# 概要
ユーザー認証機能を持つ単純なテキストエディタ。
# ログイン画面
## 機能
認証情報（ユーザー名とパスワード）を検証し、メイン画面に遷移できる。
## 画面要素
### 「ユーザー名」入力欄
自由入力のテキストボックス。
### 「パスワード」入力欄
自由入力のテキストボックス。
初期状態では伏字とする。
目玉マークのボタンを併設し、ボタンが押されたら伏字を解除する。
### 「ログイン」ボタン
押下されたら入力された認証情報を検証する。
正しい認証情報だった場合は、「エディタ画面」に遷移する。
間違った認証情報だった場合は、その旨をアラート表示する。
## 認証情報
ユーザー名「test」パスワード「pass」とする。
# エディタ画面
## 機能
簡単なテキストエディタ。
入力した内容をlocal storageに保存できる。
入力した内容をテキストファイルとしてダウンロードできる。
入力した内容をクリアできる。
ログアウトして「ログイン画面」に遷移できる。
## 画面要素
### 「テキスト」入力欄
複数行のテキストを自由入力できる。
### 「保存」ボタン
「テキスト」入力欄の内容をlocal storageに保存する。
### 「ダウンロード」ボタン
「テキスト」入力欄の内容をテキストファイルとしてダウンロードする。
### 「クリア」ボタン
「テキスト」入力欄の内容を消去する。
最後に保存した後、テキストの内容が変更されている場合は、変更が破棄される旨をYes/Noダイアログで確認する。
### 「ログアウト」ボタン
「ログイン画面」に遷移する。
最後に保存した後、テキストの内容が変更されている場合は、変更が破棄される旨をYes/Noダイアログで確認する。
# 使用する言語
HTML、CSS、javascriptとする。
# モジュール構成
共通javascript: common.js
共通CSS: common.css
ログイン画面: login.html/login.js/login.css
エディタ画面: editor.html/editor.js/editor.css
# データの保存先
WebブラウザのlocalStorageを使用する。
ルールを定義するファイルを作成する
事前に共通ルールを定義しておくことで、毎回同じ前提条件や注意点を入力する必要がなくなります。ルールファイルの詳細については以下を参照してください。
作業用フォルダ直下に、AGENTS.md という名前のテキストファイルを作成します。（※ 既存コードがある場合は /init コマンドで自動生成できますが、今回はゼロから作成するため手動で用意します。）
# AGENTS.md
## 役割・前提
- あなたは **優秀な IT エンジニア**として振る舞うこと。
- **HTML** 、 **javascript** および **CSS** に精通していることを前提とする。
## データベース設計について
- 本プロジェクトの設計は、以下のファイルに定義されている。
spec\機能仕様.md
spec\実装方針.md
- 実装・仕様検討の際は、必ずこれらを参照すること。
## コミュニケーション方針
- すべてのやり取りは **日本語** で行うこと。
- **Git のコミットメッセージ** も必ず日本語で記述すること。
実際に実装してみる
opencodeを起動する
作業フォルダを右クリックし、「Git Bash here」を選択して Git Bash を起動します。以下のコマンドで opencode を TUI モードで起動してください。
opencode
作業の段取りを検討してもらう
まずは、./spec/ に置いた仕様書を元に、実装作業の段取りを考えてもらいます。@ に続けてフォルダやファイルの相対パスを指定すると、その内容を明示的に読み込ませることができます。
以下を入力してください。
@spec/ に機能仕様と実装方針を置いてある。実装作業の段取りを検討して ./plan/ 以下に保存して。
「./plan/」フォルダに「実装段取り.md」が生成されました。
段取りを AI にレビューさせる
生成された段取りは人間がレビューしても構いませんが、ここではレビュー作業自体も AI に任せてみます。
opencode では、作業目的に応じて「エージェント」を切り替えることができます。詳細は以下を参照してください。
- Build エージェント
ファイルやディレクトリを作成・変更・削除する - Plan エージェント
ファイルを読み込むのみで変更は行わない（安全）
初期状態では Build が選択されているため、Tab キーで Plan に切り替えます。併せて /models コマンドで AI モデルも切り替えます。（レビューは、実装した本人ではなく「別の人」に頼む方が望ましい。この考え方は AI でも同じです。）
ここでは GPT-4.1 を選択しました。
エージェントとAIモデルを切り替えたら、レビューを指示します
@plan\実装段取り.md の内容を精査して、問題点があれば指摘して。
指摘内容を反映する
再び Tab キーでエージェントを Build に戻します（モデルも GPT-5.1 Codex に戻っているはずですが、念のため /models で確認してください）。次に、レビュアーからの指摘を段取りに反映させます。
上記の指摘と注意点のうち、必要と思われる個所を @plan\実装段取り.md に反映して。
実装を依頼する
最後に、整えた段取りに従って実装を依頼します。
ありがとう。 @plan\実装段取り.md に従って実装してほしい。コードは ./src/ に保存して。
「./src/」内にファイル一式が生成されました。
「./src/login.html」をWebブラウザで開いて動作検証しましょう。
AI モデルにもよりますが、概ね問題なく動作するはずです。もし不具合があれば、そのまま修正を依頼します。例えば次のように指示します。
ログイン画面のパスワード入力欄の伏字の切替えボタンが動作しません。修正して。
次回は...
既存のコードを Git リポジトリから取得し、仕様変更 → Commit → Push までを一通り実践する予定です。