Bun の Web フレームワーク ElysiaJS のチュートリアル

ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事では、ElysiaJS を使って簡単なタスク管理アプリの Web API を作成してみます。

Bun のマクロを使ってフィーチャートグルを実装する

Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装してみましょう。

Bun の Plugins で CSV ファイルを直接 import する

Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル(.rs)を直接 import できる仕組みも作れることが紹介されています。

OpenTelemetry Collector の Connector を使ってログをメトリックに変換する

OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に Connector を使用します。例えば、あるパイプラインはログのパイプラインのエクスポーターとメトリックのパイプラインのレシーバーとして動作します。このような場合、Connector はログをメトリックに変換する役割を担います。

最小限のコードで動く最も汚いコードから始める

コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。

OpenTelemetry を使用して Node.js アプリケーションを計装する

OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。この記事では Node.js アプリケーションを計装して Prometheus にデータを送信する方法を紹介します。

await は Promise 以外のオブジェクトでも値を取り出せる

await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。

【React】メモ化したコンポーネントに children を渡すと効果がなくなる

React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.memo の使い方を誤ると意図しない再レンダリングが発生してしまうことがあります。ここではメモ化したコンポーネントに children を渡すと効果がなくなるというケースについて説明します。

アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか

prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。

グラフのアクセシビリティについて考える

`<canvas>` や `<svg>` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。