はてなブックマーク

パスキーによる認証をブラウザで実装してみる 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 要素として使用することが可能になります。

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコン

Chrome の組み込み AI の Summarization API を試してみる 2024.10.13 Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。 Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるよ

Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを使いまわし、Jest などのテストランナーを用いてたテストを行うことができましたが、複雑なセットアップが必要でした。 また Vitest では ブラウザモード により、ヘッドレスブラウザ上で Storybook のテストを高速に実行できる点が特徴です。ヘッドレスブラウザ上でテストを実行することにより、例えば jsdom や happy-dom などのシミュレーションを使用する方法と比べて、実際のブラウザでの挙動をよ

Note CloseWatcher API は 2024 年 9 月 28 日現在 Chrome, Edge v126 以降でのみ利用可能です。 ダイアログやポップアップ、ピッカー、通知などの UI はユーザーによって閉じられることが想定されています。このような UI は閉じるボタンによって閉じられる他に、デバイス固有のメカニズムによっても閉じられることが期待されています。例えば、キーボードでは Esc キーを押すことで、Android では戻るボタンを押すことで UI を閉じることができます。 ブラウザの標準の要素を使用している場合、これらのメカニズムは自動的に提供されます。しかし、開発者が独自の UI を作成する場合、これらのメカニズムを実装する必要があり、困難な作業です。CloseWatcher API は、これらのメカニズムを提供するための API です。ユーザーにより閉じるアクシ

Note 2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発

Note calc-size() は 2024 年 9 月 14 日時点で Chrome v129 で #enable-experimental-web-platform-features フラグを有効にすることで利用可能です。 CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。アニメーションを適用するためには、具体的な値を指定する必要があるためです。そのため、JavaScript を使って要素の高さを計算してアニメーションを実装することが一般的でした。 このような問題を解決するために、calc-size() 関数が提案されました。この関数は calc() とよく似ていますが、calc-size() は auto, min-content, max-content, fit-content, stre

アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作

フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる 2024.08.31 OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになります。この記事では OpenFeature の React SDK を使ってフィーチャーフラグを評価する方法を紹介します。

@axe-core/playwright によるアクセシビリティテストの自動化 2024.08.18 axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。 今書いているコードがアクセシビリティ上の問題を持っていないかどうかを確認するために、Lint ツールによる機械チェックが有効です。eslint-plugin-jsx-a11y や Markuplint といったツールを導入することで、コンポーネント単位で静的にコードを解析してアクセシビリティの問題を検出できます。このような Lint ツールは、code を書いている最中に即座にフィードバックを受けるこ