azukiazusa.dev

Hey, I'm azukiazusa👋

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

ブログを読む About me
#React
#AI
#アクセシビリティ
#HTML
#Next.js
#MCP
#claude-code
#テスト
#OpenTelemetry
#Vitest
#SvelteKit
#GitHub Actions
#Bun
#Server Actions
#Zod
#playwright
#storybook
#msw
#書評
#Vite
#A2A
#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
#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
#マイクロフロントエンド
#html5
#Sentry

最新記事

自然言語で CI/CD パイプラインを定義する Agentic Workflows

Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。

仕様駆動開発を支える Spec Kit を試してみた

仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。

AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

すべての記事を見る
最近は 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 関数

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

TypeScript 5.5 で関数による型の絞り込みが改善される

CSS のメディアクエリで比較演算子（`<`, `>`, `<=`, `>=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。

CSS メディアクエリで比較演算子が使える

人気記事

  1. 仕様駆動開発を支える Spec Kit を試してみた
  2. AI コーディングエージェントの管理を行う Vibe Kanban を試してみた
  3. コーディングエージェントの能力を拡張する Serena を試してみた
  4. 自然言語で CI/CD パイプラインを定義する Agentic Workflows
  5. Claude Code の学習モードで自分の手でコードを書く練習をしよう
  6. Claude Code でカスタムサブエージェントを作成する
  7. Claude Code でカスタムスラッシュコマンドを作成する
  8. Claude Code Action で Claude Code を GitHub に統合しよう
  9. AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI
  10. コーディングエージェントの現状の整理とエンジニアの仕事の変化について

登壇資料

  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のリソースを操作し、アプリケーションをデプロイする方法を実践します。

すべての登壇資料を見る