ブログサイトのロゴsui Tech Blog

Welcome to the sui Tech Blog!

日々の開発で得た知見や、実験的な実装を記録する技術ブログです。
TypeScript に関する記事が中心です。

ブログを読む About me
agents-browserPlaywrightAI

AIエージェント向けに最適化されてたagents-browserをPlaywright MCPと比較検証してみた

agents-browserの「Up to 93% less context than Playwright MCP」は本当か気になったので、Yahoo! JAPANを対象にPlaywright MCPと比較してデータ削減率とトークン消費量を検証します。

記事を読む
Playwright

やはり俺のPlaywrightはまちがっている。

過去のプロジェクトから流用したPlaywrightのコードは「動いて」いました。しかし、偶然ドキュメントを読み直したとき、「動く」と「正しく動く」の間には設計思想の違いがあることに気づきました。page.evaluate()ではなくlocatorを使うべき理由、waitForNavigation()が非推奨である理由。公式ドキュメントには、単なるAPIリファレンスではなく「なぜこの方法が推奨されるのか」が書かれています。時間がない現実の中で、それでもドキュメントを読む価値とは何かを考えます。

記事を読む
ブログAI

図解から始める認知負荷との付き合い方

AI時代、文字を読む量が圧倒的に増えています。生成AIからの提案を承認する度に大量のテキストを読み込む認知負荷の高さに「もう無理だ」と感じた経験から、技術ブログに図解機能を実装しました。図解は「記憶の定着装置」として機能し、全体像を視覚的に示すことで認知負荷を下げます。本記事では、なぜ図解が有効なのか、そしてAIを活用してどう実装したのかを解説します。

記事を読む

Claude Code の出力で、スキル実行時は必ず Skill ツールが存在し、その後続メッセージとして isMeta: true プロパティが付与される。
skills を利用するように指示したのに isMeta プロパティがない場合、処理を停止するような Hooks の作成も検討できる。

Astro v5 のプリレンダリングされたエンドポイントでは、カスタム Response ヘッダーが本番ビルド時に無視される仕様がある。開発環境では以下のコードで正常に動作するが、本番ビルドでは charset=utf-8 が削除され、日本語が文字化けする。

const headers = new Headers({
  'Content-Type': 'text/markdown; charset=utf-8',
});
return new Response(body, {
  status: 200,
  headers, // 開発環境では有効、本番ビルドでは無視される
});