hsb.horse
Snippets
スニペット
短いコード片と実行手順を用途別にまとめた一覧です。
スニペットタグ- Biome の npm-scripts 設定
Biome 導入時に設定する npm-scripts の定番パターン。lint と format を check コマンドで実行する。
- 画像拡張子判定用正規表現
ファイル名から画像形式を判定する JavaScript/TypeScript 正規表現パターン。png, webp, jpg, jpeg, avif, gif に対応。
- 遅延初期化オブジェクト
getter を使って初回アクセス時にのみ値を生成する TypeScript パターン。メモリキャッシュより軽量な遅延評価。
- man ページをテキストファイルに保存
macOS/Linux で man コマンドの出力をファイルに保存する方法。col -b で制御文字を除去して可読なテキストを作成。
- npm から tarball をダウンロード
npm pack や pnpm info を使って、npm パッケージの tarball（.tgz）をダウンロードする方法。npm, yarn, pnpm それぞれの方法を紹介。
- 時刻ベースのセマンティックバージョン生成
ビルド時刻をバージョン番号として自動生成する TypeScript 関数。Chrome拡張機能などでバージョン上限がある場合に便利。
- 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 型で型安全にエラーを扱う。
- Uint32Array ヘルパー関数
new Uint32Array の呼び出しを簡潔にする TypeScript ラッパー関数。オーバーロードを使ってコンストラクタの全インターフェースをサポート。
- Uint8Array ヘルパー関数
new Uint8Array の呼び出しを簡潔にする TypeScript ラッパー関数。配列、ArrayBuffer、長さ指定の全パターンに対応。
- Uint8Array の結合
複数の Uint8Array を1つにマージする TypeScript 関数。バイナリデータの結合に便利。
- crypto.randomUUID の Polyfill
crypto.randomUUID 関数のポリフィル実装。全ブラウザでサポートされているため新規実装の必要はないが、UUID v4 の仕組みを学ぶ参考になる。
- CloudFormation テンプレートから parameter.json を生成する
aws cloudformation validate-template と jq を組み合わせて、環境変数を反映した parameters.json を自動生成するスニペット。
- CSS href 属性セレクタの使い方
a 要素の href 属性に対して前方一致・後方一致・部分一致などの属性セレクタを使う CSS スニペット。
- gzip コマンドチートシート
ファイルの圧縮・解凍・オプション指定など、gzip コマンドの基本的な使い方をまとめたスニペット。
- File System API権限チェック
ブラウザのFile System APIで権限を確認し、必要に応じて要求を行う関数。読み取り専用・読み書き両用に対応。
- TypeScript配列操作ユーティリティ
TypeScriptでの開発頻出の配列操作を型安全に行うためのユーティリティ関数集。空配列生成、配列分割、Null排除、シャッフルなど。
- React useSelection フック
React で複数アイテムの選択状態を管理するカスタムフック。全選択、部分選択、個別選択を型安全に扱う。
- 動的インポートのキャッシュ実装
TypeScriptでdynamic importをキャッシュする軽量実装。同じパスへの複数回のインポートを1回のPromiseで処理する。
- Finder上にストレージ残容量を表示
macOS Finderでストレージ残容量の表示をショートカットでワンタッチ切り替え。
- Node.jsでファイル判定
Node.jsでパスがファイルかどうかをPromiseで判定する関数。エラー時はfalseを返す。
- TypeScriptでp-limit実装
Promise並行実行数を制御するp-limitをTypeScriptで再実装。依存関係を増やさずに並行制御を実現。
- TypeScriptでyocto-queue実装
軽量なキュー実装yocto-queueをTypeScriptで再実装。enqueue、dequeue、イテレータなど基本操作を提供。
- avifencで画像を一括でAVIFに変換する
jpg/jpeg/png を再帰的に走査して avifenc で .avif に変換する Bash スニペット。