47個のツールが登録されています

開発者・クリエイター向けユーティリティ

JSONの構文確認や構造検証,HTMLからJSXへの属性変換補助やJSONからの型定義のたたき台作成など,日々のコーディングを支援するツール群です.

開発データ整形とコード変換ツールの使い分け

JSONの字下げ整形かスキーマ仕様の適合か

構文エラーの確認やインデント整形を行うならフォーマッター,対応キーワードを限定した簡易JSON Schemaでデータ型や構造を確認するならバリデーターを選びます.

マークアップのJSX化かJSONの型定義生成か

既存HTMLの属性をReact向けJSXに置換したいならHTML変換,JSONデータ構造からTypeScriptの型インターフェースを自動生成したいなら型生成を用います.

用途に応じた作業パスの選択

JSON整形&構文チェッカー

ボタン操作でJSONの構文チェック,2/4スペースでの整形,ミニファイを行うツールです.大きな数値表記やキー順序を保持し,結果のコピーやJSONファイル保存に対応します.

ReactJSON.parse
使ってみる

相互エンコーダー (Hex/Binary/Base64/URL)

文字列やバイナリデータを,16進数・2進数・Base64・URLエンコードなどへリアルタイムに相互変換します.

TextEncoder/Decoderatob/btoa
使ってみる

コード・スクリーンショット作成

ソースコードを入力し,美しいグラデーション背景やエディタ風の装飾を施した画像を生成してエクスポートします.

Reacthighlight.js
使ってみる

SNS画像サイズ確認・リサイズ

お手元の画像1枚を,YouTubeサムネイルやXの投稿などのSNS向けプリセットサイズに合わせて切り抜くツールです.ブラウザのCanvasでプレビューを描画し,拡大率や位置を微調整してPNGとして書き出せます.

Canvas APIFileReader
使ってみる

ダミーテキスト生成器

レイアウト確認用のLorem Ipsumテキストや,日本語の古典文学(青空文庫など)風のランダムテキストを生成します.

ReactRandom sentence logic
使ってみる

フロントエンドコード圧縮 (Minifier)

HTML・CSS・JavaScriptの文字列や意味のある空白を保護しながら,コメントと冗長な空白を保守的に減らす簡易Minifyツールです.

ReactConservative text scanner
使ってみる

JWTデコーダー

JSON Web Token (JWT) のヘッダー,ペイロード,署名部分を瞬時にデコードし,構造を可視化する開発者向けツールです.Base64URLエンコードされたデータをJSON形式で整形表示します.このツールのデコード処理はブラウザ内で行うため,テスト環境でのデータ確認に活用できます.

ReactBase64URL
使ってみる

RegEx(正規表現)テスター & ビルダー

正規表現パターンとテスト文字列からマッチ箇所をリアルタイムにハイライト表示し,グループ抽出を行います.

ReactRegExp Engine
使ってみる

URLパラメータ解析・整形ツール

URLパラメータ解析・整形ツールは,複雑で長大なURLを「プロトコル」「ホスト」「ポート」「パス」「ハッシュ」「クエリパラメータ」の各要素に自動で分解し,画面上の入力フォームから直接編集・再構築を行うことができるツールです.手作業での書き換え時に発生しやすい「?」や「&」の付け忘れ,エンコード指定の誤りを防ぎ,直感的な操作でクエリの追加や無効化を制御できます.加えて,特定の文字列だけを個別にエンコード・デコードできるユーティリティ機能も搭載しています.すべての解析・再構築処理はご利用のブラウザ上で実行され,入力されたデータはツールが提供する画面UIの操作のみに利用されます.

ReactURLSearchParams
使ってみる

CSSシャドウ(Box Shadow)ビルダー

影の方向,ぼかし,拡散,色(RGBA),不透明度,内側シャドウ(Inset)を視覚的に調整し,CSSコードを出力します.

ReactTailwind CSS
使ってみる

CSSグラデーションジェネレーター

線形(Linear)または放射状(Radial)のCSSグラデーションを作成し,2〜8件のカラーストップと方向を調整できます.

ReactGradient Logic
使ってみる

HTMLエンティティ・エスケープ/アンエスケープ

HTMLで特別な意味を持つ5文字(&,<,>,",')を文字参照へ変換し,対応する限定表記を逆変換します.

ReactHTML Escaper
使ってみる

Markdownエディタ & ライブプレビュー

Markdownを入力しながら基本記法のHTMLプレビューを確認し,MD・HTMLのコピーと保存,ファイル読込ができます.

ReactCustom Parser
使ってみる

YAML ⇔ JSON 相互変換ツール

YAML文字列とJSONコードを相互に変換するWebユーティリティです.「方向を切り替え」ボタンで変換元と変換先を指定し,ブラウザのJavaScript環境を利用して入力テキストを解析します.結果はクリップボードにコピー可能です.

ReactFormat Converter
使ってみる

CSV ⇔ JSON/XML 相互変換ツール

CSV/TSVをJSONまたはXMLへ,JSON/XMLをCSV/TSVへ貼り付けたテキストで変換し,構文や列数の問題も確認できます.

ReactData Transformer
使ってみる

SQLフォーマッター・整形ツール

本ツールは,簡易的な文字列置換ベースでSQL文を整形・Minifyするブラウザ用ツールです.インデント調整(2/4スペース)や大小文字変換をサポートしますが,構文検査やDB接続機能はありません.

ReactText Formatter
使ってみる

HTTPヘッダー・レスポンス確認シミュレーター

メソッド,URL,Content-Type,認証などから,HTTPリクエストと説明用レスポンスの文字列例を静的に組み立てます.

ReactHTTP Mocking
使ってみる

XMLフォーマッター & 構文検証ツール

ブラウザのDOMParserとXMLSerializerを利用し,XMLのインデント整形とwell-formedness検証を行うツールです.2・4・8スペースの整形や圧縮に対応し,タグの不整合を検知します.

ReactDOMParser API
使ってみる

UUID / GUID 一括生成ツール

UUID(汎用一意識別子)をブラウザ上で一括生成します.最大500件まで指定でき,v4(乱数ベース)とv1(時刻・ランダムノード)の両方式に対応しています.開発テスト用のモックデータ作成やID採番に活用してください.

ReactWeb Crypto API
使ってみる

プレーンテキスト ⇔ HTML相互変換

プレーンテキストからHTMLコードへのタグ付け,およびHTMLコードからテキスト本文の抽出をブラウザ上で実行する相互変換ツールです.URLの自動リンク化や箇条書きのリスト化設定を切り替えながら,テキストデータを編集できます.

ReactHTML Processor
使ってみる

Gitコマンドヘルパー

コミット,ブランチ,取り消し,Stash等の登録済みレシピからGitコマンド候補を組み立てます.実行前にリポジトリ状態と入力値の確認が必要です.

ReactGit Template
使ってみる

Crontab(cron)式ビルダー

分・時・日・月・曜日をセレクトボックスから指定し,一般的な5フィールドCron式(* * * * *)と簡易説明を作成します.

ReactCron Expression Builder
使ってみる

CSSグリッドレイアウトビルダー

1〜12の列・行,共通トラックサイズ,行間・列間を指定し,CSS Gridの見本用CSSと連番HTMLを生成します.

ReactCSS Grid
使ってみる

カラーコントラストチェッカー

文字色と背景色からコントラスト比を計算し,WCAG 2.1基準(AA/AAA)への適合判定をリアルタイムに行います.

ReactWCAG Formulas
使ってみる

IPアドレス/CIDRサブネット計算ツール

IPアドレスとサブネットマスクから,ネットワークアドレス,ホスト範囲,ブロードキャストアドレスを自動計算します.

ReactBinary Math
使ってみる

HTML → JSX コンバーター

通常のHTMLコードを,Reactコンポーネント用のJSXコード(classのclassName置換,forのhtmlFor置換,インラインstyleのオブジェクト化,セルフクロージングタグ補完など)へ自動変換します.

ReactRegex Engine
使ってみる

Bash ⇔ PowerShell 翻訳・コマンド対比

基本的なシェルコマンドやスクリプト構造(ファイル移動,文字列検索,環境変数設定など)をBashとPowerShell間で簡易変換し,文法対比ガイドを表示します.

ReactRegex Engine
使ってみる

CSS 三角形ジェネレーター

borderプロパティのトリックを使い,CSSのみで描画可能な三角形(上向き,下向き,吹き出し用など)のサイズ,向き,色を指定してCSSおよびTailwindコードを取得します.

ReactCSS Border Math
使ってみる

JSON ⇔ YAML ⇔ TOML 相互変換

設定ファイル等で利用されるJSON,YAML,TOMLをブラウザ上で相互変換するツールです.基本的なネスト構造を処理する簡易独自パーサーを採用し,素早いフォーマット変更を支援します.高度な構文には対応しないため,変換結果の確認手順も解説しています.

ReactJSON API
使ってみる

フォント表示テスト・Base64 CSS生成

TTF・OTF・WOFF・WOFF2をブラウザへ読み込み,表示テストと元データを埋め込むBase64形式の@font-face CSS生成を行います.形式変換は行いません.

ReactFontFace API
使ってみる

Git Config / SSH Config 設定ビルダー

SSH ConfigとGit Configの貼り付け用テキストをフォーム入力から生成します.ファイルへの反映,鍵作成,接続試験は行いません.

React
使ってみる

配色パレット生成 & カラースキーム提案

ベースカラーをもとに,色彩調和論(補色,類似色,トライアド,分裂補色,テトラード,モノクローム等)に基づく美しいパレットを自動計算します.

ReactColor Theory Math
使ってみる

Nginx 設定ファイルビルダー (nginx.conf)

ドメイン,待受ポート,root,indexを指定し,任意のSSL,Gzip,静的キャッシュ,セキュリティヘッダー,複数リバースプロキシを含むNginx serverブロックの雛形を生成します.

React
使ってみる

.gitignore ファイルジェネレーター

Node.js, Python, Go, macOS, Windows, VSCode, IntelliJ, Unityなど,対象環境を選択してクリーンな.gitignoreファイルを作成します.

ReactDeduplication Engine
使ってみる

Docker-Compose 設定ビルダー

マルチコンテナ構成を定義する docker-compose.yml ファイルをフォーム操作でビジュアル設計します.

ReactYAML Builder
使ってみる

CSS アニメーション・キーフレームビルダー

タイムラインに沿って位置,サイズ,透明度,回転を指定し,変化のアニメーションをプレビューしながら,@keyframes のCSSコードを出力します.

ReactTimeline Editor
使ってみる

正規表現チェッカー&パース表示

正規表現を簡易トークン列へ分け,JavaScript RegExpによるマッチ結果と番号付きキャプチャを確認します.

ReactSimple Tokenizer
使ってみる

TypeScript / JavaScript 型定義自動生成

1つのJSONサンプルから,ネストした構造を含むTypeScriptのinterfaceまたはtype定義のたたき台を生成します.

ReactRecursive Parser
使ってみる

HTTP Status Code / APIレスポンスカタログ

代表的な23種類のHTTPステータスコードを分類・検索し,日本語説明,参照仕様,学習用レスポンス例を確認できます.

ReactReference Database
使ってみる

GraphQL クエリ整形・スキーマビルダー

GraphQLクエリ・SDLを独自の文字列処理で簡易整形・空白圧縮し,type・input・enum・unionのSDL雛形をGUIで生成します.

ReactString Formatter
使ってみる

マークダウンテーブルエディタ

スプレッドシート風のGUIで最大200行・30列の表を作り,列揃えを指定したMarkdownテーブルを生成します.

ReactDynamic Layout
使ってみる

CSS clamp() レスポンシブフォント計算機

画面幅の最小値・最大値に合わせて,フォントサイズをなめらかに拡大縮小するCSSの clamp() 式を生成します.

ReactClamp Calculator
使ってみる

curl → Fetch / Axios コード変換

curlコマンドをFetch APIやAxiosのJavaScriptコードへ一方向変換し,対応引数から編集用テンプレートを作成します.

ReactFetch API
使ってみる

SVG バッジジェネレーター

GitHubのREADMEやプロジェクトのドキュメントに最適な,フラットで美しいカスタムバッジ(SVG形式)をブラウザ上で即座に生成・ダウンロードできるツールです.ビルドのステータスやバージョン情報など,任意のラベルと値を指定し,スタイルやカラーを調整するだけで,プレビューを確認しながらSVGソースコードをコピーできます.

ReactText Metric Measurer
使ってみる

JSONデータ構造クエリ抽出(JSONPath / JQ簡易テスター)

JSON専用の簡易的なパス評価機能をブラウザ上で試せるテスターツールです.$.keyや.keyなどのJSONPath/jq風構文を用いて,配列添字,ワイルドカード,スライス,再帰キー探索,引用符付きブラケット記法によるデータ抽出を確認できます.フィルタや演算には対応しません.

ReactJSON.parse
使ってみる

Unicodeエスケープ・復元ツール

テキスト文字を各種Unicodeエスケープコード(\uXXXX,\u{XXXX},HTML数値文字参照,%uXXXX)へ相互変換・復元します.

ReactString Utilities
使ってみる

CSS影絵・ドット陰影ジェネレーター

1つのHTML要素とbox-shadowプロパティだけで描画される美麗なドット絵を自動作成・出力できるジェネレーターです.

ReactCSS Shadow
使ってみる

ZeroToolsは,ブラウザ内処理を活用したツールセットです

多くのツールで入力ファイルやデータの処理をブラウザ内で行う設計を採用しています.なお,外部API連携やアセット取得,アクセス解析など一部で通信が発生する場合があります.各ツールの仕様は各ページをご確認ください.

カテゴリ専門解説 & 活用ガイド

開発者・クリエイター向けユーティリティの活用ガイド

JSON整形・正規表現検証・コード生成をブラウザ上で手軽に実行

JSONやXMLのフォーマット,Base64エンコード,正規表現の検証,設定ファイルの雛形生成など,日々の開発や検証作業を支援するツール群です.ブラウザ上で素早く文字列を加工・解析できますが,本番環境の認証情報や機密の取り扱いには各組織のセキュリティ基準に応じた注意が必要です.

手軽な文字列・データ変換

JSON,YAML,CSVなどの相互変換やフォーマット整形を,外部サーバーへ送信せずブラウザ内で素早く処理します.

視覚的なUIによる設定生成

CSS Grid,シャドウ,Cron式,バッジ作成などをプレビューを見ながら直感的に組み立てられます.

開発ルーチンの省力化

UUIDの一括生成やHTMLエスケープなど,開発中に頻繁に発生する定型作業を即座に完了できます.

1データ構造の解析・検証とトークン確認の範囲

崩れたJSONやXMLの見やすいインデント整形,URLパラメータの分解,正規表現の動作テストをブラウザ内で実行できます.JWTデコーダーはヘッダーやペイロードの構造確認と有効期限の比較を行いますが,暗号署名の真正性検証は行いません.また,機密性の高い本番クレデンシャルの入力は避けることを推奨します.

2設定ファイル・コード生成ツールの活用と出力確認

Nginxのserverブロック,Docker Compose,.gitignore,TypeScript型定義,CSSコードなどの雛形をGUI操作から素早く作成できます.これらによって生成されるコードや設定は初期設定を補助するたたき台であり,本番環境へ適用する前に構文チェック(nginx -tなど)や動作確認をご自身で行う必要があります.

よくある質問(FAQ)

Q.JWTデコーダーでトークンの署名検証は行われますか?
いいえ,行われません.本ツールはBase64URLの文字列をデコードしてクレームや有効期限を表示するもので,暗号学的な署名の正当性検証は行いません.
Q.生成された設定ファイルやコードはそのまま本番環境で使用できますか?
生成結果は構成の目安となる雛形です.本番環境に適用する前に,必ず文脈に応じた構文検証やセキュリティ要件の確認を行ってください.