azukiazusa.dev

Hey, I'm azukiazusa👋

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

ブログを読む About me
#AI
#MCP
#claude-code
#Next.js
#OpenTelemetry
#書評
#Bun
#Server Actions
#Zod
#A2A
#moonbit
#claude
#OpenAI
#Remix
#React Server Components
#figma
#MCP Apps
#Mastra
#ESLint
#Prisma
#Open UI
#Web Components
#React Aria
#Chrome
#開発
#Tailwind CSS
#Prometheus
#ChatGPT
#Vite+
#skill-creator
#agent skill
#WebHaptics
#触覚フィードバック
#paper
#chat-sdk
#Entire
#WebMCP
#Remotion
#luna
#signals
#Pencil
#TUI
#OpenTUI
#agent-browser
#motia
#lsp
#react-grab
#TanStack
#TanStack AI
#Web API
#URLPattern
#コンテキストエンジニアリング
#Apps SDK
#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

最新記事

新時代のフロントエンドツールチェイン Vite+ を試してみた

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。

CSS によるスクロールトリガーアニメーション

要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を使わずに CSS だけで実装を完結できるようになる `animation-trigger` という新しい CSS プロパティが登場しました。

Skill Create スキルを使用したスキルの作成と改善

オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます

すべての記事を見る
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. Skill Create スキルを使用したスキルの作成と改善
  2. 新しいデザインツール Pencil を試してみた
  3. Claude Code to Figma を使ってコードから Figma デザインを生成する
  4. Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline
  5. Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる
  6. Claude Code デスクトップで Worktree を作成するとき .worktreeinclude で .gitignore で除外されているファイルを含める
  7. iOS Safari で触覚フィードバックを実現する WebHaptics
  8. Claude Code のサンドボックス機能を試してみた
  9. AI エージェントのために CLI でブラウザを操作する agent-browser
  10. Web アプリケーションをツール化する WebMCP

登壇資料

  1. 2026

  2. React Tokyo Fes 2025

    コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか？

    LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。

  3. KMC交流会 LT

    学生時代に熱中したことが、社会人の今も生きている話

    学生時代に麻雀に熱中した経験から得た「上達のスキーマ」が、社会人になってからのプログラミング学習にも通じるという話。書籍での体系的な学習、プラトーの乗り越え方、生涯学習の大切さについて紹介します。

  4. 技育CAMPアカデミア

    探求の技術 なぜ新しい技術を学び続けるのか

    急速に進化する技術の世界において、いかに効果的に新しい技術を探求し、その知見を価値あるアウトプットに変換していくかについて、実践的な方法論を共有します。毎週の技術ブログ執筆と年間300冊の読書から得た知見を基に、技術者として成長し続けるための具体的なテクニックをお伝えします。

すべての登壇資料を見る