1. Playwright Agents によるテストの自動生成を試してみた
Playwright v1.56で導入された3つのエージェント（Planner、Generator、Healer）を使い、Claude Codeから呼び出してNext.jsカンバンアプリのテストコードを自動生成。アプリコードを解析し、テスト計画から実装、失敗したテストの修正まで自動化できる。
主なトピック:
- Planner: アプリコードを解析してテストケースの計画をMarkdown形式で生成するエージェント
- Generator: Plannerが生成した計画をもとに実際のPlaywrightテストコードを自動生成
- Healer: 失敗したテストを実行して分析し、自動的に修正案を提案して実装
- Claude Code: SubAgentsとしてPlaywright Agentsを定義し、MCP経由で呼び出し可能
- playwright-test MCP: プロジェクト単位のMCP設定でテスト生成を実現
- その他: Next.js, カンバンアプリ, CardTitleコンポーネント etc...
(コード例あり)
2. Remix 3 発表まとめ - React を捨て、Web標準で新しい世界へ
Remix 3はReactから離れ、Web標準をベースにした新フレームワーク。Setup ScopeでJavaScriptクロージャによる状態管理、Remix Eventsでイベントを第一級市民として扱い、明示的な再レンダリングと型安全性を実現。AI時代に適したシンプルなコード設計。
主なトピック:
- Setup Scope: 1回だけ実行されるセットアップコードとクロージャによる状態管理の新概念
- Remix Events: カスタムインタラクションをイベントとして抽象化し、コンポーネントと同等に扱う
- Web標準: Fetch API、EventTarget、AbortController等のプラットフォーム機能を最大限活用
- 型安全なContext API: 再レンダリングを引き起こさず、Go to Definitionが効く設計
- Signal: 非同期処理でレースコンディションをシンプルに解決する仕組み
- その他: React Router継続, TypeScriptファースト, LLMフレンドリー etc...
(コード例あり)
3. 認知負荷を下げるテキストコミュニケーション
SlackやGitHubでのテキストコミュニケーションにおいて、読む負担を減らすための工夫を紹介。リンクの丸投げや指示語の多用を避け、結論を先に書く、箇条書きの過度な使用を控える、AI回答の丸投げを避けるなど実践的なアンチパターンと改善策を解説。
主なトピック:
- 結論を先に書く: 背景から順に説明せず、伝えたいことを最初に持ってくることで離脱を防ぐ
- リンク丸投げを避ける: URLだけでなく目的やサマリを添えて読む気持ちを明確にする
- AI回答の整理: ChatGPTの冗長な回答をそのまま共有せず、必要な部分だけ抽出して伝える
- 選択肢に番号を振る: 議論をスムーズにするため選択肢を番号付けして参照しやすくする
- 過度なテンプレート化を避ける: 空項目の羅列で退屈にならないよう必要最小限にする
- その他: 今北産業, 図解の活用, Pull Requestのdescription etc...
4. 会議で "理由" を聞かれた時に焦らないようにする
会議で理由を聞かれて焦る時の対処法を解説。質問の意図を確認し、理由をそのまま答え、わからなければ宿題として持ち帰るという3ステップを提示。取り繕うより潔く持ち帰る方が良く、場数を踏むことで対応力が向上する。事前の期待値調整も重要。
主なトピック:
- 意図の確認: 「どういう観点で気になっているか」を聞き、質問者の考えを理解して落ち着く
- 理由をそのまま答える: ファクトベースが理想だが、定性的な理由や意志でも構わない
- 宿題として持ち帰る: その場で取り繕わず「持ち帰ります」と潔く伝える方がネガティブに受け取られない
- フラットな関係性: 質問する側も相手に伝わるように聞く責務があることを理解する
- 事前の期待値調整: 会議前に仕上がり度や議論の目的を揃えておくことが重要
- その他: 場数を踏む, セルフ反省会, 質問フレーズの観察 etc...
