azukiazusa.dev

Hey, I'm azukiazusa👋

週に1回 Web 開発に関する記事をお届けします。フロントエンドに関する分野の記事が中心です。

ブログを読む About me
#React
#AI
#アクセシビリティ
#HTML
#MCP
#Next.js
#claude-code
#テスト
#OpenTelemetry
#Vitest
#SvelteKit
#GitHub Actions
#Bun
#Server Actions
#Zod
#playwright
#storybook
#msw
#A2A
#書評
#Vite
#OpenAI
#React Server Components
#Hono
#AngularJS
#npm
#Rust
#セキュリティ
#Vuetify
#Mastra
#ESLint
#Prisma
#Open UI
#Web Components
#React Aria
#Chrome
#開発
#Tailwind CSS
#Remix
#Prometheus
#Cloudflare Workers
#pnpm
#Webpack
#cagent
#AP2
#CI/CD
#仕様駆動開発
#Vibe Kanban
#POML
#MCP UI
#Qwen3-Coder
#serena
#Kiro
#Container Use
#v0
#nextjs
#vibe-coding
#AG-UI
#VoltAgent
#React Router
#Vercel
#Cloudflare
#ink
#llms.txt
#Baseline
#standard-schema
#パスキー
#WebAuthn
#Web Socket
#vlt
#OpenFeature
#axe-core
#Farm
#Effect-TS
#MistCSS
#Waku
#SafeTest
#設計
#Conform
#TypeSpec
#OpenAPI
#pagefind
#VSCode
#Git
#ElysiaJS
#モノレポ
#Promise
#WebAssembly
#WAI-ARIA
#superflare
#ChatGPT
#OGP
#ダークモード
#qwik-city
#qwik
#SanitizerAPI
#Fetch
#Histoire
#Yew
#マイクロフロントエンド

最新記事

MCP のツールアノテーションでユーザーにヒントを提供する

MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。

Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。

YAML ファイルで AI エージェントを構築する cagent

cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。

すべての記事を見る
browserslist は、フロントエンド開発において、どのブラウザをサポートするかを指定するためのツールです。これにより、開発者はターゲットとするブラウザの範囲を簡単に定義でき、CSS や JavaScript のトランスパイルやポリフィルの適用を自動化できます。

browserslist で Baseline を設定できるようになった

GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます

GitHub Actions で YAML アンカーを使う

最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。

pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ

コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。 しかし、　コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。

コーディングエージェントが参照するファイルを統一する AGENTS.md

従来の JavaScript では Cookie の管理は `document.cookie` を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また `document.cookie` は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに `document` オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。 このような問題を解決するために、非同期 API `CookieStore` が導入されました。`CookieStore` は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。

Cookie を管理する非同期 API CookieStore

Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。

Claude Code で前回の会話の続きを開始する

AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

Claude Code のタスクの完了を通知する方法

Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。

Vitest で型のテストを書く

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できるようになります。

CSS で関数を定義できるようになる

`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。

Bun v1.2 では package.json にコメントを書ける

TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではない」構文をエラーとして検知するためのものです。

TypeScript 5.8 で追加される erasableSyntaxOnly フラグ

Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。

Node.js で TypeScript を直接実行できるようになった

Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。

Testing Library の debug で出力される行数を多くする方法

人為的な遅延を発生させるために、`setTimeout` を Promise をラップする方法がよく使われています。これにより、`await` を使って任意の秒数処理を遅らせることができます。

Node.js では標準モジュールで Promise timer が使える

ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、`prefers-color-scheme` メディアクエリを使用せずに、`class` 属性を使ったスタイルの切り替えが行われます。

ユーザーのカラースキーマ設定を上書きする web preferences API の提案

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `undefined` 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。

TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全

今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を直接渡すことができるようになりました。

React v19 から forwardRef が不要になる

`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。

Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある

`::file-selector-button` 疑似要素を使用することで、`<input type="file">` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

CSS: ダークモードで値を切り替える light-dark 関数

人気記事

  1. Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする
  2. 仕様駆動開発を支える Spec Kit を試してみた
  3. コーディングエージェントの能力を拡張する Serena を試してみた
  4. AI コーディングエージェントの管理を行う Vibe Kanban を試してみた
  5. YAML ファイルで AI エージェントを構築する cagent
  6. Claude Code でカスタムスラッシュコマンドを作成する
  7. Claude Code でカスタムサブエージェントを作成する
  8. Claude Code の学習モードで自分の手でコードを書く練習をしよう
  9. Claude Code Action で Claude Code を GitHub に統合しよう
  10. AI エージェントのための Agent Payments Protocol (AP2) を試してみた

登壇資料

  1. 2025

  2. Claude Codeで開発と学習を両立する方法

    AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に

    生成AIの登場は私たちの仕事の進め方に大きな変化をもたらしました。より多くの仕事をこなせるようになった一方で、「自分の頭で考える」時間が減り、思考力や問題解決能力の低下が懸念されています。このような課題に対応するため、多くのAIサービスは、単に答えを提供するのではなく、ユーザー自身の思考を促す「学習モード」を実装しています。本発表では、Claude Codeの学習モードを例に、AIを学習パートナーとして効果的に活用する方法を探ります。

  3. 大吉祥寺.pm 2025

    2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について

    2025年現在、開発現場では「コードを書く」から「AIと協働する」への大転換が起きています。GitHub Copilotのような補完型から始まったAI支援は、今や自律的にタスクを遂行するエージェントへと進化しました。2025 年時点ではどのような類型のコーディングエージェントが存在しているか、コーディングエージェントの登場により私達エンジニアの仕事がどのように変化しているのか、急速な変化に伴いどのような課題が発生しているのかについて話します。そして数年後に、「2025年は確かに時代の転換点だったね」と振り返ってその瞬間に立ち会えたことを楽しめるようにしましょう。

  4. Cloudflare Workers Tech Talks in Kyoto #1

    バイブコーディング超えてバイブデプロイ〜Cloudflare MCP 実現する、未来のアプリケーションデリバリー

    バイブコーディングとは、AIエージェントが自律的にコードを生成・実行する技術です。Cloudflare Workers MCPを使って、AIエージェントがCloudflareのリソースを操作し、アプリケーションをデプロイする方法を実践します。

すべての登壇資料を見る