hsb.horse
Tags
#typescript
タグ「typescript」に関連するブログ、スニペット、用語集を横断してまとめた一覧。
- 用語集Biome
Biomeは、JavaScript/TypeScript向けのRust製フォーマッタ兼リンタ。単一ツールで整形と静的解析をまとめて実行できる。
- スニペットcrypto.randomUUID の Polyfill
crypto.randomUUID 関数のポリフィル実装。全ブラウザでサポートされているため新規実装の必要はないが、UUID v4 の仕組みを学ぶ参考になる。
- スニペットdataset で冪等な DOM オブザーバーのセットアップ
data属性を使ってMutationObserverの重複登録を防ぐシンプルなパターン。グローバルレジストリ不要で移植性が高い。
- スニペットFile System API権限チェック
ブラウザのFile System APIで権限を確認し、必要に応じて要求を行う関数。読み取り専用・読み書き両用に対応。
- スニペットNode.jsでファイル判定
Node.jsでパスがファイルかどうかをPromiseで判定する関数。エラー時はfalseを返す。
- スニペットReact useSelection フック
React で複数アイテムの選択状態を管理するカスタムフック。全選択、部分選択、個別選択を型安全に扱う。
- スニペットSHA256 同期実装（WebCrypto API 非依存）
WebCrypto API を使わない純粋な JavaScript での SHA256 実装。Web Workers などで crypto オブジェクトが使えない環境向け。
- スニペットTransformStream でテキストを分割処理
ReadableStream と TransformStream を使って、長いテキストを指定サイズのチャンクに分割する TypeScript 実装例。
- スニペットTypeScript Non-null アサーション
undefined や null を排除する TypeScript の型ガード関数。実行時エラーと型安全の両方を確保する。
- スニペットTypeScript で軽量 Result 型を実装
try-catch を使わないエラーハンドリングパターン。data と error を分離した Result 型で型安全にエラーを扱う。
- スニペットTypeScriptでp-limit実装
Promise並行実行数を制御するp-limitをTypeScriptで再実装。依存関係を増やさずに並行制御を実現。
- スニペットTypeScriptでyocto-queue実装
軽量なキュー実装yocto-queueをTypeScriptで再実装。enqueue、dequeue、イテレータなど基本操作を提供。
- スニペットTypeScript配列操作ユーティリティ
TypeScriptでの開発頻出の配列操作を型安全に行うためのユーティリティ関数集。空配列生成、配列分割、Null排除、シャッフルなど。
- スニペットUint32Array ヘルパー関数
new Uint32Array の呼び出しを簡潔にする TypeScript ラッパー関数。オーバーロードを使ってコンストラクタの全インターフェースをサポート。
- スニペットUint8Array の結合
複数の Uint8Array を1つにマージする TypeScript 関数。バイナリデータの結合に便利。
- スニペットUint8Array ヘルパー関数
new Uint8Array の呼び出しを簡潔にする TypeScript ラッパー関数。配列、ArrayBuffer、長さ指定の全パターンに対応。
- スニペットエンティティ内蔵のクールダウン警告抑制
警告の繰り返し抑制ロジックをクォータエンティティそのものに組み込むパターン。レート制限通知や課金警告のような頻繁な警告を適切に制御する。
- スニペットキャッシュファースト＋ライブフェッチ オーケストレーションパターン
キャッシュからの高速パスとリモートからの低速パスを組み合わせたオーケストレーション。キャッシュヒット・ミス・レイテンシ・最終結果をメトリクスとして計測し、副作用は外部に委譲する。
- スニペットネイティブUI要素をクローンしてスタイルを継承する
ホストアプリの既存ボタンをcloneNodeで複製し、アイコンとテキストだけ置き換えることで視覚的一貫性を維持する軽量パターン。難読化CSSと戦わない。
- スニペットビルド時メッセージIDハッシュストア
ビルド時にメッセージIDとコンテキストをハッシュ化して短縮・正規化するTypeScript関数。翻訳キーに文字種制限があるプラットフォームで役立つ。
- スニペットプロパティ抽出ヘルパー関数
オブジェクトから指定プロパティだけを取り出す関数を生成する。mapByの入れ子や配列変換で型安全なプロパティ抽出を1行にまとめる。
- スニペット動的インポートのキャッシュ実装
TypeScriptでdynamic importをキャッシュする軽量実装。同じパスへの複数回のインポートを1回のPromiseで処理する。
- スニペット時刻ベースのセマンティックバージョン生成
ビルド時刻をバージョン番号として自動生成する TypeScript 関数。Chrome拡張機能などでバージョン上限がある場合に便利。
- スニペット画像拡張子判定用正規表現
ファイル名から画像形式を判定する JavaScript/TypeScript 正規表現パターン。png, webp, jpg, jpeg, avif, gif に対応。
- スニペット遅延初期化オブジェクト
getter を使って初回アクセス時にのみ値を生成する TypeScript パターン。メモリキャッシュより軽量な遅延評価。
- スニペットBulk Import with Fallback from Pairwise COPY to Individual Inserts
大量関係データをまず bulk import し、schema 制約に合わない組だけ個別 insert へ退避させる。成功率と速度を両立するパターン。
- スニペットサブバッチ分割とタイムアウト管理を持つWorkerプール
大量データを小さなサブバッチに分けてWorkerへ送信し、メモリ圧迫を抑えつつ各バッチにタイムアウトを設定して異常を早期検出するパターン。
- スニペットバイト予算付き2フェーズリポジトリウォーク
path/sizeスキャン→構造解析→必要チャンクのみ読み取り→parseの順に分けて、大規模リポジトリでもメモリ上限を制御しやすくする設計パターン。
- スニペット段階的 DOM 観測戦略
アプリ準備完了後に細粒度オブザーバーへ段階的に切り替えるパターン。SPA コンテンツスクリプトやサードパーティ DOM 統合に広く応用できる。
- ブログTypeScript Monorepo 最適解を整理する 2026年版
pnpm workspace、Turborepo、TypeScript Project References、Biome、WXT の役割を整理し、汎用の無難解と 4 パッケージ構成での実務解を分けてまとめた。
- ブログ@hsblabs/web-stream-extras をリリースした
ブラウザと Node.js で ReadableStream<Uint8Array> を扱うための小さな TypeScript ユーティリティライブラリ。バイト変換ヘルパー、トランスフォームストリーム、Web Crypto API を使ったストリーム暗号化まで。
- ブログWeb Crypto でバイトストリームをブラウザ上で暗号化する
Web Crypto は強力な暗号プリミティブを提供するが、ストリーム向けのインターフェースはない。@hsblabs/web-stream-extras の encryption サブパスを使って ReadableStream<Uint8Array> を暗号化する方法 — ファイル暗号化、ストリームごとの鍵管理、パイプライン合成まで。
- ブログ同じ Web Streams のボイラープレートを書き続けるのに飽きた
何度も書き直していた ReadableStream<Uint8Array> のユーティリティを @hsblabs/web-stream-extras にまとめた理由。繰り返し書いていた3つのパターン、ByteTransformStream 基底クラス、Web Crypto を使ったストリーム暗号化まで。
- ブログAstroプロジェクトに開発専用Liveエディタを実装する
Astroで開発モード限定のブラウザエディタを実装する方法。ViteミドルウェアとReactで、本番ビルドに一切影響を及ぼさずに、開発中のコンテンツ管理を快適にする手順を整理。
- ブログTypeScriptでCRC32ハッシュを実装する
CRC32ハッシュアルゴリズムをTypeScriptで実装する手順。ルックアップテーブルを使った高速化手法と、実際の使用例を整理。
- ブログTransformStreamで行単位のテキスト分割を実装: LineSplitTransform
ストリームから受け取ったバイナリデータを行単位に分割するTransformStream実装。ログファイルやテキストファイルの逐次処理に活用できる手法を整理。
- ブログ値をReadableStreamに変換するTypeScriptユーティリティ関数
StringやオブジェクトなどをReadableStreamに変換するユーティリティ関数。Blob経由ではなく任意の型でストリームを扱う実装を整理。
- ブログTypeScriptでCIDR範囲のIPアドレス判定を実装する
CloudFront Functionなど外部モジュールが使えない環境向けに、CIDR範囲内のIPアドレス判定を自前実装。ビット演算を使ったクラス構文の実装を整理。
- ブログgenerate-project-summary.pyをBun+TypeScriptで再実装した話
Pythonで書かれたプロジェクト構造要約スクリプトを、Bun+TypeScriptで再実装。LLMにリポジトリ全体を読ませるための実行可能バイナリ作成の経緯と実装を紹介。
- ブログメディアファイルを解像度でソートするTypeScript実装
動画や画像の解像度(幅×高さ)でソートする簡潔なTypeScript実装。Twitter動画メディアのソート処理に活用。
- ブログTypeScriptでロト6・ロト7の抽選数字を生成する
メルセンヌ・ツイスターを使ってロト6・ロト7の抽選番号を生成するTypeScript実装。疑似乱数生成器の実践例。
- ブログIAM認証有効なAPI GatewayにTypeScriptでリクエストする実装
AWS SDK for JavaScriptのSigV4を使って、IAM認証が有効なAPI Gatewayにローカル環境からTypeScriptでリクエストする実装手順。
- ブログHTMLVideoElementから画像を生成するTypeScript実装
CanvasとVideoElementを使って、動画の現在フレームを画像として抽出するTypeScript実装。Promiseベースでblob生成する方法を整理。
- ブログ初めてのViteプラグイン実装: ビルドメタデータを自動生成する
Vite Plugin APIを使ってビルドライフサイクルに独自処理を組み込む方法。時刻ベースのセマンティックバージョンを生成するプラグイン実装を通じて学ぶ。
- ブログ異体字セレクターを使ったステガノグラフィのTypeScript実装
Unicodeの異体字セレクターを活用して、見た目には見えない秘密の文字列をテキストに埋め込むステガノグラフィ手法のTypeScript実装。
- ブログTwitter動画URLからサイズ情報を抽出するTypeScript実装
Twitter(X)の動画URLに含まれる解像度情報を正規表現で抽出するTypeScript実装。URLパターンの解析とサイズ取得方法を整理。