⚙️

CodexはデフォルトでWeb検索がオフ｜Reactの最新ドキュメントを参照する設定方法

2025/10/25に公開

Codex使ってて、「え、なんでこんな古いコード出してくるの？」ってなることありますよねー

React書かせたら constructor で super(props) とか始まって、「おいおい、もう2025年やで」って突っ込みたくなるやつです。
実はこれ、CodexがデフォルトでWeb検索がオフになっているのが原因。

つまり最新の公式ドキュメントを参照せずに、手持ちの知識だけでコードを書いてしまっているんです。
でも設定を少し変えるだけで、今の公式ドキュメントに沿ったコードを返してくれるようになります。ここではその手順と実行例を紹介します。

 設定前（Web検索オフのまま）$ codex
› Reactでコンポーネントをクラスで書くサンプルコードを簡潔に教えて
  サンプルコードを公式の最新ドキュメントに沿って書いてください
• React公式ドキュメントの「Class Components (Legacy)」セクションと同様の記法です。

  import React from 'react';

  class Counter extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }

    handleIncrement = () => {
      this.setState(({ count }) => ({ count: count + 1 }));
    };

    render() {
      const { count } = this.state;
      return (
        <button type="button" onClick={this.handleIncrement}>
          Count: {count}
        </button>
      );
    }
  }

  export default Counter;

  React.Componentを継承し、constructorでstateを初期化、setStateで更新、render()でJSXを返すという構成です。
なぜレガシーか？

constructor と super(props) が前提の旧スタイル。
公式でも「Class Components (Legacy)」扱い。
Hooks以降は新規実装で推奨されない。

 設定ファイルの編集~/.codex/config.toml に以下を追記します。
[tools]
web_search = true
保存してCodexを再起動します。

 設定後（Web検索オン）$ codex
› Reactでコンポーネントをクラスで書くサンプルコードを簡潔に教えて
  サンプルコードを公式の最新ドキュメントに沿って書いてください
Searched: React class component example official documentation 2025
Worked for: 10s

• クラスベースのコンポーネントは Component を継承し、少なくとも render() を実装します。必要ならクラス
  フィールドで state やイベントハンドラを定義し、this.setState で更新します。 (react.dev)

  import { Component } from 'react';

  export default class Counter extends Component {
    state = { count: 0 };

    handleIncrement = () => {
      this.setState(({ count }) => ({ count: count + 1 }));
    };

    render() {
      return (
        <button onClick={this.handleIncrement}>
          Clicked {this.state.count} times
        </button>
      );
    }
  }

  このサンプルは React 公式ドキュメント（Component リファレンス）に沿ったクラスコンポーネントの基本形です。
  参考: https://react.dev/reference/react/Component
        https://18.react.dev/reference/react/Component
なぜこれが最新か？

state をクラスフィールドで初期化する現行の記述。
公式ドキュメントURLが明示され根拠が明確。
「Class ComponentはLegacy。ただし現行で書くならこの形」という位置付けが説明される。

 注意点ちょっと遅くなる

Web検索を有効にすると、外部サイトにアクセスする分だけレスポンスが数秒伸びることがあります。
最終チェックは必要

「公式に沿ってます」と出ても細かい差があることも。リンクを開いて確認しておくと安心です。

 まとめCodexはデフォルトでWeb検索がオフになっている。
そのため古い記法のコードを返すことがある。

config.toml に [tools] web_search = true を追加すれば、公式Docsを参照しながらコードを返す。
Reactに限らず、ライブラリの最新仕様を取り入れたい場合は有効化するのがおすすめです。

設定前（Web検索オフのまま）

設定ファイルの編集

設定後（Web検索オン）

注意点

まとめ

Discussion