<p data-line="0" class="code-line">こんにちは！React Tokyo サポートメンバーの鳥海です。</p>
<p data-line="2" class="code-line"><a href="https://discord.com/invite/5B9jYpABUy" target="_blank" rel="nofollow noopener noreferrer">React Tokyo の Discord サーバー</a>では、日々 React に関する最新の動向から、日々の開発で直面する課題まで、メンバー間でさまざまな情報共有が行われています。</p>
<p data-line="4" class="code-line">React Tokyo トレンドレポートでは、Discord サーバー内の情報・質問スレッドで盛り上がったトピックを定期的にまとめてお届けしています。</p>
<p data-line="6" class="code-line">今回は私が生成 AI の活用を推進する立場でもあるので、それに関連した<strong>AI 小部屋</strong>のスレッドを取り上げたいと思います。</p>
<h1 id="%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%EF%BC%9F" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%EF%BC%9F" aria-hidden="true"></a> どういうスレッド？</h1>
<blockquote data-line="10" class="code-line">
<p data-line="10" class="code-line">React アプリと AI ならではの話もしたい！（AI 自体の話もしたいときだってある）そんな小部屋です。</p>
</blockquote>
<p data-line="12" class="code-line">このようにスレッドの冒頭に書かれているように、バイブコーディングなど特定のケースだけでなく、全般的に AI について話したいときに利用するスレッドになっています。</p>
<h2 id="%E6%9C%80%E8%BF%91%E3%81%AE-ai-%E4%BA%8B%E6%83%85" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E8%BF%91%E3%81%AE-ai-%E4%BA%8B%E6%83%85" aria-hidden="true"></a> 最近の AI 事情</h2>
<p data-line="16" class="code-line">直近は、モデルの更新と CLI ツールの展開が並行して進み、比較や試用の報告が増えています。<br>
具体的には、GPT-5 と Opus 4.1 の比較、Gemini CLI の GitHub Actions 公式統合、Plus プランで利用可能になった codex CLI が話題に挙がっていると思います。<br>
さらには、Devin を提供する Cognition による Windsurf の買収など、業界再編の動きも見られました。</p>
<p data-line="20" class="code-line">こうした流れを踏まえ、このスレッドで具体的にどのような話題が話されているのか見ていきましょう。</p>
<h2 id="%E6%9C%80%E8%BF%91%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E3%81%AE%E5%86%85%E5%AE%B9" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E8%BF%91%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E3%81%AE%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 最近のスレッドの内容</h2>
<p data-line="24" class="code-line">1 週間ごとに、AIに要約させ、実際にどんな試行や議論があったのかを見てみます。</p>
<ul data-line="26" class="code-line">
<li data-line="26" class="code-line">
<p data-line="26" class="code-line">2025/07/14〜07/20</p>
<ul data-line="28" class="code-line">
<li data-line="28" class="code-line">主な話題
<ul data-line="29" class="code-line">
<li data-line="29" class="code-line">Issue 起点で GitHub Copilot Agent を走らせ、PR 到達までの実践（約 13 分で 500 行規模の実装、Cypress→Playwright 移行 PR など）。</li>
<li data-line="30" class="code-line">どこまでエージェントに任せるかの線引き。</li>
</ul>
</li>
<li data-line="31" class="code-line">議論のポイント
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">CI 失敗の自動読取・自動修正は未到達。現状は人間の最終レビュー＋不足分の指示で詰める運用。</li>
<li data-line="33" class="code-line">Gemini CLI は「生成の 8 割 OK・追い込みも CLI 内で完結」一方、Rate limit・Git LFS 由来の中断・コスト増が痛点。並列抑制・リトライ・LFS 事前チェックなどの運用工夫が必要。</li>
</ul>
</li>
<li data-line="34" class="code-line">参考リンク
<ul data-line="35" class="code-line">
<li data-line="35" class="code-line"><a href="https://github.blog/changelog/2025-06-25-github-copilot-coding-agent-is-available-for-copilot-pro-users-in-public-preview/" target="_blank" rel="nofollow noopener noreferrer">GitHub Copilot Agent 公開プレビュー</a></li>
<li data-line="36" class="code-line"><a href="https://x.com/GoogleCloudTech/status/1937860467843625124" target="_blank" rel="nofollow noopener noreferrer">Gemini CLI（OSS 告知）</a></li>
</ul>
</li>
</ul>
</li>
<li data-line="38" class="code-line">
<p data-line="38" class="code-line">2025/07/28〜08/03</p>
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">主な話題
<ul data-line="41" class="code-line">
<li data-line="41" class="code-line">Next.js の experimental MCP server（v15.4.2-canary.16）でモジュールグラフ照会やルート課題の即時調査。依存やルーティング不具合の切り分けに有効。</li>
<li data-line="42" class="code-line">TanStack Start 側でも MCP server 開発が進行。編集体験と診断体験の統合に期待。</li>
<li data-line="43" class="code-line">Claude Code の useEffect / useState 多用傾向が課題。レビューエージェント併用、React 公式ドキュメント前提化、ESLint ルールや codemod で副作用を抑制。</li>
</ul>
</li>
<li data-line="44" class="code-line">議論のポイント
<ul data-line="45" class="code-line">
<li data-line="45" class="code-line">MCP/canary による開発者体験の改善点と、適用領域の見極め。</li>
<li data-line="46" class="code-line">副作用設計の健全化をチーム運用・静的解析・自動変換の組み合わせで担保。</li>
<li data-line="47" class="code-line">Gemini 2.5 Deep Think の性能期待と、無料枠変更など運用条件の変化を踏まえた段階的評価。</li>
</ul>
</li>
<li data-line="48" class="code-line">参考リンク
<ul data-line="49" class="code-line">
<li data-line="49" class="code-line"><a href="https://x.com/sebastienlorber/status/1950202512306270226" target="_blank" rel="nofollow noopener noreferrer">Next.js MCP server 試験実装</a></li>
<li data-line="50" class="code-line"><a href="https://x.com/ryoppippi/status/1936534142394798586" target="_blank" rel="nofollow noopener noreferrer">Claude Code の利用状況監視（ccusage）</a></li>
<li data-line="51" class="code-line"><a href="https://note.com/npaka/n/ncf6ddb58a2cf" target="_blank" rel="nofollow noopener noreferrer">Gemini 2.5 Deep Think 概要</a></li>
</ul>
</li>
</ul>
</li>
<li data-line="53" class="code-line">
<p data-line="53" class="code-line">2025/08/04〜08/10</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">主な話題
<ul data-line="56" class="code-line">
<li data-line="56" class="code-line">モデルの棲み分け（普段使い: GPT-5、コーディング: Opus 4.1、業務: Claude 系）。</li>
<li data-line="57" class="code-line">Cursor CLI × GPT-5 は、明示的なコンパクト化なしでも長めの会話コンテキストを維持しやすい所感。</li>
<li data-line="58" class="code-line">OpenAI の codex CLI の試用開始。ローカル/ターミナル志向の軽量エージェント選択肢が拡大。</li>
<li data-line="59" class="code-line">Gemini CLI × GitHub Actions の公式統合が実務的アップデートとして注目（push/pull_request トリガ、最小権限、dry-run、保護ブランチ維持）。</li>
</ul>
</li>
<li data-line="60" class="code-line">議論のポイント
<ul data-line="61" class="code-line">
<li data-line="61" class="code-line">CI/CD への安全な段階導入設計（権限最小化、dry-run、保護ブランチ遵守）。</li>
<li data-line="62" class="code-line">コスト管理：実行回数・レート制限・課金監視、ジョブのタイムアウト/再試行、月次上限設定。</li>
</ul>
</li>
<li data-line="63" class="code-line">参考リンク
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line"><a href="https://www.youtube.com/watch?v=0Uu_VJeVVfo" target="_blank" rel="nofollow noopener noreferrer">GPT-5 公式デモ動画</a></li>
<li data-line="65" class="code-line"><a href="https://zenn.dev/sho7650/articles/36959db803ab50" target="_blank">モデル比較（GPT-5 と Opus 4.1 の使い分け所感）</a></li>
<li data-line="66" class="code-line"><a href="https://x.com/hokazuya/status/1953987777340879294" target="_blank" rel="nofollow noopener noreferrer">Cursor CLI × GPT-5 所感</a></li>
<li data-line="67" class="code-line"><a href="https://cloud.google.com/blog/ja/topics/developers-practitioners/introducing-gemini-cli-github-actions" target="_blank" rel="nofollow noopener noreferrer">Gemini CLI × GitHub Actions 公式アナウンス</a></li>
<li data-line="68" class="code-line"><a href="https://github.com/openai/codex" target="_blank" rel="nofollow noopener noreferrer">OpenAI codex CLI リポジトリ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<p data-line="70" class="code-line">こうみてみると、最近は「エージェントの任せどころ」「MCP/canary による診断体験」「モデルの棲み分け」「CI/CLI の段階導入」「運用コストのガード」などのテーマに対して、実例ベースで検証・共有し、わいわい話していました。</p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p data-line="74" class="code-line">ここ数週間でも、モデルのアップデートや CLI ツールが立て続けに出て、現場の手触りが少し変わってきた印象です。スレッド内でも、GPT-5 や Opus 4.1 の話題、Gemini CLI の公式統合、codex CLI の試用報告などが共有され、どれも今後どのように活用しようか考えたくなるものばかりでした。</p>
<p data-line="76" class="code-line">React Tokyo 内でも、このような AI 活用に関するトピックが共有され、メンバーそれぞれが日々フロントエンド開発に知見を活用しようとしています。<br>
ぜひフロントエンドでこういう AI 活用をしているよ、こういうトピックがあったよというような話がある方は、Discord に参加し、共有いただけると嬉しいです！</p>
<p data-line="79" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__757a2c0e0f5d7" src="https://embed.zenn.studio/card#zenn-embedded__757a2c0e0f5d7" data-content="http%3A%2F%2Freact-tokyo.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="http://react-tokyo.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">http://react-tokyo.vercel.app/</a></p>


React Tokyo トレンドレポート #9: AI小部屋のスレッド

Discussion