はてなブックマーク

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。 カルーセルは Web アプリケーションでよく使われる UI コンポーネントの 1 つです。複数の画像をスライド形式で表示する手法であり、ユーザーは左右にスクロールすることで操作できます。カルーセルは一般的な UI パターンであるにも関わらず、標準化された実装方法が存在し

TypeScript で MCP サーバーを実装し、Claude Desktop から利用する MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。多くの LLM ではユーザーに適切な回答を提供するために追加のコンテキスト情報を必要とします。例えば、今日の天気の情報をユーザーから求められたとしても LLM

TypeScript 製の AI エージェントフレームワーク Mastra Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りできます。Mastra は AI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Ma

Note 2025 年 3 月現在では llms.txt は標準化されていない仕様です。この記事に書かれている内容は今後の変更により古くなる可能性があります。 ChatGPT や Grok, Claude, Gimini などの大規模言語モデルはますますウェブサイトの情報に依存してきています。特に最近登場した Deep Research はエージェント型のモデルがウェブサイトを巡回し、多段階のリサーチを自動で実行できるように設計されています。Deep Research が効果的に機能するためには AI エージェントが効率的にウェブサイトの情報を取得できることが重要です。 しかし従来のウェブサイトは人間向けのマークアップが主であり、AI ボットが情報を収集する際には多くの障壁があります。装飾のための CSS, 広告, 複雑な JavaScript などの要素は、本質的な情報の抽出を困難にして

Note 2025 年 3 月現在 if() 関数は Chrome Canary で Experimental Web Platform Features フラグを有効にすることで利用可能です。 if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。 if() 関数の概要 CSS の if() 関数は引数に <条件>:<値> のペアのリストを取り、最初に <条件> が真となる値を返します。条件のリストは ; で区切られます。 .foo { color: if(style(--variant: dark): white; else: black); } <条件> には以下を指定できます。 supports()：指定した CSS の構文がサポートされている場合

Note Observable API は 2025 年 2 月現在 Chrome v135 以降で Experimental Web Platform features フラグを有効にしている場合のみ利用可能です。 Observable API は非同期イベントストリームを処理するための API です。EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。 .when() メソッドが呼び出された際に Observable インスタンスを返します。Observable インスタンスは rxjs の observable とよく似ています。.subscribe() メソッドが呼び出されると、Observable はイベントストリームを開始し、next ハンドラにイベントが通知されるたびにコール

ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール 2025.02.22 Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。 ブラウザによる CSS のサポート状況の差異は、Web 開発者にとって頭痛の種です。新しい CSS プロパティや値を使用する際には、それがどのブラウザでサポートされているかを確認する必要があります。Baseline はそのような問題を解決するためのプロジェクトです。ブラウザで利用可能な JavaScript や CSS のブラウザのサポート状況を明確化することで、We

ボタンが押し込まれた状態を表す Press Button の提案 2025.02.22 UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。 UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。代表的な例としてミュートボタンがあります。ミュートボタンは音声の入力をミュートにするためのボタンで、押し込まれた状態であればミュートになり、押し込まれていない状態であればミュートが解除されていることを表します。 今まではボタンが押し込まれた状態を表現するためにいくつかの

アップグレードされた CSS の `attr()` 関数を使う 2025.02.22 `attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。 attr() 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。よくある使われ方として data-* 属性の値を読み取りその値をコンテンツに表示するというものです。 <ul> <li data-fruit="🍎">Apple</li> <li data-fruit="🍌">Banana</li> <li

Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる 2025.02.22 Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。 Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。OpenTelemetry は分散トレーシングのためのオープンソースの規格です。OpenTelemetry の規格に従うことで、トレース・メトリクス・ログなどのテレメトリーデータをベンダーやツールにとらわれずに収集・エクスポートできるようになります。 一般的に OpenTelemetry を使用してテレメトリーデータを計装するにはプログラミング言語ごとに用意され

スキーマバリデーションライブラリの標準インターフェース standard-schema 2025.02.15 スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。 Zod や valibot, ArkType などを代表とするスキーマバリデーションライブラリはここ数年で人気を集めています。これらのライブラリは TypeScript の型システムを活用してスキーマを定義し、それに基づいてバリデーションを行います。バリデーションを行った結果は型安全に扱うことができるのが特徴です。 ユーザー入力のように外部からのデータを安全に扱いたいよう

パスキーによる認証をブラウザで実装してみる 2025.02.08 パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。 パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、フィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。また指紋認証や顔認証のように簡単な操作で Web サービスにアクセスできるようになるため、ユーザビリティの向上にもつながります。 パスキーは 2022 年頃から企業や団体により対応が表明

React Server Components を手軽に扱うフレームワーク react-server 2025.02.01 react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。 2025 年 2 月現在 React Server Components を扱う方法として最も知られているのは Next.js を利用する方法でしょう。実際に Next.js は React Server Components が React の Canary の機能である段階で、すでに安定した機能として提供されていました。このため React Server Components が N

型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ

@view-transition { navigation: auto; } これにより NavigationType のうち traverse, push, replace のいずれかに該当するナビゲーションが行われた際にページ遷移アニメーション発生します。push, replace の場合にはブラウザの UI のより発生したナビゲーションではなく、ユーザーの操作によって開始されたものである必要があります。 実際に動作している動作を確認してみましょう。デフォルトではすべての要素に対してフェードイン/フェードアウトのアニメーションが適用されていることがわかります。 keyframes アニメーションの適用 :view-transition-old と :view-transition-new という擬似要素を使用して、遷移前後の要素に対して異なるアニメーションを適用できます。 :view-

Note <ViewTransition> コンポーネントは 2025 年 1 月現在実験的な機能です。将来にわたって API が変更される可能性があります。 React の実験的なバージョンとして <ViewTransition> コンポーネントが導入されました。これは View Transition API を宣言的な方法で使用できるようにするものです。 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。単一ページアプリケーション（SPA）においては document.startViewTransition() メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。<ViewTransition> コンポーネントを使用はこの API を React で使用するための方法です。 <ViewTr

scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。 scroll-state() はコンテナクエリの一種であり、コンテナ要素のスクロール状態に応じてスタイルを変更できます。 よくある使い方としては、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。従来は要素が sticky によりスナップされているかどうかを JavaScript を使って判定する必要がありましたが、scroll-state() を使うことで CSS だけで実現できます。 スクロールがスタックされている状態 はじめに con

ポップオーバーのネスト 複数のポップオーバーが同時に表示されることはないルールには例外があります。ポップオーバーがネストされている場合です。 <button popovertarget="popover1">Show Parent</button> <div id="popover1" popover> <p>This is Parent</p> <button popovertarget="popover2">Show Child</button> <div id="popover2" popover> <p>This is Child</p> </div> </div> 子のポップオーバーは親のポップオーバーの子孫要素として存在しているため、子のポップオーバーが表示されている間に親のポップオーバーを閉じることはありません。 ポップオーバーのネストは popover=hint 属性を使用

AI エディター Cursor を試してみる AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。 生成 AI の台頭はプログラミングの世界に大きな変革をもたらしました。我々開発者は AI の助けを借りながらまるでペアプログラミングをしているかのようにコードを書くことができます。私自身も普段から GitHub Copilot を使ってコードを書いています。コードを書いている最中に AI がコードを補完してくれる体験は、素早いフィードバックを得られるため非常に効率的です。 コードを選択してテストコードやドキュメントを生成したり、コードのリファクタリングを行

GitHub Actions で再利用可能なワークフローを作成する 2025.01.04 GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワークフローを作成する手順を紹介します。 GitHub Actions を使って CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。例えばデプロイを行うワークフローでは、staging 環境と production 環境とで異なるタイミングでデプロイを行う必要があるため、それぞれのワークフローを別々のファイルに記述することでしょう。このような場合記述される処理は環境に依存する部分以外の多くの部分は共通していることが多いで

2024 年に読んでよかった本 2024.12.28 私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。 私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。 響け！ユーフォニアムシリーズ 「響け!ユーフォニアム」はアニメ化もされた作品であり、名前を聞いたことがある方も多いかもしれません。アニメ版では映像表現を活かした壮大な演奏シーンが印象的ですが、原作小説版では登場人物の心情描写がより繊細に描かれていることが特徴です。特に以下の文章が主人公の心情を比喩表現でうまく表しており、深く感銘を受けました。 その拍子に、自身の髪が頬へと刺さった。チクリとした痛みが皮膚の表面を走る。指で髪を払うと、癖毛交じりの自身の髪はあまりにたやすく抜け落ちた。床に落ちる一本の髪を、久美子

多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。入れ子されたリンクとは以下のようなものです。 このような UI ではカード全体をクリックした場合にはカードのリンク先に遷移し、カード内のタグをクリックした場合にはタグのリンク先に遷移するという挙動が期待されます。この挙動を簡単に HTML で実装すると、以下のように <a> 要素が入れ子になります。 <a href="/new-product" 　class="card"> <a class="tag" href="/tag/tech">Tech</a> <div> <h2>New Product</h2> <p>...</p> </div> </a> しかし、このようにインタラクティブな要素（<a> や <button> など）の子要素にインタラクティブな要素を配置することは HTML 仕様上許可されていません1

Zod を使って OpenAI の構造化された出力を扱う 2024.12.07 OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。

Tailwind CSS v4 で導入される CSS First Configurations 2024.11.30 Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。

アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。 ソフトウェアテストの手法の 1 つに、スナップショットテストがあります。スナップショットテストは、テスト対象の出力を保存しておき、次回のテスト時に保存した出力と比較することで、テストが通ったかどうかを判断する手法です。フロントエンドのテストでは、特に UI のテストにおいてスナップショットテストがよく使われます。 コン

この記事ではクライアント側の vlt について紹介します。vlt は npm vsr を使用せずに npm registry からパッケージをインストールできます。 vlt をインストールする 以下のコマンドを実行することで、vlt をインストールできます。現在 vlt は Node.js の v20 と v22 でサポートされています。 npm install -g vlt 以下のコマンドで正常にインストールされたか確認してみましょう。 vlt --version 0.0.0-0.1730830331789 vlt でパッケージをインストールする vlt は npm と同じように、install コマンドを使ってパッケージをインストールできます。デフォルトでは public npm registry からパッケージをインストールするため、npm で公開されているパッケージをそのまま利用で

Next.js で OpenTelemetry を使用した計装を行う この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。 OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。 Next.js では instrumentation.ts ファイルを使用することで、監視やログツールの計装を設定できます。また、Next.js ではアプケーションのパフォーマンスを計測できるように、ren

Next.js の "use cache" ディレクティブによるキャッシュ制御 Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。 Next.js の App Router では最もパフォーマンスの高いオプションで提供されるために、デフォルトでキャッシュが有効になっており、必要に応じてオプトアウトする設計でリリースされました。例えば global fetch 関数に patc