メインコンテンツへスキップ
ブログサイトのロゴsui Tech Blog

Blog

Total 116 posts
11分
AIClaudeCodeAstro

Claude Codeの変更履歴を自動で日本語解説するサイトを作った

Claude Codeは更新頻度が高く、英語のCHANGELOGを毎回追うのは大変です。日本語で自動解説してくれるサービスが見当たらなかったので、Gemini APIとGitHub Actionsで更新処理を自動化したWebサイトを作りました。

記事を読む
6分
ポエムAI

AIを使い倒す人間ほど、AI文章に萎える

24時間365日AIを使い倒している私が、技術記事のAI生成文章に感じる「ゾワッ」とする感覚を言語化しました。Markdown記法の残留、不自然なコロン、ビルドがコケるTypeScriptのコード。「またAIね」と萎える瞬間に潜む3つの感情と、使い手だからこそ分かる「AI臭さ」の正体、そしてAI時代に求める技術記事の姿を考えます。

記事を読む
6分
旅行ポエム

父島に全部賭けろ

片道24時間、週1便、乗船者800名。不便さが強制する「何もしない時間」が、他の観光地では得られない体験をくれる。二度訪れた父島の魅力を語ります。

記事を読む
5分
Playwrightagent-browserAI

Playwright CLI と agent-browser のどちらがトークン消費量が少ないか比較検証してみた

Playwright CLIとagent-browserで同一操作を行い、トークン消費量を比較しました。スナップショットをファイル出力してGrep検索する設計思想により、Playwright CLIはagent-browserより約40%のトークン削減を達成しています。本記事ではAIブラウザ操作ツールの設計思想の違いがコストに与える影響を検証します。

記事を読む
3分
agent-browserPlaywrightAI

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

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

記事を読む
7分
Playwright

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

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

記事を読む
6分
ブログAI

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

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

記事を読む
10分
ClaudeCodeAgentsSkills

Claude Codeへ「スキルを使って」と言うのに疲れたあなたへ

Claude CodeのAgent Skillsは、ベストプラクティスに従った実装を自動化する優れた仕組みですが、Claudeの推論による実行判定には限界があります。Playwrightを例に挙げると、「クリック操作を修正して」のような自然な指示では、descriptionに「Playwright」が含まれていてもスキルが起動しないことがあります。本記事では、UserPromptSubmitフックを活用し、キーワードマッチングによってスキルを確実に起動させる実装方法を解説します。

記事を読む
11分
RenovateGitHubActions

Renovate で作る「頑張らない」運用のすすめ

依存関係更新の手動対応をやめて、Renovate で自動化する方法をまとめました。クールダウン期間(minimum release age)を設定してサプライチェーン攻撃のリスクを回避しつつ、手間をかけずに安全性を維持する「頑張らない運用」の設計方針を紹介します。

記事を読む
12分
AstroNext.jsPlaywright

Next.js から Astro へ。拡張性を捨て、シンプルさを選んだ理由

ブログに「何でもできる」Next.jsは過剰スペックでした。新機能に追いつけず、Web標準APIとの相性に悩んだ末、SSGに特化したAstroへ移行しました。拡張性を捨て、「必要最小限」を選んだ技術選択の記録です。

記事を読む
9分
ClaudeCode

Claude Code にルールを強制させる Stop Hooks とBiome v2による仕組みづくり

AIに「ルールを覚えておいて」と頼むのは間違ったアプローチです。Claude CodeのHooksとBiome v2を使えば、規約違反を自動検知してAI自身に修正させる環境を構築できます。

記事を読む
5分
BiomeClaudeCode

Claude Code にコーディングルールを守らせるのは諦めて、全部 Biome に任せることにした

Claude Code の CLAUDE.md に記載したコーディング規約が守られない課題を、Biome v2.x の GritQL 機能を使って解決します。「引数が2個以上の場合はオブジェクト形式にする」といった独自ルールを Linter で機械的に強制することで、コンテキストウィンドウを圧迫せず、AI が確実にルールを遵守できる環境を構築する方法を解説します。

記事を読む