# azukiazusa のテックブログ2

> このブログは [azukiazusa](https://github.com/azukiazusa1) によって運営されている技術ブログです。主に Web フロントエンド周辺の技術について書いています。

## Blog Posts

- [ブログで llms.txt を提供してみた](https://azukiazusa.dev/blog/llms-txt.md): 従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題となっています。LLM に適したコンテンツを提供するために Answer.AI の共同創業者である Jeremy Howard 氏により `llms.txt` というファイルが提案されました。
- [インラインで条件分岐する CSS の if() 関数](https://azukiazusa.dev/blog/inline-conditional-css-if-function.md): if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。
- [ブラウザで非同期イベントストリームを処理する Observable API](https://azukiazusa.dev/blog/observable-api-for-handling-asynchronous-event-streams-in-the-browser.md): Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。
- [ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール](https://azukiazusa.dev/blog/require-baseline-eslint-rule-to-validate-css-not-widely-supported-in-browsers.md): Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。
- [アップグレードされた CSS の `attr()` 関数を使う](https://azukiazusa.dev/blog/upgraded-css-attr-function.md): `attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。
- [ボタンが押し込まれた状態を表す Press Button の提案](https://azukiazusa.dev/blog/proposal-press-button.md): UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。
- [Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる](https://azukiazusa.dev/blog/deno-v2-2-opentelemetry.md): Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。
- [Prisma で OpenTelemetry のトレースデータを計装する](https://azukiazusa.dev/blog/prisma-opentelemetry-trace.md): Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。
- [スキーマバリデーションライブラリの標準インターフェース standard-schema](https://azukiazusa.dev/blog/schema-validation-library-standard-interface-standard-schema.md): スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。
- [パスキーによる認証をブラウザで実装してみる](https://azukiazusa.dev/blog/implement-path-key-in-browser.md): パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。
- [React Server Components を手軽に扱うフレームワーク react-server](https://azukiazusa.dev/blog/react-server.md): react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。
- [型安全にクエリパラメーターを扱う nuqs](https://azukiazusa.dev/blog/type-safe-query-string-parameters-with-nuqs.md): フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。
- [ダイアログの Light dismiss を有効にする `<dialog closedby>` 属性](https://azukiazusa.dev/blog/dialog-closedby-attribute-for-light-dismiss.md): `<dialog closedby>` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。
- [React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する](https://azukiazusa.dev/blog/declarative-page-transition-animation-with-react-viewtransition-component.md): `<ViewTransition>` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。
- [MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール](https://azukiazusa.dev/blog/view-transition-css-at-rule-for-page-transition-animation-in-mpa.md): View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。
- [scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す](https://azukiazusa.dev/blog/scroll-state-function-to-show-border-when-sticky.md): scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。
- [ユーザーにヒントを表示するための `popover=hint` 属性](https://azukiazusa.dev/blog/popover-hint-attribute.md): ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint` はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では `popover=hint` 属性について詳しく見ていきます。
- [AI エディター Cursor を試してみる](https://azukiazusa.dev/blog/try-ai-editor-cursor.md): AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。
- [GitHub Actions で再利用可能なワークフローを作成する](https://azukiazusa.dev/blog/github-actions-reusable-workflow.md): GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワークフローを作成する手順を紹介します。
- [2024 年に読んでよかった本](https://azukiazusa.dev/blog/books-read-in-2024.md): 私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。
- [カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案](https://azukiazusa.dev/blog/link-area-delegation-proposal.md): 多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。しかし、このような UI では HTML 仕様に違反していたり、ハッキーな手法で実装されていることがあります。Open UI コミュニティでは Link Area Delegation という提案を行っており、標準化された方法で入れ子のリンクを実装することで UX やアクセシビリティを損なうことを防ぐことを目的としています。この記事では Link Area Delegation の内容について紹介します。
- [MSW で Web Socket のリクエストをモックする](https://azukiazusa.dev/blog/msw-mock-web-socket-request.md): Mock Service Worker (MSW) の v2.6.0 から Web Socket のリクエストをモックすることができるようになりました。Web Socket のサポートのリクエストは 2020 年から存在しており、多くの議論の末 4 年の歳月を経てリリースされた機能となります。この記事では、MSW で Web Socket のリクエストをモックする方法を紹介します。
- [Zod を使って OpenAI の構造化された出力を扱う](https://azukiazusa.dev/blog/zod-openai-structured-output.md): OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。
- [Tailwind CSS v4 で導入される CSS First Configurations](https://azukiazusa.dev/blog/tailwind-css-v4-css-first-configurations.md): Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。
- [アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう](https://azukiazusa.dev/blog/playwright-aria-snapshot.md): Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。
- [新しいパッケージマネージャーの vlt を使ってみる](https://azukiazusa.dev/blog/new-package-manager-vlt.md): vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。
- [Next.js で OpenTelemetry を使用した計装を行う](https://azukiazusa.dev/blog/instrumentation-with-opentelemetry-in-nextjs.md): この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。
- [Next.js の "use cache" ディレクティブによるキャッシュ制御](https://azukiazusa.dev/blog/cache-control-with-use-cache-directive-in-nextjs.md): Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。
- [JavaScript でスタイルシートを構築する CSSStyleSheet](https://azukiazusa.dev/blog/cssstylesheet-to-build-stylesheets-in-javascript.md): CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。
- [react-to-web-component を使って React コンポーネントを Web Components に変換する](https://azukiazusa.dev/blog/react-to-web-component.md): @r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。
- [HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM](https://azukiazusa.dev/blog/declarative-shadow-dom.md): 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。
- [Chrome の組み込み AI の Language Detection API で言語を判定する](https://azukiazusa.dev/blog/chrome-internal-ai-language-detection-api.md): Language Detection API は Chrome に組み込まれた AI により、クライアントサイドで言語を判定するための提案です。この API を利用することで、テキストの言語を判定することが可能になります。
- [Chrome の組み込み AI の Summarization API を試してみる](https://azukiazusa.dev/blog/try-chrome-internal-ai-summarization-api.md): Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。
- [Storybook と Vitest の統合したコンポーネントテスト](https://azukiazusa.dev/blog/storybook-and-vitest-integration.md): Storybook v8.3 以降、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。Vitest を使用することで複雑なセットアップが不要になります。また、推奨されているブラウザモードを使用することで、実際のブラウザでの挙動をより正確に再現できます。
- [UI を閉じる動作を処理する CloseWatcher API](https://azukiazusa.dev/blog/close-watcher-api.md): CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。
- [スタイルをカスタマイズ可能な新しい `<select>` 要素](https://azukiazusa.dev/blog/customizable-select-element.md): 従来の `<select>` 要素は CSS を利用したスタイルを適用することができないため、多くの開発者にとって課題となっていました。この問題を解決するために新しい既存の `<select>` 要素をカスタマイズする手段が提案されました。この疑似要素を利用することで、開発者は `<select>` 要素のスタイルをカスタマイズをオプトインできるようになります。
- [`calc-size()` や `interpolate-size: allow-keywords;` で `height: auto;` な要素のアニメーションをサポートする](https://azukiazusa.dev/blog/calc-size-animation.md): CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーションを実装する方法を紹介します。
- [アクセシビリティが考慮された React Aria のドラッグアンドドロップ](https://azukiazusa.dev/blog/react-aria-drag-and-drop.md): React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。
- [フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる](https://azukiazusa.dev/blog/openfeature-react-sdk.md): OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになります。この記事では OpenFeature の React SDK を使ってフィーチャーフラグを評価する方法を紹介します。
- [React Aria でアクセシブルなコンポーネントを作成する](https://azukiazusa.dev/blog/react-aria-accessible-component.md): React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリティを最優先した設計となっているのが特徴です。ヘッドレス UI ライブラリを用いて UI コンポーネントを実装することで、開発者はビジネスロジックやデザインに集中することができます。
- [@axe-core/playwright によるアクセシビリティテストの自動化](https://azukiazusa.dev/blog/axe-core-playwright.md): axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。
- [box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない](https://azukiazusa.dev/blog/box-shadow-focus-ring-not-visible-in-high-contrast-mode.md): フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。
- [CSS の `reading-flow` プロパティで要素の読み上げ順を制御する](https://azukiazusa.dev/blog/css-reading-flow-property.md): Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `reading-flow` プロパティ個の問題を解決するためのプロパティです。見た目上の順序に従って読み上げ順を制御することができます。
- [CSS でランダムな値を扱う `random()` と `random-item()` 関数](https://azukiazusa.dev/blog/css-random-function.md): `random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数は引数に渡したリストの中からランダムに 1 つの値を返します。
- [新しいビルドツールの Farm](https://azukiazusa.dev/blog/new-build-tool-farm.md): Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundling というものを採用しており、モジュールのネットワークリクエスト数を削減するため、20 ~ 30 のファイルにバンドルするという特徴があります。
- [CSS の `@property` ルールでカスタムプロパティを定義する](https://azukiazusa.dev/blog/define-custom-properties-with-css-property-rule.md): CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カスタムプロパティに誤った値が代入されることを防いだり、グラデーションのアニメーションなど、従来は実装が難しかった機能をサポートすることができます。
- [スタイルの適用範囲を限定する CSS の `@scope` ルール](https://azukiazusa.dev/blog/scope-rule-in-css.md): `@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
- [CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する](https://azukiazusa.dev/blog/manage-styles-structurally-with-css-cascade-layer.md): CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。
- [CSS で条件分岐を行う `@when/@else` ルール](https://azukiazusa.dev/blog/when-else-rule-in-css.md): `@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。
- [SVG アイコンの表示に mask-image CSS プロパティを使用する](https://azukiazusa.dev/blog/use-mask-image-css-property-to-display-svg-icons.md): mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。
- [Chrome の 組み込み AI Gemini Nano を試してみる](https://azukiazusa.dev/blog/try-chrome-internal-ai-gemini-nano.md): Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。
- [CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール](https://azukiazusa.dev/blog/starting-style-rule-for-css-transitions.md): `@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーションが適用されない、`display: none` から他の値に変更した場合にアニメーションが適用されないといった問題があります。`@starting-style` ルールを使用することでこれらの問題を解決できます。
- [scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する](https://azukiazusa.dev/blog/scrollbar-gutter-css-property-to-prevent-screen-jitter-due-to-scroll-bar-switching.md): 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。
- [SvelteKit チュートリアル - 記事投稿サイトを作ってみよう](https://azukiazusa.dev/blog/sveltekit-tutorial-create-a-blog-site.md): SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。
- [Svelte v5 で導入されるスニペット機能](https://azukiazusa.dev/blog/svelte-v5-snippet-feature.md): Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができます。スニペットを呼び出す際には `@render` ディレクティブを使用します。またスニペットは単なる値として扱われるため、コンポーネントの Props として渡すことができます。
- [楽観的更新を行うための React の useOptimistic フック](https://azukiazusa.dev/blog/react-use-optimistic-hook.md): React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。
- [Svelte v5 における イベントハンドラの変更点](https://azukiazusa.dev/blog/svelte-v5-event-handlers.md): Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。
- [Svelte v5 で導入された Runes によるリアクティビティシステム](https://azukiazusa.dev/blog/svelte-reactivity-system-with-runes.md): Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になると複雑性が増すという問題がありました。Runes は Svelte のリアクティビティシステムをより柔軟にし、アプリケーションの規模が大きくなってもシンプルさを保つことを目指しています。
- [エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS](https://azukiazusa.dev/blog/typescript-library-for-safer-error-handling-and-async-operations-effect-ts.md): Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。
- [Next.js 型安全なルーティングを使う](https://azukiazusa.dev/blog/nextjs-typed-routes.md): Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。
- [Remix v2.9 で導入された Single Fetch](https://azukiazusa.dev/blog/single-fetch-in-remix.md): Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能です。Single Fetch は v2.9 ではフィーチャーフラグとして提供されており、v3 以降ではデフォルトの挙動となります。
- [コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）](https://azukiazusa.dev/blog/relative-css-units-based-on-container-elements.md): コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。
- [ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning](https://azukiazusa.dev/blog/css-anchor-positioning.md): CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。
- [Promise や Context から値を読み取る use React フック](https://azukiazusa.dev/blog/promise-context-value-react-hook.md): React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値を同期的に読み取ることができます。その他の React フックと異なり、`if` 文やループ内で呼び出すことができる点が特徴として挙げられます。
- [親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS](https://azukiazusa.dev/blog/container-style-query-in-css.md): CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。
- [CSS から React コンポーネントを生成する MistCSS](https://azukiazusa.dev/blog/css-to-react-component-with-mistcss.md): MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。
- [単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader](https://azukiazusa.dev/blog/unit-test-visual-screen-reader.md): Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうかをテストできます。なお、Virtual Screen Reader はあくまでスクリーンリーダーの挙動を模倣したものであり、現実で使われているスクリーンリーダーによるテストを代替するものではないことに注意してください。
- [フォームのアクセシビリティを考える](https://azukiazusa.dev/blog/form-accessibility.md): 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。
- [React Server Components を使うためのミニマムなフレームワーク Waku](https://azukiazusa.dev/blog/react-server-components-minimal-framework-waku.md): Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。Waku もまた React Server Components に対応しているため、最小限の構成で React Server Components を使いたい場合に適しています。
- [新しい UI テストの手法を提供するテストライブラリ SafeTest](https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach.md): SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。
- [技術の素振りのために記事を書く](https://azukiazusa.dev/blog/write-articles-for-technical-practice.md): 技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェクトで使えるかどうか調査するといった事項があげられるでしょう。ただ素振りするだけではぼんやりと頭に知識が入っている状態になりがちですが、他者への説明というアウトプットを意識することで、コードを書くことによって得られた知見を整理できるようになります。
- [初心者向けの単純なルールを作る](https://azukiazusa.dev/blog/beginner-friendly-simple-rules.md): 新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複雑な部分を隠蔽することですべての開発者にとってコードをコミットしやすくなります。
- [type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform](https://azukiazusa.dev/blog/type-safe-and-progressive-enhancement-form-library-conform.md): Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions や Remix に対応しています。
- [フルスタック Web フレームワーク HonoX を使ってみる](https://azukiazusa.dev/blog/full-stack-web-framework-honox.md): HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。
- [Tailwind CSS を使う時に一緒に入れたいライブラリ](https://azukiazusa.dev/blog/tailwind-css-libs.md): Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します
- [Hono で Server-Sent Events によるストリーミングを実装する](https://azukiazusa.dev/blog/hono-streaming-response.md): Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。
- [TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec](https://azukiazusa.dev/blog/typescript-like-syntax-for-openapi-schemas.md): TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエンドポイントを定義します。
- [Bun でクロスプラットフォームなシェルスクリプト](https://azukiazusa.dev/blog/bun-cross-platform-shell-script.md): Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。
- [Remix の SPA モード](https://azukiazusa.dev/blog/remix-spa-mode.md): Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。
- [静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind](https://azukiazusa.dev/blog/static-site-search-engine-and-ui-library-pagefind.md): Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能を追加できます。
- [2023 年に読んでよかった本](https://azukiazusa.dev/blog/books-i-read-in-2023.md): 年末なので 2023 年のまとめっぽい記事を書きたくなりました。今年は 1 年間でおおよそ 300 冊の本をよんだようです（そのうち 3 割ほどはラノベなのですが...）。その中でも特に印象に残った本を紹介します。
- [input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://azukiazusa.dev/blog/input-type-checkbox-switch.md): スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。
- [OpenTelemetry Collector をカスタムビルドする](https://azukiazusa.dev/blog/custom-build-opentelemetry-collector.md): 本番環境では OpenTelemetry Collector Contrib を使用せず、必要なコンポーネントのみを含むようにカスタムビルドすることが推奨されています。この記事では、OpenTelemetry Collector をカスタムビルドする方法について紹介します。
- [CSS だけで動くスクロールドリブンアニメーション](https://azukiazusa.dev/blog/scroll-driven-animation.md): Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。
- [Storybook v8 の React Server Components サポート](https://azukiazusa.dev/blog/storybook-v8-react-server-components.md): Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。
- [MSW v2 で `HttpResponse.json()` の型がおかしいときの対処法](https://azukiazusa.dev/blog/msw-v2-httpresponse-json-type-error.md): MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることがあります。その場合には、`tsconfig.json` の `compilerOptions.lib` に `dom` を追加するのが一時的な対処法です。
- [React Server Components のテスト手法](https://azukiazusa.dev/blog/server-components-testing.md): 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。
- [HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案](https://azukiazusa.dev/blog/combobox-element.md): コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`<combobox>` 要素は、HTML の標準でコンボボックスを実現することを目的としています。
- [なぜ Server Actions を使うのか](https://azukiazusa.dev/blog/why-use-server-actions.md): Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `<button>` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Server Actions の是非について語る時、導入の背景にユーザー体験の向上があるという観点を忘れてはいけません。また、セキュリティ上の観点についてどのように考えるべきでしょうか？
- [パッケージマネージャーを npm に移行するときには `npm install --package-lock-only` コマンドを使うとよい](https://azukiazusa.dev/blog/use-the-npm-install-package-lock-only-command-when-migrating-package-managers-to-npm.md): 既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。
- [Server Actions の戻り値には JSX を使える](https://azukiazusa.dev/blog/server-actions-return-jsx.md): Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server Actions の戻り値に JSX を使うことができます。ただし、公式にサポートされている仕様ではないので、思わぬバグを踏む、将来追加される機能に対応しないおそれがあることを理解した上で、使うかどうかを判断する必要があります。
- [Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する](https://azukiazusa.dev/blog/use-form-state-to-display-error-messages-in-server-actions-forms.md): Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。
- [GitLens で特定のコミットを除外する](https://azukiazusa.dev/blog/exclude-specific-commits-from-github-history.md): GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
- [JavaScript なしでインタラクションを追加する Invokers](https://azukiazusa.dev/blog/invokers-to-add-interactions-without-javascript.md): Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。
- [URL が有効かどうかを判定する `URL.canParse()` メソッド](https://azukiazusa.dev/blog/url-canparse-method.md): `URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `try...catch` 文による判定よりも簡潔に記述できます。
- [:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う](https://azukiazusa.dev/blog/user-valid-and-user-invalid-pseudo-classes.md): ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。
- [forcusgroup で矢印キーによるフォーカスナビゲーションを実装する](https://azukiazusa.dev/blog/focusgroup-arrow-key-focus-navigation.md): カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。`focusgroup` の提案は、このようなキーボード操作を独立して使用できるプリミティブとして提案されています。この機能を利用することで、開発者は JavaScript を用いることなく一貫したフォーカスナビゲーションを実装できます。
- [`<details>` 要素の `name` 属性による排他的なアコーディオンの実装](https://azukiazusa.dev/blog/details-name-attribute-accordion.md): `<details>` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。
- [よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素](https://azukiazusa.dev/blog/selectlist-element-for-a-more-customizable-select-box.md): `<selectlist>` 要素は、デザインをカスタマイズできなかった従来の `<select>` 要素の問題を解決するために Open UI グループにより提案されている要素です。`<selectlist>` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。
- [`history.replaceState()` にはブラウザによって呼び出し回数制限がある](https://azukiazusa.dev/blog/history-replacestate-rate-limit.md): `history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API はブラウザにより呼び出し回数に制限が設けられており、使い方を誤ると予期せぬ挙動が発生するおそれがあります。
- [モーダルの開閉状態を URL で管理する](https://azukiazusa.dev/blog/manage-modal-state-with-url.md): モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。
- [Bun の Web フレームワーク ElysiaJS のチュートリアル](https://azukiazusa.dev/blog/elysiajs-tutorial.md): ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事では、ElysiaJS を使って簡単なタスク管理アプリの Web API を作成してみます。
- [Bun workspace で始めるモノレポ生活](https://azukiazusa.dev/blog/bun-workspace.md): Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。
- [Bun のマクロを使ってフィーチャートグルを実装する](https://azukiazusa.dev/blog/use-bun-macro-to-differentiate-new-features.md): Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装してみましょう。
- [Bun の Plugins で CSV ファイルを直接 import する](https://azukiazusa.dev/blog/import-css-file-directly-in-bun-plugin.md): Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れることが紹介されています。
- [OpenTelemetry Collector の Connector を使ってログをメトリックに変換する](https://azukiazusa.dev/blog/convert-logs-to-metrics-with-opentelemetry-collector-connector.md): OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に Connector を使用します。例えば、あるパイプラインはログのパイプラインのエクスポーターとメトリックのパイプラインのレシーバーとして動作します。このような場合、Connector はログをメトリックに変換する役割を担います。
- [最小限のコードで動く最も汚いコードから始める](https://azukiazusa.dev/blog/start-with-the-ugliest-code-that-works.md): コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。
- [OpenTelemetry を使用して Node.js アプリケーションを計装する](https://azukiazusa.dev/blog/instrumenting-Node-js-applications-with-open-telemetry.md): OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。この記事では Node.js アプリケーションを計装して Prometheus にデータを送信する方法を紹介します。
- [await は Promise 以外のオブジェクトでも値を取り出せる](https://azukiazusa.dev/blog/await-is-not-only-for-promise.md): await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。
- [【React】メモ化したコンポーネントに children を渡すと効果がなくなる](https://azukiazusa.dev/blog/react-memoized-component-children.md): React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.memo の使い方を誤ると意図しない再レンダリングが発生してしまうことがあります。ここではメモ化したコンポーネントに children を渡すと効果がなくなるというケースについて説明します。
- [アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか](https://azukiazusa.dev/blog/prefers-reduced-motion-or-application-settings.md): prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。
- [【書評】RustとWebAssemblyによるゲーム開発は Rust 開発における設計を学べる良書](https://azukiazusa.dev/blog/rust-wasm-game-dev-book.md): 本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。
- [グラフのアクセシビリティについて考える](https://azukiazusa.dev/blog/graph-accessibility.md): `<canvas>` や `<svg>` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。
- [React.memo でメモ化したコンポーネントはモック関数が使えない](https://azukiazusa.dev/blog/react-memo-mocked-component-cannot-use-mock-function.md): テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation のようなモック関数が使えません。
- [Document Picture in Picture で任意の要素を Picture in Picture する](https://azukiazusa.dev/blog/document-picture-in-picuture-any-element.md): Document Picture-in-Picture は、`<video>` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロールを使用したり、プレイリストとともに動画を PiP することが挙げられます。
- [スナップショットテストとアサーションテスト](https://azukiazusa.dev/blog/snapshot-test-vs-assertion-test.md): この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。
- [pnpm でパッケージにパッチを当てる](https://azukiazusa.dev/blog/pnpm-patch.md): `pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。
- [aria-label を使いすぎない](https://azukiazusa.dev/blog/do-not-use-aria-label-too-much.md): aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。
- [スクリーンリーダーに配慮したテキスト表記](https://azukiazusa.dev/blog/screen-reader-friendly-text-notation.md): 文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。
- [ポップオーバー API で JavaScript を使わずにポップアップを表示する](https://azukiazusa.dev/blog/popover-api.md): Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。
- [Vue.js でジェネリックコンポーネントを使う](https://azukiazusa.dev/blog/vue-generic-component.md): Vue.js 3.3 から `<script setup>` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。
- [GIF アニメーションの使用を控える](https://azukiazusa.dev/blog/avoid-using-gif-animation.md): 技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。
- [list-style: none スタイルを指定した ul 要素には list ロールを指定すべき](https://azukiazusa.dev/blog/list-style-none-styled-ul-element-should-have-a-list-role.md): WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、`<ul>` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言するべきです。
- [Vitest のブラウザテスト](https://azukiazusa.dev/blog/vitest-browser-test.md): Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。
- [Next.js の Server Actions について](https://azukiazusa.dev/blog/nextjs-server-action.md): Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。
- [SvelteKit のフォーム操作](https://azukiazusa.dev/blog/sveltekit-form-action.md): SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリッチなユーザー体験を追加できます。例えば、フォームを送信した後ページ全体の再読み込みを行わずに、フォームの送信結果を表示することができたり、バリデーションメッセージを即座に表示できたりします。
- [Array.prototype.with() とは](https://azukiazusa.dev/blog/what-is-array-prototype-with.md): `Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は変更されず、新しい配列のコピーが返されます。
- [Tailwind CSS のダークモードで System, Light, Dark を切り替える](https://azukiazusa.dev/blog/tailwind-css-dark-mode-system-light-dark.md): ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。
- [Next.js の Interception Routes について](https://azukiazusa.dev/blog/nextjs-interception-routes.md): Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。
- [Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた](https://azukiazusa.dev/blog/tried-superflare-a-full-stack-toolkit-for-cloudflare-workers.md): Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。
- [HTML の仕様に search 要素が追加された](https://azukiazusa.dev/blog/the-search-element-has-been-added-to-the-html-specification.md): HTML Standardに新しい`<search>`要素が追加された。これまで、ARIAには`<search>`に相当するHTML要素がなかったため、`<div role="search">`しか代替要素がなかった。新たに`<search>`要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、`<search>`要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。
- [ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう](https://azukiazusa.dev/blog/it-may-be-helpful-to-provide-an-example-when-you-want-to-fix-the-output-format-in-chatgpt3.md): ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され、回答は通常、「例」に基づいた形式で得られる。
- [TypeScript で網羅性をチェックする](https://azukiazusa.dev/blog/exhaustive-checks-in-typescript.md): パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラーとなります。TypeScript にはパターンマッチがないため、網羅性の検査は行われません。ですが、TypeScript では `never` 型を利用することで網羅性の検査を行うことができます。
- [SvelteKit で環境変数を使う](https://azukiazusa.dev/blog/using-environment-variables-with-sveltekit.md): SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使用すると、型安全に環境変数を参照できる、公開してはいけない値をクライアントから参照できなくなるなどのメリットを得られます。
- [React は javascript スキームを使った XSS を防ぐことができない](https://azukiazusa.dev/blog/react-javascript-xss.md): React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介します。
- [Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎](https://azukiazusa.dev/blog/web-accessibility-basics-every-web-application-engineer-needs-to-know.md): ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。
- [TypeScript + ESModules の開発環境をシュッと作る](https://azukiazusa.dev/blog/typescript-esmodules.md): ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。
- [React Hook Form で Zod を使う時の 5 つパターン](https://azukiazusa.dev/blog/react-hook-form-zod-5-patterns.md): React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します
- [SvelteKit でページ遷移時のプログレスバーを表示する](https://azukiazusa.dev/blog/sveltekit-navigate-progressbar.md): SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で画面遷移した時にプログレスバーを表示したい場合には NProgress が最適です。コンパクトな JavaScript ライブラリでフレームワークを選ばず利用できます。この記事では SvelteKit で NProgress を使用する方法を紹介します。
- [アクセシビリティに考慮したツールチップを実装する](https://azukiazusa.dev/blog/accessible-tooltip.md): ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの操作をブロッキングするものではありません。ユーザーがマウスのホバー外すかフォーカスが外れた場合にツールチップは非表示となります。
- [focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる](https://azukiazusa.dev/blog/focus-css-focus-visible.md): :focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。  それでは、JavaScript の focus()メソッドによりフォーカスされた場合には、`:focus-visible` 擬似クラスは適用されるのでしょうか？実はこれは最後 `focus()` メソッドが呼ばれる前に要素にフォーカスがあったかどうかにより異なります。
- [テストコード内では条件分岐を書かないようにする](https://azukiazusa.dev/blog/avoid-writing-conditional-branches-in-the–test-code.md): 誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコードの中に入り込んだ例を見てみましょう。
- [無効にしたボタンにフォーカスさせたいときには aria-disabled を使う](https://azukiazusa.dev/blog/use-aria-disabled-to-give-focus-to-disabled-button.md): 例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `<button>` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコントロールを無効にする一般的に期待されるすべての機能を提供するため、多くの場合はこの属性を使用するべきです。しかし `disabled` 属性には 1 つ問題点が存在します。それは Tab キーによるフォーカスができなくなるという点です。
- [単体テストの単位はコードではなく振る舞いである](https://azukiazusa.dev/blog/the-unit-of-unit-testing-is-behavior-not-code.md): 単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る舞いが壊れていないことを保証してくれる度合いです。この耐性が高ければ、開発者は安全にコードを変更できます。  この記事では、単体テストをコード単位で書いた場合と振る舞い単位で書いた場合をそれぞれ提示して、リファクタリングに対する耐性がどのように異なるのかを見ていきます。
- [今すぐできる Web アクセシビリティ改善](https://azukiazusa.dev/blog/accessibility-improvements-you-can-make-now.md): アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。  ですが、完璧な対応を目指すのではなく、少しづづ改善できるところから進めることこともできます。実際にやってみると、簡単な HTML や CSS のコードの修正でもよい改善を得られたりします。  この記事では比較的低コストで実践入門できるアクセシビリティの改善を紹介します。
- [Web フロントエンドの実装において本来の機能を損なってはいけない](https://azukiazusa.dev/blog/do-not-compromise-html-functionality-in-your-web-front-end-implementation.md): データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。
- [Satori + SvelteKit で OGP 画像を自動生成する](https://azukiazusa.dev/blog/satori-sveltekit-ogp-image.md): Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、このOGP 画像を生成する工程を自動化する仕組みが必要となります。Satori は記事のタイトルなどをもとに動的 OGP 画像を生成するユースケースのために使用できます。
- [TailwindCSS のダークモードでページ読み込み時に一瞬ライトモードで表示されてしまうときの対応法](https://azukiazusa.dev/blog/what-to-do-when-tailwindcss-is-momentarily-displayed-in-light-mode-in-dark-mode.md): ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。
- [Pa11y CI でアクセシビリティテストを GitHub Actions で実行する](https://azukiazusa.dev/blog/pa11y-ci-githubactions.md): Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類がありますが、その中でも Pa11y CI は CI 上で実行することにフォーカスしています。
- [モノレポで GitHub Actions の jest coverage report を動かす](https://azukiazusa.dev/blog/monorepo-github-actions-jest-coverage-report-action.md): jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。  この記事では yarn workspaces 使用して作成したモノレポ構築のレポジトリで jest coverage report を動かしてみます。
- [TypeScript 4.9 で in 演算子による型の絞り込みが改善された](https://azukiazusa.dev/blog/typescript-4-9-in.md): TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。
- [React Router の defer で重要なデータを先に描画する](https://azukiazusa.dev/blog/react-router-defer.md): あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではないので、それらのデータの取得を待つ必要がありません。  この記事では React Router の loaderを使用して重要なデータの完了のみを待機する方法を試してみます。
- [【React】アクセシビリティに考慮したタブを実装する](https://azukiazusa.dev/blog/react-accessible-tab.md): タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。
- [【React】アクセシビリティに考慮したアコーディオンを実装する](https://azukiazusa.dev/blog/react-accessible-accordion.md): アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。  アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく　使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います
- [【React】アクセシビリティに考慮したリストボックスを実装する](https://azukiazusa.dev/blog/Implement-accessibil-listbox-in-react.md): リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。
- [Qwik City でブログアプリを作る](https://azukiazusa.dev/blog/qwik-city-blog-app.md): Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。
- [イベントのバブリングは DOM ツリーではなく React ツリーに従う](https://azukiazusa.dev/blog/event-bubbling-follows-the-react-tree-not-the-dom-tree.md): イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。
- [【React】state のリフトダウンパターン](https://azukiazusa.dev/blog/react-state.md): React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します
- [Jest で beforeunload イベントをテストする](https://azukiazusa.dev/blog/jest-beforeunload.md): beforeunload イベントをテストする方法を紹介します
- [CSS 擬似クラス「:focus-within」](https://azukiazusa.dev/blog/css-pseudo-class-focus-within.md): :focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。
- [アクセシブルなダイアログに必要なこと](https://azukiazusa.dev/blog/dialog-accessibility.md): ダイアログをアクセシビルに実装するための要件を確認しましょう。
- [Sanitizer API で HTML を安全に使用する](https://azukiazusa.dev/blog/sanitizer-api-html.md): ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer API という仕様が策定されました。Sanitizer API により外部ライブラリの依存無しで XSS の対策が可能となります。
- [Hono + Cloudflare Workers で REST API を作ってみよう](https://azukiazusa.dev/blog/hono-cloudflare-workers-rest-api.md): Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。  Hono の特徴としては以下の点が挙げられています。  - ウルトラファスト - 依存関係なし - ミドルウェア - TypeScript - マルチプラットフォーム
- [Fetch Upload Streaming でチャットアプリを作ってみる](https://azukiazusa.dev/blog/fetch-upload-streaming.md): Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の `body` に ReadableStream を渡せるようになります。
- [AngularJS のチュートリアルを React にリプレイスしてみた③](https://azukiazusa.dev/blog/angularjs-react-3.md): それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。
- [AngularJS のチュートリアルを React にリプレイスしてみた②](https://azukiazusa.dev/blog/angularjs-react-2.md): AngularJS のチュートリアルを React にリプレイスします。今回の記事では AngularJS のコンポーネントをすべてリプレイスして、angular-resorce の代わりに API クライアントを実装します。
- [AngularJS のチュートリアルを React にリプレイスしてみた①](https://azukiazusa.dev/blog/angularjs-react.md): AngularJS のチュートリアルを React にリプレイスします。
- [pnpm は npm と何が違うのか](https://azukiazusa.dev/blog/pnpm-npm.md): pnpm は npm、yarn と並ぶ JavaScript のパッケージマネージャーです。pnpm と言う名前は「performant npm」に由来します。
- [MSW の実践活用例](https://azukiazusa.dev/blog/examples-of-msw-practice-Applications.md): msw の実践で活用する例を紹介します
- [Volar で Vuetify2.x  の補完を効かせる](https://azukiazusa.dev/blog/volar-vuetify2-x.md): Volar + Vuetify 2.x を利用する場合、型定義ファイルを作成してグローバルコンポーネントを定義する必要があります。
- [【TypeScript】Zod でスキーマ宣言とバリデーションを実施する](https://azukiazusa.dev/blog/schema-declaration-and-validation-in-zod.md): [Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。  一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。  また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。
- [おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！](https://azukiazusa.dev/blog/typescript-no-unchecked-indexed-access.md): TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。  具体的には、配列に対するインデックスアクセスやインデックスシグネチャを通じたプロパティのアクセスは常に `undefined` とのユニオン型となります。
- [Deno Web フレームワーク Fresh チュートリアル](https://azukiazusa.dev/blog/fresh-tutorial.md): Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また、Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。
- [Atomic CSS エンジン - UnoCSS](https://azukiazusa.dev/blog/atomic-css-engine-unocss.md): UnoCSS はフレームワークではなく、Atomic CSS エンジンです。全ては柔軟性とパフォーマンスを考慮して設計されています。UnoCSS にはコアユーティリティはなく、すべての機能はプリセットで提供されます。
- [Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire](https://azukiazusa.dev/blog/histoire-a-ui-component-cataloging-tool-from-Vite.md): Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴があります。
- [Jest Preview がけっこーすごい](https://azukiazusa.dev/blog/jest-preview.md): Jest Preview とは Jest で実行中のテストに debug() 関数を仕込むことで、実行中のテストが作成した HTML をブラウザでプレビューしながらデバッグできるライブラリです。
- [Playwright でコンポーネントテスト](https://azukiazusa.dev/blog/playwright-component-testing.md): Playwright は E2E テストのための Node.js フレームワークです。v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまりもともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。
- [Tailwind CSS ベースの UI フレームワークという選択肢](https://azukiazusa.dev/blog/tailwind-css-ui-library-option.md): この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。  その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験している方も多いのではないでしょうか？
- [Node.js の標準 API にテストランナーが追加された](https://azukiazusa.dev/blog/node-js-api.md): JavaScript のテストランナーといえば、Jest　がデファクトスタンダードと言えるでしょう。最近は Vitest と呼ばれる新たなテストランナーも登場していますが、しばらくは Jest が使われ続けられることでしょう。  そんな中、Node.js 18 から標準 API としてテストランナーが組み込まれました。まだ実験的な機能ではありますが、サードパーティのライブラリを使用せずに扱えることもあって注目を集めています。
- [Rust の魅力に感じた点](https://azukiazusa.dev/blog/what-i-found-attractive-aboutr-rust.md): 最近は [Rust](https://www.rust-lang.org/) と呼ばれるプログラミング言語を趣味として触っています。[SWC](https://swc.rs/) や [Rome](https://rome.tools/) のように Rust で作成されたフロントエンドツールが増えていることから興味を持ったのですが、実際に触ってみて Rust が高い人気を誇る理由がよく分かるようになりました。  この記事では私が Rust を触ってみて魅力に感じた点を列挙していきます。
- [markuplint で構文チェックを始めよう](https://azukiazusa.dev/blog/start-syntax-checking-with-markuplint.md): HTML の構文チェックを実施するには適切なツールを導入するのがよいでしょう。この記事では markuplint と呼ばれる HTML の静的解析ツールを紹介します。markuplint は JSX(React),Vue,Svlete のようなテンプレートエンジンにも対応しています。
- [Node.js のバージョン管理には Volta がよい](https://azukiazusa.dev/blog/node-js-volta.md): 皆さん Node.js のバージョン管理ツールには何を使っておりますでしょうか？上記の中でも私がオススメするのは [volta](https://volta.sh/) です。volta は 1.0 がリリースされたのが2020年12月と比較的新しいツールです。
- [npm workspace で始めるモノレポ生活](https://azukiazusa.dev/blog/Starting--monorepol-with-npm-workspace.md): workspace は複数のパッケージ（`package.json`）をレポジトリを管理するために使用されます。このようなレポジトリは**モノレポ**として知られています。
- [君は return と await return の違いを理解して使っているか](https://azukiazusa.dev/blog/return-await-return.md): `Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。
- [import type { ... } from "./module" とは何者何か](https://azukiazusa.dev/blog/import-type-from-module.md): TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか？  これは Type-Only imports and export と呼ばれる機能で TypeScript3.8 より導入されました。これは名前の通りモジュールから型情報のみをインポートするために使用されます。これは通常の利用用途ではあまり考慮する必要はないのですが、特定の問題に立ち向かうために利用されることがあります。
- [anonymous default export はやめたほうがいいかもね](https://azukiazusa.dev/blog/anonymous-default-export.md): `anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。
- [msw でリクエストを検証する方法](https://azukiazusa.dev/blog/msw-request-assertions.md): msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。
- [Storybook 単体でインタラクションテストを実施する](https://azukiazusa.dev/blog/storybook-testing.md): Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。  `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができます。  以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行することができるようですのでこちらを試してみます。
- [Web フロントエンドエンジニアなら当然 Rust も書けますよね？？](https://azukiazusa.dev/blog/web-rust.md): 本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。
- [Q：v-for の key に 配列のインデックスを使うのは犯罪ですか？#Shorts](https://azukiazusa.dev/blog/v-for-key-as-index.md): 結論：  - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。
- [Q：TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか？#Shorts](https://azukiazusa.dev/blog/q-typescript-shorts.md): TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。
- [Node.js に fetch がやってきた](https://azukiazusa.dev/blog/node-js-fetch.md): Node.js で fetch が使えるようになる
- [アクセシビリティを自動で検査する仕組みを整える](https://azukiazusa.dev/blog/vue-a11y-testing.md): 様々な方法でアクセシビリティを自動で検査します
- [Storybook の interaction testing と jest を組み合わせる](https://azukiazusa.dev/blog/compose-storybook-interaction-testing-jest.md): Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。  `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。  `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。
- [Vite だと require() が使えないよ〜](https://azukiazusa.dev/blog/vite-require.md): 皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。  Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。
- [フロントエンドのテストのモックには msw を使うのが最近の流行りらしい](https://azukiazusa.dev/blog/using-msw-to-mock-front-end-tests-seems-to-be-the-latest-trend.md): 最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されているのか見ていきましょう。
- [【Vue.js】ref vs reactive](https://azukiazusa.dev/blog/vue-js-ref-vs-reactive.md): さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。  `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。
- [Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな](https://azukiazusa.dev/blog/testingframework-vitest.md): Vitest は Vite ベースの JavaScript のテスティングフレームワークです。
- [Vuetify 3 Alpha の主な変更点](https://azukiazusa.dev/blog/vuetify-3-alpha-mejar-changes.md): [Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。  現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。
- [Nuxt3 の新しい機能いろいろ](https://azukiazusa.dev/blog/nuxt3-new-features.md): 現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。
- [CSS で印刷用のスタイルを設定できる](https://azukiazusa.dev/blog/css-print-style.md): 大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示することを目的としているので印刷には不向きなものです。  とはいえ Web ページを印刷したいというニーズは少なからずあるとは思います、そのようば場合には `@media print` などのような印刷用の CSS を利用することで見た目を整えることができます
- [フォーカストラップとは?  〜アクセシブルなモーダル〜](https://azukiazusa.dev/blog/fucus-trap-accessible-modal.md): フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。  登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。
- [Webpack5 Module Federation ではじめるマイクロフロントエンド](https://azukiazusa.dev/blog/webpack5-module-federation.md): Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。
- [Youtube すごい裏ワザ！！！](https://azukiazusa.dev/blog/youtube-trick.md): Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を達成する方法として上げられています。
- [ npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた](https://azukiazusa.dev/blog/npm-coa-rc-embded-malware.md): 2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。
- [ボックスモデル](https://azukiazusa.dev/blog/css-box-model.md): CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それらのボックスが組み合わさることによってページ全体が表現されます。  ボックスは CSS において最も基本的な概念であり、ボックスを理解することは CSS でレイアウトを構成したり要素同士を揃えるための手助けとなることでしょう。
- [【TypeScript】type-challenges 中級編](https://azukiazusa.dev/blog/typescript-type-challenges.md): [type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。
- [【TypeScript】type-challenges で学ぶ高度な型](https://azukiazusa.dev/blog/typescript-type-challenges-advanced-types.md): type-challengesを知っていますか？  これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。  問題の回答はPlayground上で行えるので実際に手を動かしながら問題を解くことができます。型パズルを通じてTypeScript の高度な型について学んでいきましょう。
- [lodash-es lodash 違い](https://azukiazusa.dev/blog/lodash-es-lodash.md): [lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。
- [Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ #Shorts](https://azukiazusa.dev/blog/q-typescript-readonly-shorts.md): 質問来てた👉  Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？  結論：犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以下の利点を得られます。  - うっかり関数の内部で引数の値を変更してしまうコードを書いてしまったときにコンパイルエラーが得られる - 関数の利用者が安心して関数を呼び出せる
- [Vuex 5 でどのように変わるのか。](https://azukiazusa.dev/blog/vuex-5.md):  現在リリースされている最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのものであり、 Vuex 3 と同じ API となっています。  Vuex 5 は Vue 3 において　Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。
- [【Vue.js】script setup 構文がすごくすごい](https://azukiazusa.dev/blog/vue-js-script-setup.md): Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。
- [【Vue3.2】styleタグ内でJavaScript変数をバインドできる](https://azukiazusa.dev/blog/vue3-2-style-javascript.md): Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。  つまりは、CSSの値を動的に設定できるということです。  ものは試しのやってみましょう。
- [Vue2のプロジェクトをVue3へマイグレーションsする](https://azukiazusa.dev/blog/vue2-vue3.md): Vue 3が正式リリースされてから約1年が経過しました。  Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？  この記事ではVue 2からVue 3への移行手順を記述していきます。
- [【Vue.js】Mixinを使うのはもうやめよう](https://azukiazusa.dev/blog/vue-js-mixin.md): 禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。  実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。
- [あの日見たaxiosの機能を僕達はまだ知らない。](https://azukiazusa.dev/blog/axios.md): axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。  Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。  axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。
- [VuetifyのテーマをCSS変数として使用する](https://azukiazusa.dev/blog/vuetify-theme-css-variables.md): VuetifyのテーマをCSSの変数として生成して使用します。
- [青春JSDocはTypeScript先輩の夢を見ない](https://azukiazusa.dev/blog/jsdoc-typescript.md): 時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。  そんなJavaScriptしか利用できない状況で代替手段となるのが、JSDocです。JSDocのアノテーションによって型を付与することによって最低限の支援を受けることができます。
- [【TypeScript】型定義をする際にもDRY原則を守る](https://azukiazusa.dev/blog/typescript-dry-type-definition.md): DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。  とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定義を行ってしまうことはないでしょうか？ TypeScriptには型定義をする際に重複を抑える手段は確かに存在します。そのようないくつかの方法を紹介します。
- [Jest setTimeout()のようなでタイマー関数をテストする](https://azukiazusa.dev/blog/jest-timer-test.md): JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。
- [【TypeScript】型アノテーションと型アサーションの違い](https://azukiazusa.dev/blog/typescript-type-annotation-vs-type-assetion.md): 型アノテーションと型アサーションによる変数宣言は、一見同じ結果ををもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。
- [【mongoose】日付のカラムで時間ごとにグループ化してドキュメント数をカウントする](https://azukiazusa.dev/blog/mongoose-group-by-hour-count.md): タイトルのとおりです
- [【mongoose】Cannot overwrite 'Model' model once compiled. エラーの直し方](https://azukiazusa.dev/blog/mongoose-cannot-overwrite-model-model-once-compiled-error-handling.md): mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です
- [JSONオブジェクトのあれこれ](https://azukiazusa.dev/blog/json-object.md): `JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。  普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すことによってその振る舞いを変更することができます。
- [【JavaScript】Objectがプリミティブに変換されるとき](https://azukiazusa.dev/blog/javascript-object.md): JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する
- [ReactのErrorBoundaryで内部のエラーをキャッチする](https://azukiazusa.dev/blog/react-errorboundary.md): Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。  例えるなら、`try/catch`構文を行うコンポーネントのようなものと言えます。
- [仕事で役に立つかもしれないHTML5のマイナー要素](https://azukiazusa.dev/blog/useful-minor-html5.md): HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。  今回は、そんなHTMLの普段の仕事では余り見かけないであろう要素を紹介していきます。
- [Nuxt Sentryでユーザーフィードバックを受け取る](https://azukiazusa.dev/blog/nuxt-sentry-user-feedback.md): Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。  Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。
- [Node.js(Express)でcsvを生成してダウンロード](https://azukiazusa.dev/blog/node-js-express-csv.md): Node.js(Express)でCSVファイルを生成してダウンロードさせます。
- [CKADにも合格した](https://azukiazusa.dev/blog/also-passed-ckad.md): 開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。
- [Vue CLIで作成したプロジェクトをViteに置き換える](https://azukiazusa.dev/blog/vue-cli-vite.md): Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。
- [ KubernetesのapiVersion](https://azukiazusa.dev/blog/kubernetes-apiversion.md): Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのようなルールで記述するのでしょうか。
- [etcdのバックアップとリストア](https://azukiazusa.dev/blog/etcd-backup-restore.md): etcdは、kubernetesのクラスターの情報を保存するkey-valueストアです。
- [kubectl JSONpath](https://azukiazusa.dev/blog/kubectl-jsonpath.md): kubectlはアウトプットの形式としてJSONPathをサポートしています。
- [Vue.jsでIE11対応](https://azukiazusa.dev/blog/vue-js-for-ie11.md): 人生でときにはIE11に対応させなければいけない時があるでしょう。Vue.jsでIE11に対応しなけらばいけなくなったときに読むものを記載しておきます。
- [e2eテスティングフレームワークCypress](https://azukiazusa.dev/blog/e2e-cypress.md): Cypressは、JavaScript製のE2Eテスティングフレームワークです。 実行速度が早い、HTTPリクエストの実行を待つなどテストが壊れにくい仕組みが整っています
- [Kubernetes Tips](https://azukiazusa.dev/blog/kubernetes-tips.md): 知っていると時間を短縮できるようなkubectlコマンドのtipsです。
- [Sassの基礎文法](https://azukiazusa.dev/blog/basic-sass-syntax.md): SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。
- [Kustomizeとは](https://azukiazusa.dev/blog/what-is-kustomize.md): Kustomizeとは、Kuberbetsコミュニティのsig-cliが提供しているマニフェストのテンプレーティングツールです。環境ごとにマニフェストを生成したり特定のフィールドを上書きするといった機能が提供されています。
- [KubernetesのパッケージマネージャーHelm](https://azukiazusa.dev/blog/kubernetes-helm.md): Helmは、Kubernetsのパッケージマネージャーです。 例えば、npmを利用して第三者が作成したパッケージをレポジトリで管理して検索・インストールするように、Helmではチャート(Chart)と呼ばれる設定ファイルをレポジトリで管理しています。
- [Kubernetes用語集](https://azukiazusa.dev/blog/kubernetes-glossary.md):  仕事上kubernetesを学ぶ必要が出てきました。 筆者のレベルは、Docker・kubernetesの概念・必要性をやんわりと理解している状態です。  勉強をすすめる上で、わからない用語が次々と出てきたて頭の中がパンクしそうになったので、簡潔に随時まとめることとしました。
- [DenoでREST API](https://azukiazusa.dev/blog/deno-rest-api.md): この記事では、Denoを使い簡単なCRUD操作を行うREST APIを構築します。
- [TailwindCSSでダークモード](https://azukiazusa.dev/blog/tailwindcss-dark-mode.md): 昨今のアプリケーションでは、ダークモードを提供しているのがもはや当たり前になってきました。 OSのレベルでダークモードを設定することができ、ダークモードが提供されていないサイトは眩しく感じしてしまって敬遠してしまうなんて経験はあるのではないでしょうか？  そんな一般化されたダークモードの提供をTailwind CSSで実装します。
- [はじめてのGraphQL](https://azukiazusa.dev/blog/what-is-graphql.md): GraphQLとは、Facebookが開発したAPI向けのクエリ言語です。RESTに変わるサーバーとクライアントの通信手段として注目を集めています。 リクエスト・レスポンスの型の定義ができる、フロント側から取得するデータを選択することができるなどの特徴があります。 GraphQL自体はSQLのようなクエリ言語としての位置づけなので、Java、Node.js、Ruby、JavaScript、Pythonなど様々な言語で利用することができます。
- [Sapper + contentful + VercelのJamstackで高速なブログを構築する](https://azukiazusa.dev/blog/sapper-contentful-vercel-jamstack-blog.md): JamstackのJamはJavaScript/APIs/Markupの頭文字です。 従来の手法と比較して、高速化・堅牢なセキュリティ。より簡単なスケーラブル・開発体験の向上という特徴を持っています。実行時にAPIから取得したデータを動的にレンダリングせずに、ビルド時にAPIから取得して静的なHTMLとして出力されます。
- [【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル](https://azukiazusa.dev/blog/svelte-typescript-tailwindcss-book-search-app-tutorial.md): この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。  - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア  HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。
- [Vue3 コンポーネントのテスト](https://azukiazusa.dev/blog/vue3-test-components.md): コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。
- [TailWindCSSとは](https://azukiazusa.dev/blog/what-is-tailwindcss.md): TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。
- [ JavaScriptライブラリ Svelteとは](https://azukiazusa.dev/blog/what-is-svelte.md): Svelteとは、ReactやVue.jsのような宣言的UIライブラリの一種です。その最大の特徴は、ReactやVue.js・Angularと異なりSvelteはコンパイラであることを謳っているところです。Svelteによってコンパイルされたコードは、すべてVanilla JS  - ネイティブのJavaScript- にで生成されます。 そのため、コンパイル後のファイルサイズも小さくパフォーマンス上での利点が期待されています。
- [Firebase Functions https.onCall()トリガーでアプリから簡単に呼び出す](https://azukiazusa.dev/blog/firebase-functions-https-oncall.md): Firebase Functionsとは、Firebaseの提供するサーバレスフレームワークです。HTTPSリクエストによって関数を実行したり、FireStore・Cloud Storage・AuthenticationのCRUDイベントをトリガーに関数を実行することができます。使用できる言語はJavaScript・TypeScriptに限られているというデメリットはあるものの、手軽にデプロイでき簡単にプロジェクトの他のFirebaseの機能と統合できるメリットがあります。
- [JavaScript テストフレームワークのJestのモックがすごくすごい](https://azukiazusa.dev/blog/jest-mock.md): Jestは、JavaScriptのシンプルなテスティングフレームワークです。ゼロコンフィグを謳っており、細かい設定なしに動作させることが可能です。  Jestの中でも特に強力な機能がモッキングです。Jestのモックを利用すれば、外部ライブラリであろうとモジュール外のオブジェクトを簡単にモック化することができます。  実際に、テストコードの例を見ていきましょう。
- [Vue.js Composition APIでTODOアプリ作成](https://azukiazusa.dev/blog/vue-js-composition-api-todo-app.md): Vue3 Composition APIを使って、ハンズオン形式でTODOアプリを作成していきます。
- [イマドキのJavaScriptの書き方](https://azukiazusa.dev/blog/how-to-write-javascript-in-the-modern-world.md): JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。  このように、JavaScriptという言語は日々進化を遂げています。ES2015より前の書き方の多くが非推奨となっており、過去のWebや本の情報は現在ではあまり役に立たなくなっています。 そんなJavaScriptのイマドキの書き方を見ていきましょう。
- [すぐに使える！JavaScriptの華麗な配列操作](https://azukiazusa.dev/blog/javascript-array-operations.md): JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。  組み込みの配列メソッドはたくさんありますが、その中で私がよく使うメソッドを紹介します。
- [Go言語 テスト](https://azukiazusa.dev/blog/go-test.md): Go言語の提供するテストはシンプルです。テストのために覚えることは多くはありません。 Go言語の単体テスト用の機能は`testing`という標準パッケージとして提供されています。ベンチマークやカバレッジ、標準出力のテストなどをカバーしています。 また、テストは`go test`コマンドによって実行されます。サードパーティのツールなどは必要ありません。まずはこの`testing`パッケージの内容を見ていきます。
- [Go 言語　標準パッケージでHTTPサーバー](https://azukiazusa.dev/blog/go-http.md): Go言語は、標準パッケージでHTTPサーバーと基本的なHTTPクライアントを提供します。 使用するのは、net/httpというパッケージです。
- [Go言語 ポインター](https://azukiazusa.dev/blog/go-pointer.md): Go言語には、ポインタがあります。 ポインタとは、メモリのアドレスのことです。アドレスは`0xc0000b4008`のような16進数で表されます。
- [Go言語 構造体・インターフェース](https://azukiazusa.dev/blog/go-struct-interface.md): 構造体(Struct)とは、フィールドの集まりです。JavaScriptのオブジェクトよく似ており、データをまとめて1つの集まりの値として表現します。  例えば、座標を表すには緯度と経度がフィールドとして必要になるでしょう。緯度と経度をそれぞれ別の変数として宣言することはできますが、間違いが生じやすく面倒な処理になってしまいます。
- [Go言語　コレクション（配列・スライス・マップ）](https://azukiazusa.dev/blog/go-collection.md): 配列は決まった長さを持つ要素を並べた順序のあるコレクションです。 Go言語の配列は固定長になっており、宣言時に長さと要素型を指定します。 長さは後から変更することはできません。 Go言語の配列は柔軟性に欠けるため、実際にはあまり使用されません。可変長であるスライスがよく使われます。 マップはキーと値によって宣言されます。これは、連想配列のようなものです。
- [Go言語　型・関数・メソッド](https://azukiazusa.dev/blog/go-type-function-method.md):  Go言語は静的型付け言語であり、全ての変数は何らかの型に属し、異なる型同士の演算といった問題点の多くはコンパイル時に検出されます。 関数の宣言にはfuncキーワードを使用します。関数の引数と戻り値には型を指定します。戻り値を複数持たせられる、戻り値に名前をつけることができるといった特徴があります。 クラスやオブジェクトはないですが、メソッドはあります。メソッドは型に紐付けられます。
- [Go言語基礎文法](https://azukiazusa.dev/blog/what-is-go.md): Go言語(Golang）は、2009年にGoogleによって開発されたオープンソースの静的型付け、コンパイルされるプログラミング言語です。Go言語はコンパイルされるプログラミング言語です。 Go言語はシンプルで、信頼性が高く、効果的なソフトウェアを構築します。
- [CSSの設計](https://azukiazusa.dev/blog/css-design.md): 今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコープ」「複雑化するWeb開発」といった問題点があげられます。そのような状態に対する解決策として、CSSの設計が誕生しました。
- [Express + TypeScript + MondoDBでやる](https://azukiazusa.dev/blog/express-typescript-mondodb.md):  Expressは、Node.jsのWebアプリケーションでもっとも利用されているフレームワークです。Expressは、HTTPによるWeb上の相互作用とNOde.jsプラットフォームの中間に位置するので、ある種のミドルウェアと言えます。 Expressを利用して、MVCモデルのアプリケーションを開発してみます。 データベースにはMongoDBを利用し、さらにTypeScriptで書いてみます。
- [Node.js - サーバーサイドのJavaScript](https://azukiazusa.dev/blog/node-js.md): Node.jsは、V8 Javascriptエンジン上に構築されたJavaScriptの実行環境です。サーバーサイドのJavaScript環境であり、非同期、イベント駆動といった特徴があります。
- [Firebase④ Cloud FireStore - クエリ](https://azukiazusa.dev/blog/firebase-cloud-firestore-query.md): Firebase4回目の記事です。 前回は、Firebaseにおける単一のドキュメントに対するCRUD操作までを取り扱いました。 今回は複数のコレクションから取得するためのクエリについて説明していきます。
- [Denoとはなにか - 実際に使ってみる](https://azukiazusa.dev/blog/what-is-deno.md): Denoは、Node.jsの製作者であるRyan Dahlによって作られた、新しいJS/TSランタイムです。簡単に説明すると、Node.jsのイケてなかったところを改良したものがDenoになります。
- [Firebase③ Cloud Storage](https://azukiazusa.dev/blog/firebase-cloud-storage.md): Firebase3週目の記事です。 今回は、主に画像などのデータを保存するストレージ機能を提供するCloud Storageを取り扱います。 Vue.jsを利用したブログにサムネイル画像を設定する機能をもとに説明していきます。
- [JavaScript ECMAScriptとかBabelとか](https://azukiazusa.dev/blog/javascript-ecmascript-babel.md): JavaScript ECMAScriptとかBabelとか
- [Firebase④ Cloud FireStore](https://azukiazusa.dev/blog/firebase-cloud-firestore.md): Cloud FireStore(以下FireStore)とは、FireBaseの提供するドキュメント指向型 のNoSQLデータベースです。 NoSQLとしての特徴としてのスキーマレス、スケーラブルといった特徴のほかにリアルタイムアップデート、セキュリティルール、オフラインサポートといった独自の特徴を備えており、特にバックエンドを介さずにクライントサイドから直接操作できるという点が大きなポイントです。 また、β版から正式リリースされたのが2019年2月ということもあり、比較的新しい技術です。
- [Firebase② Firebase Authentication](https://azukiazusa.dev/blog/firebase-firebase-authentication.md): Firebase第二弾です。 Firebase Authenticationのメールアドレスによるログインと、FireStorageについて説明していきます。
- [firebaseとは](https://azukiazusa.dev/blog/what-is-firebase.md): Firebaseは、Googleが提供するバックエンドサービスです。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 認証、データベース、ストレージなどたくさんの機能が使用できます。