IDE 拡張機能を使い始める

Codex 学習目次に戻る

このレッスンの成果

IDE は編集、ファイル閲覧、ツール実行の作業画面です。拡張により選択箇所を Codex の文脈として渡せますが、十行を選んでも変更可能範囲が十行に制限されるわけではありません。依頼文で範囲を明示し、アクセスは権限で管理します。図の 01 は文脈選択、02 は変更依頼、03 は比較と検証です。

始める前に：公式拡張を導入する

各 OS の VS Code で Extensions から Codex を検索し、発行者 OpenAI と識別子 openai.chatgpt を照合して Install を押します。末尾の公式ページからも進めます。似たアイコンだけで判断しません。再読み込みを求められたら保存して実行します。導入済み表示は存在の確認であり、起動や認証の完了ではありません。

Codex のアイコンを開き、なければ View → Command Palette で Codex: Open Codex Sidebar を検索します。Windows / Linux は Ctrl+Shift+P、macOS は Command+Shift+P です。案内に従ってアカウントとワークスペースを確認します。CLI と認証を共有する場合があるため、ログアウト前に他の作業への影響を確認します。

公式には Cursor、Windsurf などもありますが、ここでは VS Code で再現します。Xcode と JetBrains は独自の統合で、VS Code の識別子をその設定手順として使いません。Windows の WSL ウィンドウでは環境表示と端末パスを照合し、WSL 内で必要なツールが使えるか確認します。

手順1：不具合を含む練習コピーを開く

Small Steps の材料を展開し、broken を codex-ide-lab にコピーして expected は独立した参考に残します。File → Open Folder で開き、index.html、style.css、app.js、core.mjs、core.test.mjsを確認します。信頼は出所を確認した練習コピーに対して判断し、ダウンロード全体をプロジェクトにしません。

Terminal → New Terminal で開き、Windows は Get-Location、macOS / Linux は pwd で codex-ide-lab を確認します。Node.js が必要なので node --version の後にテストします。三組のうち絞り込みが失敗し、ほかが通ることを確認します。意図的な不具合なので、最初からテストを消したり期待値を書き換えたりしません。

node --test core.test.mjs

手順2：選択箇所を Codex に渡す

core.mjs の visibleTasks 全体を選び、コマンドパレットの現在の Codex チャットへ追加する操作で添付します。公式コマンド ID は chatgpt.addToThread です。次に core.test.mjs を開き、chatgpt.addFileToThread でファイル全体を添付します。表示名は言語や版で異なるため、キーボードショートカット設定で ID を検索して対応するコマンドを確認できます。ID は端末コマンドではありません。タブを開いただけで添付済みと判断せず、送信前に名前、範囲、添付表示を確認し、同名の別コピーを除外します。

Explain the selected visibleTasks function in core.mjs and the failing filter assertion in core.test.mjs. Do not edit yet. Identify which tasks should appear for All, Active and Completed, and quote the predicate that causes the mismatch. Confirm the working folder before answering.

最初は説明だけです。completed 分岐で !task.completed を使い、未完了が出ると指摘することを確認します。「絞り込みに問題かも」だけなら分岐と検証を求めます。修正済みと言うなら読み取り依頼を越えていないか見ます。開いたファイルは文脈になりますが、必要な関数と失敗を理解したか確認が必要です。

手順3：変更範囲を具体的に依頼する

Fix only the Completed filter in core.mjs so completed tasks appear. Keep the public function signatures and existing tests unchanged. Preserve All and Active behavior, task order, and input arrays. Run node --test core.test.mjs and report the actual result. Show the final diff and any remaining limitation.

同じタスクで送ります。承認が必要なら場所とコマンドが課題に合うか確認します。中心となる修正は completed 分岐の task.completed で、active とテスト期待値は保ちます。Codex が成功を報告した後も、自分の統合端末で再実行して独立した確認を残します。

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

これは比較用の参考結果で、先に貼ってから Codex が直したと扱うものではありません。同じ関数の意図的な誤りを示す古いコメントが残れば整理します。画面変更や依存追加、バックエンドは不要です。三組の成功に加え、実際の差分が範囲内かも判断します。

画面では直っているのにテストが失敗する場合

先にファイルを保存し、統合端末の作業ディレクトリを確認します。未保存の編集内容はテストが読むディスク上のファイルと異なることがあり、同名の別コピーを表示している場合もあります。core.mjs の完全なパス、保存状態、テスト場所を確かめてから元のテストを再実行します。三つとも正しくても失敗するなら、エラー全文と現在の差分を Codex に渡します。期待値の変更や拡張の再導入はしません。文脈の添付、保存、実行はそれぞれ確認が必要です。

手順4：差分と動作を確認する

コピーに Git があれば Source Control、なければ Explorer の Select for Compare / Compare with Selected で保管した broken と修正版を比較します。差分を見るために本番をコミットする必要はありません。条件と古いコメントが対象で、テストを誤った結果に合わせていないか確認します。

codex-ide-lab のプレビュー確認前に、残したい以前の練習データを保存します。同じブラウザーの URL には別の課題のデータが残る場合があります。About this exercise を開いて Reset practice data を押し、Show で All tasks を選び、空の一覧を確認します。練習データだけの初期化で、ソースファイルは戻りません。 ローカルで Read と Build を追加し Read を完了にします。All は二つ、Active は Build、Completed は Read です。再読み込み後も Completed に Read があり、空一覧の切り替えもエラーなしを確認します。各 OS の起動は最初のプロジェクトを参照します。localhost の検証は公開配備ではありません。

問題解決、復元、次の手順

コマンドがなければ現在のウィンドウの拡張と環境を確認します。WSL とローカルは異なる場合があります。選択が入らなければ添付、名前、範囲を確認し、必要なら core.mjs の visibleTasks と抜粋を明示します。node は同じ統合端末で調べ、別端末の成功で代用しません。中断後は差分を確認して残作業を依頼します。

再練習では練習コピーの core.mjs だけを broken から戻し、元の失敗が再現することを確認します。ほかの作業を失う全体リセットは使いません。ローカルでは broken の意図した失敗、expected の成功、参考画面を確認しましたが、拡張が生成した結果とはしていません。次はデバッグ、テストとレビュー、Git 差分です。

Codex 学習目次に戻る

詳しい説明を読む

Editor to Selection to Diff

• AIツール
• チュートリアル
• Codex