CodeGrid

モダンフロントエンドをリードする会社、ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストしています。

[CodeGrid @CodeGrid]

【リニューアルのお知らせ】
CodeGridのサイトをリニューアルしました🎉

本文を読みやすく整え、ライト／ダークモードの切り替えに対応。
バックナンバーは月ごとに並ぶようになり、カテゴリーや過去の記事もアーカイブとして整理したので、読みたい記事にたどり着きやすくなっています。

今後もより読みやすくなるように機能を追加していく予定です。
お楽しみに‼️

https://t.co/qJmaKIITP0

[CodeGrid @CodeGrid]

【リニューアル作業終了のお知らせ 】
お知らせしておりましたCodeGridのリニューアル作業は完了しました。
サイトはアクセスできる状態ですので、どうぞご利用ください。

https://t.co/JqAi0Bu3k5

#codegrid

[CodeGrid @CodeGrid]

【リニューアル作業によるサイト停止のお知らせ】
本日10:30〜11:30までの予定で、予定しておりましたCodeGridリニューアルを行います。
そのため、この時間帯はサイトへのアクセスができません。
ご不便をおかけしますがご了承ください。

進行状況は随時、XとBlueskyでお知らせいたします。

#codegrid

[CodeGrid @CodeGrid]

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸複数エージェントの使いこなし 前編 複数エージェントを使い分ける開発の現場
🔸Playwright MCPによるE2Eテストコードの生成 第2回 codegenでSPAのE2Eテストコードを記録する
🔸利用制限とつきあうAIコーディング モデルとエフォートの考え方
https://t.co/IOygCRXEj4
#codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】
AIエージェントの利用制限で手が止まること、ありませんか？
モデルもエフォートも「とりあえず最高設定」が正解とは限りません。
体験談を元に、使い分けるコツを紹介します。

https://t.co/SA4rPzBHmo
#codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】
AIにE2Eテストを書かせたくても、複雑な管理画面では操作手順を書き出すのがひと苦労！
Playwrightのcodegenなら、ブラウザで操作するだけでテストコードとして記録できます。

https://t.co/m1JjG25FcV #codegrid

[CodeGrid @CodeGrid]

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸複数エージェントの使いこなし 前編 複数エージェントを使い分ける開発の現場
🔸Playwright MCPによるE2Eテストコードの生成 第2回 codegenでSPAのE2Eテストコードを記録する
🔸利用制限とつきあうAIコーディング モデルとエフォートの考え方
https://t.co/J1xU9NM1Qo
#codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】ClaudeにE2Eテストを書かせたくても、複雑な管理画面では操作を言葉で伝えるのが難しくなります。そこで、codegenで操作を記録し、そのコードをClaudeに補正させる方法を2回に分けて解説します。今回はcodegenでの記録と、記録されたコードに残る課題を取り上げます：Playwright MCPによるE2Eテストコードの生成 - codegenでSPAのE2Eテストコードを記録する https://t.co/fvx7kHj1Si #codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】AIコーディングエージェントの利用制限に悩んでいませんか？モデルやエフォートは、高性能・高設定であればよいとは限りません。品質・待ち時間・利用量のバランスを考えながら、タスクに応じて適切に使い分ける方法を紹介します：利用制限とつきあうAIコーディング - モデルとエフォートの考え方 https://t.co/TKkgmqPA3y #codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】複数のエージェントを使うのは、速くするためだけではありません。コンテキストを汚さない、トークンを分散する、レビューの「忖度」を避ける。Claude CodeとCodexを使い分ける理由と環境を、エンジニア3人が語る座談会です：複数エージェントの使いこなし - 複数エージェントを使い分ける開発の現場 https://t.co/3yUbiiW0D4 #codegrid

[CodeGrid @CodeGrid]

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
https://t.co/U0jKMGVHrB
#codegrid

[CodeGrid @CodeGrid]

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
https://t.co/tXBOPlaVkK
#codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】ホーム画面から起動したサイトには、アドレスバーも戻るボタンもありません。「ホーム画面に追加」でアプリとして扱われると、見え方・OSからの扱い・使える機能がどう変わるのかを押さえます：「ホーム画面に追加」でできること - アプリ扱いになる条件 https://t.co/SOD4Ow75Xs #codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】絵文字「👨‍👩‍👧‍👦」は1文字に見えますが、「.length」は「11」。このように見た目や意味として認識している単位とコード上の扱いがずれる文字列を、正しく切り分ける標準国際化API、Intl.Segmenterを解説します：Intl.Segmenterで文字と単語を正しく分割する - Intl.Segmenterの基本とその注意点 https://t.co/IJmF8Qx6bA #codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】「学んでから作る」から「作ってから学ぶ」へ。AIエージェントで開発の順番が逆転した今、ワークフローの見直し、専門外の領域への広げ方、すぐ古くなるAI情報との距離の取り方を、筆者の経験から考えます：AIエージェントのススメ - AIエージェントを使った開発のまとめ その1 https://t.co/Pi3q1hChyI #codegrid

[CodeGrid @CodeGrid]

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
https://t.co/jY8rNXfJLq
#codegrid

[CodeGrid @CodeGrid]

【Tips】
dialog要素はEscキーで勝手に閉じてしまいます。確定ボタンを押すまでは閉じさせたくない…そんなときはclosedby="none"が便利です

Safariはまだ未対応（Chrome・Firefoxは対応済み）なので、keydown + event.preventDefault()のフォールバックも忘れずに👍

#codegrid #html

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】
CSS Gridで隙間に線を引くとき、空セルにまで線が伸びていたら不格好ですよね😅

rule-visibility-itemsのall / around / betweenを使い分ければ、空いている領域への線の出し方を細かく制御できます💡

https://t.co/qvNZPQv7Xe #codegrid

[CodeGrid @CodeGrid]

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
https://t.co/6nyGyP3F1V
#codegrid

[CodeGrid @CodeGrid]

【本日公開・明日朝まで無料】auto-fillのカード一覧で最終行に空きができると、そこにも縦線が伸びてしまいます。rule-visibility-itemsで線を出す条件を制御する方法や、線の端をそろえるrule-insetを解説します：隙間に線を引くcolumn-rule/row-rule - 線の見え方を作り込むrule-visibility-itemsとrule-inset https://t.co/fAM02GXNTi #codegrid