CodingはCommodity化している。Engineeringは違う — 2026年 第17週 ウェブ開発
Cross-cutting frontend topics, tooling, and DX Compiled for immediate developer deployment.

AppをAgent-readyにする方法
JSON-RPC 2.0ベースのStreamable HTTPトランスポートでMCPサーバーを構築し、PKCEとDynamic Client Registrationを用いたOAuth 2.1で事前共有秘密なしに未知のエージェントを認証し、MCP Server Card・OAuth Protected Resource・API CatalogをはじめとするWell-knownパスにプロトコル検出メタデータを公開する手順を説明します。LLMフレンドリーなMarkdownコンテンツネゴシエーション、robots.txtボットアクセス制御、x402マイクロペイメント、Universal Commerce Protocol、Agentic Commerce Protocolも詳しく取り上げます。
Shopify Speed Optimization:本当のBottleneckを直す
fetchpriorityとimage_url Liquidフィルターの活用法も扱います。
AI AgentがDevtoolを見つけ、使い、悪用しないための3ルール

Cursor Agent Hook:各Turn後にLint・Build Check
sessionEndではなくstopフックを使う理由を説明します。stopは各モデルレスポンス後に実行され、followup_messageフィールドで失敗を次のユーザーメッセージとして再注入することで、エージェントが自身の出力を修正する自己修復ループを実現します。CursorのバンドルNode.jsがPATHの先頭に現れESMのrequireエラーを引き起こす問題、成功時にfollowup_messageを返すと無限ループになる問題、デバッグのechoがJSONのstdoutチャネルを汚染する問題など、3つの本番環境の落とし穴を詳細に解説します。
参加報告:Node.js Collaboration Summit 2026 London
stream/iterとして実験的出荷)、monkey-patchingパターンを置き換えるcore node:vfs Virtual File Systemモジュール提案が含まれます。AI支援コントリビューションのガバナンス、セキュリティチームを圧迫するAI生成の偽陽性セキュリティレポートの急増、OpenTelemetryの組み込みサポートの初期進捗、libuv v2マイグレーション計画も議論されました。
Vibe Codingを改善する方法
Scott TolinskiとWes Bosが、AIが生成したコードをより決定論的で保守しやすくするためのツールの全体像を紹介します。Rustで書かれたFallowを、デッドコード・循環依存・重複ブロック・サイクロマティック複雑度のホットスポット・ファイルごとの保守性スコアをLLMが読めるアウトプットで提供するオールインワンのコード品質ツールとして取り上げます。jscpdとKnip(重複・未使用エクスポート検出)、Project Wallace(CSS変数の監査)、StorybookのMCPサーバー(正規コンポーネント例)、Sentry CLIとSpotlight(リアルタイムエラー・トレース可視化)、StylelintとLightning CSSベースのカスタムリンターClint、VercelのAgent Browserも取り上げます。ホストはAIエージェントが無視する可能性のあるagents.mdの指示よりも、カスタムESLintプラグインによる決定論的な合否ルールの方が信頼できると強調します。
CodingはCommodity化している。Engineeringは違う
エージェント型コーディングツールはアプリケーションのスキャフォールディング、モジュールのリファクタリング、テスト生成を前例のない速度で実行できますが、著者はこれがコード生産を商品化するだけでエンジニアリングの判断力を代替するものではないと主張します。ボトルネックはコードを書くことから、問題を正しく定義すること、アーキテクチャの不変条件を守ること、ほぼ正確に見えて長期リスクをはらむ生成出力を見抜くことへと移行します。経験豊富なエンジニアは障害パターン・爆発半径・システム制約に関する知識でエージェント出力を増幅させる「スイートスポット」にいます。理解・実装・テスト・デバッグ・ドキュメント化という日常ループはすべてエージェントの介入で形が変わり、機械的な作業が圧縮されてアーキテクチャと責任に集中できるようになります。
Read Articlearrow_forwardVibe Codingを改善する方法
Scott TolinskiとWes Bosが、AIが生成したコードをより決定論的で保守しやすくするためのツールの全体像を紹介します。Rustで書かれたFallowを、デッドコード・循環依存・重複ブロック・サイクロマティック複雑度のホットスポット・ファイルごとの保守性スコアをLLMが読めるアウトプットで提供するオールインワンのコード品質ツールとして取り上げます。jscpdとKnip(重複・未使用エクスポート検出)、Project Wallace(CSS変数の監査)、StorybookのMCPサーバー(正規コンポーネント例)、Sentry CLIとSpotlight(リアルタイムエラー・トレース可視化)、StylelintとLightning CSSベースのカスタムリンターClint、VercelのAgent Browserも取り上げます。ホストはAIエージェントが無視する可能性のあるagents.mdの指示よりも、カスタムESLintプラグインによる決定論的な合否ルールの方が信頼できると強調します。
AppをAgent-readyにする方法
この包括的なガイドでは、WebアプリケーションをAIエージェントと相互運用可能にするために必要な標準スタック全体を解説します。JSON-RPC 2.0ベースのStreamable HTTPトランスポートでMCPサーバーを構築し、PKCEとDynamic Client Registrationを用いたOAuth 2.1で事前共有秘密なしに未知のエージェントを認証し、MCP Server Card・OAuth Protected Resource・API CatalogをはじめとするWell-knownパスにプロトコル検出メタデータを公開する手順を説明します。LLMフレンドリーなMarkdownコンテンツネゴシエーション、robots.txtボットアクセス制御、x402マイクロペイメント、Universal Commerce Protocol、Agentic Commerce Protocolも詳しく取り上げます。
Shopify Speed Optimization:本当のBottleneckを直す
このガイドはLighthouseスコアだけを追うのではなく、指標に関わらずShopifyストアを遅く感じさせる構造的なパフォーマンス問題を対象としています。ヒーロー画像を180 KB以下に抑え、ヒーロー動画の前に軽量なポスター画像を使用してLCPを9秒超から2.7秒に削減する方法、Swiper.jsのような重いカルーセルライブラリの代わりにカスタムCSSやJSソリューションを用いる方法を解説します。JavaScriptとアプリ肥大化にも同様に対処し、ページテンプレート別の条件付きスクリプトロード、非クリティカルスクリプトのdefer、540 KBのサードパーティカートを6 KBのカスタム実装に置き換える手法を紹介します。CSSのページ別分割、フォントサブセット化による40〜50%の容量削減、fetchpriorityとimage_url Liquidフィルターの活用法も扱います。
AI AgentがDevtoolを見つけ、使い、悪用しないための3ルール
この記事では「エージェント体験(AX)」を、AIエージェントが自律的に発見・操作・支払いできる開発者ツールを設計する分野として紹介します。Claude、ChatGPT、Geminiにわたる実証的な検索テストでは、各LLMが根本的に異なるチャネルから情報を取得することが判明しました。Claudeはベンダー比較ページ(43%)、ChatGPTはReddit(47%)、GeminiはGitHubリポジトリ(50%)を重視します。エージェントファーストのオンボーディングパターンは従来のサインアップファネルを逆転させ、Netlifyの匿名デプロイ後クレームモデルが1日数万件のエージェント主導デプロイを生み出しています。セキュリティも同等に重視され、501のMCPサーバーに対するWallarmの監査では96%に悪用可能な脆弱性が発見され、IPではなくactorタイプに基づく4段階の段階的信頼モデルが提唱されています。
READ_FULL_LOGarrow_forwardCursor Agent Hook:各Turn後にLint・Build Check
CursorのエージェントフックはIDEライフサイクルイベントにシェルスクリプトを接続し、手動コピーペーストなしに各エージェントターンの終了時にlintとビルドの検証を自動実行します。この記事ではsessionEndではなくstopフックを使う理由を説明します。stopは各モデルレスポンス後に実行され、followup_messageフィールドで失敗を次のユーザーメッセージとして再注入することで、エージェントが自身の出力を修正する自己修復ループを実現します。CursorのバンドルNode.jsがPATHの先頭に現れESMのrequireエラーを引き起こす問題、成功時にfollowup_messageを返すと無限ループになる問題、デバッグのechoがJSONのstdoutチャネルを汚染する問題など、3つの本番環境の落とし穴を詳細に解説します。
参加報告:Node.js Collaboration Summit 2026 London
Bloombergがロンドンで2026年最初のNode.js協働サミットを開催し、40名以上のコラボレーターが参加しました。主要な技術的議論には、v27からバージョン番号を暦年に合わせる新しいリリーススケジュール(同時リリースラインとメンテナー負担の削減)、明示的なバックプレッシャー戦略選択を持つasyncイテレーションベースの統合Streams API(v25.9.0でstream/iterとして実験的出荷)、monkey-patchingパターンを置き換えるcore node:vfs Virtual File Systemモジュール提案が含まれます。AI支援コントリビューションのガバナンス、セキュリティチームを圧迫するAI生成の偽陽性セキュリティレポートの急増、OpenTelemetryの組み込みサポートの初期進捗、libuv v2マイグレーション計画も議論されました。
第17週のウェブ開発一般の項目は、エージェント型コーディング時代における職業のアイデンティティを取り上げました。コーディングは商品化されつつあるがエンジニアリングの判断力はそうではないというエッセイが広く議論されました。ボトルネックはコードを書くことから、問題を正しく定義すること・アーキテクチャの不変条件を守ること・ほぼ正確なAI出力の長期リスクを見抜くことへと移行します。アプリをエージェント対応にするためのガイドは全プロトコルスタックを解説しました。JSON-RPC 2.0ベースのStreamable HTTPのMCPサーバー・PKCEとDynamic Client RegistrationのOAuth 2.1・Well-knownパスによるプロトコル発見(MCP Server Card・OAuth Protected Resource・API Catalog)・Markdownコンテンツネゴシエーション・robots.txtボットアクセス制御・x402マイクロペイメント・Universal Commerce Protocol・Agentic Commerce Protocolなどのコマースプロトコルが含まれます。
AI支援開発のツーリングも大きく取り上げられました。stopイベントとfollowup_messageフィールドを使ったCursorエージェントフックは各エージェントターン後の自己修復lint-buildループを実現し、Node.jsのPATH順序・成功時の無限ループ・JSON stdoutの汚染という落とし穴が文書化されました。Syntax.fmはRustベースのオールインワンコード品質ツールFallowとjscpd・Knip・Project Wallace・StorybookのMCPサーバーを紹介し、agents.mdの指示よりも決定論的なカスタムESLintプラグインが信頼できると強調しました。Evil MartiansのAX(エージェント体験)記事はClaude・ChatGPT・Geminiがそれぞれ根本的に異なるチャネルからドキュメントを取得し、501のMCPサーバーの96%にWallarm監査で悪用可能な脆弱性が発見されたことを報告しました。
パフォーマンスとインフラも取り上げられました。Shopify最適化ガイドは軽量なヒーロー動画ポスターとヒーロー画像を180 KB以下に保つことでLCPを9秒超から2.7秒に削減し、540 KBのサードパーティカートバンドルを6 KBのカスタム実装に置き換える方法を示しました。ロンドンで開催されたNode.js Collaboration Summit 2026は、v27から始まる暦年ベースのリリーススケジュール・実験的なasyncイテレーションベースのStreams API(v25.9.0のstream/iter)・提案されているnode:vfs Virtual File Systemモジュールをプレビューしました。
- エージェント型コーディングはコード生産を商品化しますが、問題を正しく定義し・アーキテクチャの不変条件を守り・ほぼ正確な生成出力の長期リスクを見抜ける経験豊富なエンジニアの価値を増幅させます。
- アプリをエージェント対応にするにはAPIだけでは不十分で、Streamable HTTPのMCPサーバー・PKCEとDynamic Client RegistrationのOAuth 2.1・Well-known発見パス・Markdownコンテンツネゴシエーションを含む完全なプロトコルスタックが必要です。
- followup_messageを使ったCursorのstopフックは自己修復エージェント型lintループを実現しますが、無限エージェントループを避けるためにPATHのサニタイズと成功時にfollowup_messageを返さないことが必須です。