はてなブックマーク

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

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 などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ

MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール 2025.01.18 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。単一ページアプリケーション（SPA）においては document.startV

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 で張り付いたときに境界線を出す 2025.01.18 scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。

ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。 popover 属性を使用すると HTML のみを使用してアクセシブルなポップオーバーを作成できます。ポップオーバーの作成は非常に簡単です。 ポップオーバーを表示する要素に popover 属性を追加する ポップオーバーをトリガーする要素に popovertarget 属性を追加する popovertarget の属性の値には popover 属性を持つ要素の id を指定する また、ポップオーバーをより細かく制御するために popover 属性に値を設定することもできます。現在は auto と manual の 2 つの値がサポートされています。 Chrome Beta 133 では 3 番目の値として hint が追加されました。popover=hint はユーザー

AI エディター Cursor を試してみる 2025.01.11 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 ファイル内で行うことができるようになります。

export const Button = ({ children }) => { - return <button className="btn">{children}</button> + return <button className="button">{children}</button> } しかし、スナップショットテストではクラス名の変更によりテストが失敗することになります。このように、スナップショットテストは外部から見た振る舞いが変わらないことを確認するのには向いていません。コンポーネントの内部実装に変更を加えるたびにスナップショットの更新が求められるため、そのうちにスナップショットテストの結果が軽んじられてしまうことがあります。 Playwright の Aria snapshots Playwright の Aria snapshots はコンポーネントのスナップショッ

新しいパッケージマネージャーの vlt を使ってみる 2024.11.16 vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。

Next.js で OpenTelemetry を使用した計装を行う 2024.11.10 この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。

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

JavaScript でスタイルシートを構築する CSSStyleSheet 2024.10.26 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ

react-to-web-component を使って React コンポーネントを Web Components に変換する 2024.10.20 @r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。