Blog

Web開発とフロントエンド技術に関する記事を探索しましょう

矢印キーによるフォーカス移動を宣言的に実装する `focusgroup` 属性

`focusgroup` 属性は、ツールバーやタブリストなどの複合ウィジェットにおける矢印キーのフォーカス移動を宣言的に実装する HTML 属性です。従来必要だった roving tabindex の JavaScript をブラウザに任せ、単一の Tab ストップ、折り返し、最後にフォーカスした項目の記憶などを提供します。この記事では Chrome 150 で利用可能になった `focusgroup` 属性の使い方を紹介します。

CSS Grid Lanes で Masonry レイアウトを実装する

CSS Grid Lanes は、高さの異なるアイテムを複数のレーンへ隙間なく配置するレイアウト方式です。`display: grid-lanes` を指定することで、JavaScript を使わずに Masonry レイアウトを実装できます。この記事では `display: grid-lanes` の基本的な使い方を紹介します。

最近の AI コーディングで実践している、設計を中心とした開発の進め方

AI コーディングエージェントの自律性が向上し、複数のエージェントを並行して動かすことが日常になったことで、開発の中で最も時間を使う工程が実装から設計へ移りつつあります。この記事では、設計セッション、Git worktree を使った並列実行、自律的な検証、AI によるコードレビューなど、最近の私が実践している開発の進め方を紹介します。

Next.js の Instant Navigations を試してみた

Next.js 16.3 Preview では、Instant Navigations という新機能が導入されました。画面遷移で即時表示できない箇所を開発時に検出し、修正を促すための機能です。この記事では Instant Navigations を実際に試してみた様子を紹介します。

Safari MCP サーバーでエージェントが Safari ブラウザを操作できるようにする

Web アプリケーションの開発には実ブラウザでの動作確認が必要不可欠です。Playwright CLI や chrome-devtools-mcp などエージェント向けのブラウザ操作ツールは多くが Chromium に依存しています。Safari Technology Preview 247 の MCP サーバーは、エージェントを Safari に接続し操作できるようにします。

AI SDK の MCP Apps 対応でインタラクティブな UI を返す

AI SDK の v7 では MCP Apps 対応が追加されました。AI モデルはツールを呼び出す際に `ui://` リソースが紐付けられていれば、アプリケーション側でその UI をサンドボックス化された環境でレンダリングすることができます。この記事では AI SDK の MCP Apps 対応を試してみた内容を紹介します。

AI エージェントフレームワーク Flue を試してみた

Flue は AI エージェントを構築するための TypeScript フレームワークです。ハーネス駆動のアーキテクチャを採用しており、エージェントの構築に必要な機能を包括的に提供しています。この記事では SRE エージェントを構築する例を通じて Flue の機能に触れていきます。

Deno で Desktop アプリを作れるようになっていた

Deno v2.9.0 以降で `deno desktop` コマンドが使えるようになりました。`deno desktop` コマンドは単一の TypeScript ファイルから Next.js プロジェクトまで、デスクトップアプリに変換できます。この記事では Deno でデスクトップアプリを作る方法について紹介します。

Vercel で Feature Flags を管理する

今日のアプリケーション開発において、Feature Flags(機能フラグ)は欠かせないツールとなっています。Vercel Flags を使用することで、Vercel 上でホストされているアプリケーションに Feature Flags を簡単に導入することができます。この記事では、Vercel Flags を使用して Vercel 上でホストされているアプリケーションに Feature Flags を導入する方法を試してみます。