モダンフロントエンドをリードする会社、ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストしています。
Joined September 2011
- Tweets5.7K
- Following606
- Followers2.3K
- Likes3.6K
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸複数エージェントの使いこなし 前編 複数エージェントを使い分ける開発の現場
🔸Playwright MCPによるE2Eテストコードの生成 第2回 codegenでSPAのE2Eテストコードを記録する
🔸利用制限とつきあうAIコーディング モデルとエフォートの考え方
codegrid.net/issues/699/?utm…
#codegrid
【本日公開・明日朝まで無料】
AIエージェントの利用制限で手が止まること、ありませんか？
モデルもエフォートも「とりあえず最高設定」が正解とは限りません。
体験談を元に、使い分けるコツを紹介します。
codegrid.net/articles/2026-m…
#codegrid
ALT ダーク背景のタイトル画像で、中央に大きく「モデルとエフォートの考え方」、黄色の副題「利用制限とつきあうAIエージェントコーディング」があり、周囲にGPT・Claude・Luna・Solなどのモデル名と low/medium/high/xhighなどの性能ラベルが散在している。
【本日公開・明日朝まで無料】
AIにE2Eテストを書かせたくても、複雑な管理画面では操作手順を書き出すのがひと苦労！
Playwrightのcodegenなら、ブラウザで操作するだけでテストコードとして記録できます。
codegrid.net/articles/2026-p… #codegrid
ALT 管理画面のワイヤーフレームで、テストが複雑な操作になっているという図。左にページ一覧、中央に編集中のメインエリアと「ここに追加」や画像プレースホルダーのブロック、右に部品設定パネル（複製・削除など）、下に部品選択モーダルとページ削除確認ダイアログが表示されている。
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸複数エージェントの使いこなし 前編 複数エージェントを使い分ける開発の現場
🔸Playwright MCPによるE2Eテストコードの生成 第2回 codegenでSPAのE2Eテストコードを記録する
🔸利用制限とつきあうAIコーディング モデルとエフォートの考え方
codegrid.net/issues/699/?utm…
#codegrid
【本日公開・明日朝まで無料】ClaudeにE2Eテストを書かせたくても、複雑な管理画面では操作を言葉で伝えるのが難しくなります。そこで、codegenで操作を記録し、そのコードをClaudeに補正させる方法を2回に分けて解説します。今回はcodegenでの記録と、記録されたコードに残る課題を取り上げます：Playwright MCPによるE2Eテストコードの生成 - codegenでSPAのE2Eテストコードを記録する codegrid.net/articles/2026-p… #codegrid
【本日公開・明日朝まで無料】AIコーディングエージェントの利用制限に悩んでいませんか？モデルやエフォートは、高性能・高設定であればよいとは限りません。品質・待ち時間・利用量のバランスを考えながら、タスクに応じて適切に使い分ける方法を紹介します：利用制限とつきあうAIコーディング - モデルとエフォートの考え方 codegrid.net/articles/2026-m… #codegrid
【本日公開・明日朝まで無料】複数のエージェントを使うのは、速くするためだけではありません。コンテキストを汚さない、トークンを分散する、レビューの「忖度」を避ける。Claude CodeとCodexを使い分ける理由と環境を、エンジニア3人が語る座談会です：複数エージェントの使いこなし - 複数エージェントを使い分ける開発の現場 codegrid.net/articles/2026-t… #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
codegrid.net/issues/698/?utm…
#codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
codegrid.net/issues/698/?utm…
#codegrid
【本日公開・明日朝まで無料】ホーム画面から起動したサイトには、アドレスバーも戻るボタンもありません。「ホーム画面に追加」でアプリとして扱われると、見え方・OSからの扱い・使える機能がどう変わるのかを押さえます：「ホーム画面に追加」でできること - アプリ扱いになる条件 codegrid.net/articles/2026-p… #codegrid
【本日公開・明日朝まで無料】絵文字「👨👩👧👦」は1文字に見えますが、「.length」は「11」。このように見た目や意味として認識している単位とコード上の扱いがずれる文字列を、正しく切り分ける標準国際化API、Intl.Segmenterを解説します：Intl.Segmenterで文字と単語を正しく分割する - Intl.Segmenterの基本とその注意点 codegrid.net/articles/2026-i… #codegrid
【本日公開・明日朝まで無料】「学んでから作る」から「作ってから学ぶ」へ。AIエージェントで開発の順番が逆転した今、ワークフローの見直し、専門外の領域への広げ方、すぐ古くなるAI情報との距離の取り方を、筆者の経験から考えます：AIエージェントのススメ - AIエージェントを使った開発のまとめ その1 codegrid.net/articles/2025-a… #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
codegrid.net/issues/697/?utm…
#codegrid
【本日公開・明日朝まで無料】
CSS Gridで隙間に線を引くとき、空セルにまで線が伸びていたら不格好ですよね😅
rule-visibility-itemsのall / around / betweenを使い分ければ、空いている領域への線の出し方を細かく制御できます💡
codegrid.net/articles/2026-c… #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
codegrid.net/issues/697/?utm…
#codegrid
【本日公開・明日朝まで無料】auto-fillのカード一覧で最終行に空きができると、そこにも縦線が伸びてしまいます。rule-visibility-itemsで線を出す条件を制御する方法や、線の端をそろえるrule-insetを解説します：隙間に線を引くcolumn-rule/row-rule - 線の見え方を作り込むrule-visibility-itemsとrule-inset codegrid.net/articles/2026-c… #codegrid
【本日公開・明日朝まで無料】WorkersからD1やKV、R2といったデータベース・ストレージに、APIキーなしでつなぐ「バインディング」の仕組みと、動作を見守るためのログの機能を解説します：Webサイトホスティングで使うCloudflare Workers - Workersのバインディングとログ機能 codegrid.net/articles/2026-w… #codegrid
【本日公開・明日朝まで無料】Playwright MCPを使って、最小限の指示で壊れにくいE2Eテストコードを生成する方法を紹介します。テストコードに書くブラウザ操作を、生成の段階で実際にブラウザ上で実行して確かめられるため、精度の高いコードに仕上がります：Playwright MCPによるE2Eテストコードの生成 - 最小限の指示で生成する、保守性の高いE2Eテストコード codegrid.net/articles/2026-p… #codegrid
【Tips】
Claudeが同じ間違いを繰り返す「修正ループ地獄」に陥ったときの対処法はどれ？❓ 🔁
A. 3回目まで粘って修正を依頼する
B. 2回失敗したら/clearする
C. プロンプトを一切変えずに再試行する
【Tips】
正解は「B. 2回失敗したら/clearする」でした。
失敗した試みがコンテキストに蓄積すると、Claudeは「うまくいかないアプローチ」に引きずられます。失敗パターンを1文で伝えて、新しいコンテキストで再開しましょう💪
#codegrid #claudecode