HB DevTools

High Bridge DevTools

Technical Docs

各ツールの設計思想・技術アーキテクチャ・ロジック解説・品質管理をまとめた技術ドキュメント集です。

JSON Formatter の設計

JSONの整形・バリデーション処理の設計思想と、ブラウザ差異を吸収したエラー位置特定アルゴリズムを解説します。

JSON Formatter

Color Converter の設計

HEX・RGB・HSL などの色空間を相互変換する純粋関数の設計と、HSL変換アルゴリズムの数学的背景を解説します。

Color Converter

Text Format Converter の設計

命名規則と日付フォーマットの変換ロジックを解説します。入力形式を問わず正確にトークン化するアルゴリズムがポイントです。

Text Converter

Word Counter の設計

文字数・単語数・行数・バイト数をリアルタイム計測する設計と、TextEncoder API を活用したバイト数計算の仕組みを解説します。

Word Counter

Dummy Text Generator の設計

日本語・英語のダミーテキストを指定文字数で生成する設計と、文章プールを活用した繰り返し生成アルゴリズムを解説します。

Dummy Text

URL Encoder の設計

RFC 3986 準拠のパーセントエンコーディングの仕組みと、不正シーケンスに対するエラーハンドリング設計を解説します。

URL Encoder

Unix Timestamp Converter の設計

Unix時間の概念と10桁/13桁の自動判別ロジック、Intl API を活用したローカル/UTC同時表示の設計を解説します。

Unix Converter

SEO Analyzer の設計

Server Actions によるCORS回避、node-html-parser を使ったサーバーサイドHTML解析、SEO判定アルゴリズムの設計を解説します。

SEO Analyzer

Markdown Formatter の設計

Prettier standalone による Markdown 整形パイプラインと、Gemini AI を用いた平文→Markdown 変換(MD変換)機能の設計・実装を解説します。

Markdown Formatter

Image Background Remover の設計

WASM/ONNXベースのAIモデルをブラウザ上で動作させ、画像データをサーバーに送信しない完全クライアントサイド型の背景除去ツールの設計・実装を解説します。

Image Background Remover

Image Diff Table の設計

GitHub PR用のBefore/After画像比較表生成ツールの設計を解説。@dnd-kit によるD&D並び替え、Cloudinary画像アップロード、ReactMarkdownプレビューの実装詳細を紹介します。

Image Diff Table

Favicon Generator の設計

Canvas API と純粋なArrayBuffer操作でICOバイナリを自前構築するブラウザ完結型faviconジェネレーターの設計・実装を解説します。

Favicon Generator