開発してると、本筋じゃない小作業でエディタとブラウザを行ったり来たり。JSONを整形して、ハッシュを出して、正規表現を試して……。そういう「ちょっとした確認」を、タブ1枚で全部済ませられるのが Benri.dev(べんり箱) の開発者ツールです。
ぜんぶ無料・登録不要・ブラウザ内で完結(貼ったデータは外に出ません)。ローカルに何かをインストールする前に、まずここで済むかも。28個、いきます。
{ } JSON整形・検証
APIのレスポンスが1行でドバッと返ってきて「読めん」となったとき用。貼るだけで整形、逆に圧縮もでき、壊れたJSONはどこがダメかも教えてくれます。ネストが深いデータの構造をパッと把握したいときの必需品です。
🔡 Base64 エンコード/デコード
「このトークン、中身なんだっけ?」をサッと確認。テキストとBase64を相互変換できて、画像のData URI化にも使えます。設定ファイルに埋まったBase64文字列の正体を暴きたいときにも。
🔗 URLエンコード/デコード
クエリ文字列の %E3%81%82 みたいな暗号を、人間が読める形に戻せます。日本語や記号を含むURLのデバッグに便利です。逆にエンコードもできるので、パラメータを手で組み立てたいときにも。
#️⃣ ハッシュ生成
文字列の“指紋”を作るツール。SHA-1/256/512に対応し、パスワードのハッシュ確認やデータ照合に使えます。同じ入力なら必ず同じ結果になるので、動作テストのお供にもどうぞ。
🆔 UUID生成
テストデータに一意なIDが欲しい、そんな瞬間に。UUID v4だけでなく、時系列でソートできるULIDや短いNanoIDもまとめて生成できます。何十個も一気に出せるので、DBのシード作りが捗ります。
⏱️ UNIXタイム変換
ログに出てくる 1751600000 みたいな数字が「いつ?」を即変換。UNIX時間⇔日時を相互に行き来できます。秒とミリ秒の取り違えもその場で気づけるので、時刻まわりのバグ調査が早くなります。
.* 正規表現テスター
「この正規表現、ちゃんとマッチする…?」を書きながらその場で確認。マッチ箇所がハイライトされるので、試行錯誤のループがめちゃくちゃ短くなります。複雑なパターンを本番コードに入れる前の“素振り”にどうぞ。
🎨 カラーコード変換
デザイナーから来た #3B82F6 を、RGBやHSLにサッと変換。デザインツールとコードの間を行き来するときの通訳役です。HSLで扱えるので、「あと少しだけ明るく」みたいな微調整も直感的にできます。
⇄ CSV ⇄ JSON 変換
ExcelでもらったデータをAPIに流したい、その逆もしかり。CSV/TSVとJSONを相互変換できます。ヘッダー行の扱いも選べるので、スプレッドシートとプログラムの橋渡しがスムーズです。
</> HTMLエスケープ/アンエスケープ
コードをブログに載せたら <div> が消えて表示崩れ…を防ぎます。< > & を実体参照に変換(逆も)できます。技術記事でサンプルコードをそのまま見せたい人の必需品です。
🔑 JWTデコード
認証で詰まったとき、まず見たいのがトークンの中身。JWTのヘッダーとペイロードを貼るだけで表示してくれます。有効期限(exp)や発行者を確認して「あ、トークン切れてた」に気づけます。
01 進数変換
2進数・8進数・10進数・16進数をまとめて相互変換。ビット演算やカラーコード、chmod 755 のパーミッションを扱うときに。「16進のこの値、10進だといくつ?」を暗算せずに済みます。
📄 Markdownプレビュー
Markdownを書きながら、右側でHTML表示をリアルタイム確認。READMEやドキュメントの下書きに便利です。見出しやリストの崩れをその場で直せるので、GitHubに上げる前の仕上げにぴったり。
⏰ cron式ジェネレーター0 3 * * 1 が「毎週月曜の3時」だと即答できる人は少数派。cron式の意味を説明し、次に実行される日時まで見せてくれます。定期バッチの設定ミスを、動かす前に未然に防げます。
🏷️ OGP・metaタグ生成
SNSでシェアされたときのカード表示、あれを整えるmetaタグを生成。og:やtwitter:、descriptionをまとめて出力できます。「リンク貼ったのに味気ない見た目」を卒業したいサイト運営者に。
⚖️ JSON diff
2つのJSONの違いを色分けで表示。APIレスポンスが「昨日と何か変わった?」や、設定ファイルの差分チェックに。目視だと見逃す入れ子の奥の変化も、きっちり拾ってくれます。
📊 UTMパラメータ生成
「どのSNS経由で来た人が多い?」を測るための計測用URLを作成。utm_source等を入れると、流入元を分けて見られるURLが完成します。キャンペーンごとのリンク管理がラクになります。
🔃 YAML ⇄ JSON 変換
設定ファイルでよく使うYAMLとJSONを相互変換・整形・検証。「サンプルはJSONだけど自分の環境はYAML」みたいなときの変換に。インデントミスで動かないYAMLのチェックにも使えます。
🏗️ JSON-LD 構造化データ生成
検索結果にFAQやパンくずをリッチ表示させるための構造化データを生成。HowToやパンくずリストのJSON-LDをフォーム入力で作れます。SEOで一歩差をつけたいけど手書きは面倒、という人向けです。
🗃️ SQL整形
1行にベタ書きされた長いSQLを、読めるインデント付きに整形。逆に1行圧縮もできます。他人の書いたクエリを解読するときや、レビュー前の身だしなみ整えに便利です。
🌐 サブネット計算
CIDR(192.168.1.0/24 みたいなやつ)から、使えるIPの範囲やホスト数を算出。ネットワーク設計やファイアウォールの設定確認に。「/26って何台入るんだっけ?」を電卓なしで解決します。
🔢 TOTP(ワンタイムパスワード)
Base32のシークレットから、2段階認証の6桁コードを生成。認証機能を実装・テストするとき「わざわざスマホアプリを開かなくていい」のが地味に助かります(本番の秘密鍵の扱いはご注意を)。
🧮 ファイルチェックサム
ダウンロードしたファイルが壊れてないか、SHA-256などで照合。配布元のハッシュと突き合わせれば「改ざんされてない」の確認ができます。CDN用のSRIハッシュ生成にも対応しています。
◐ コントラスト比チェッカー
文字色と背景色、実はちゃんと読める組み合わせ?をWCAGのAA/AAA基準で判定。薄いグレー文字の「オシャレだけど読めない」を防げます。アクセシビリティを気にするデザイン・実装時にどうぞ。
🌈 CSSグラデーション生成
linear/radialのグラデーションを、プレビューを見ながら作成。色や角度をいじると即座に反映され、そのままコピペできるCSSが手に入ります。ヒーロー画像の背景づくりがサクッと終わります。
▢ box-shadowジェネレーター
CSSの影、あの数値を手で調整するのは職人技。ぼかしや広がり、色をスライダーで動かして、見た目で影を作れます。カードUIのふんわり感を詰めたいときにどうぞ。
📡 HTTPステータス一覧
「418ってなんだっけ?」を検索して即参照(ちなみに I’m a teapot です)。よく使う200/301/404/500から、マイナーなコードまで意味を確認できます。API開発でステータス選びに迷ったときの辞書に。
🎨 配色ジェネレーター
「メインカラーは決めたけど、合う色が思いつかない」を解決。1色を入れると、補色・類似色・トライアドなどの配色を提案してくれます。サイトやスライドのテーマカラー決めのとっかかりに。
気になったものからどうぞ。まとめては 💻 開発者ツールカテゴリー から。ブックマークしておくと、いざという時に「あ、あそこにあったな」となれます。