ご利用ガイド
ダッシュボード
JSON整形
SQL整形
UUID生成
ULID生成
パスワード生成
APIキー生成
URLエンコーダー
UNIXタイム変換
IP/CIDR計算機
テキスト比較
SVGビューアー
カラーパレット
プライバシーポリシー

ヘルプ

ご利用ガイド

このページでは、devTools が提供する全ツールの概要・使い方・仕様を一覧で確認できます。

SQL整形ツール

概要

SQLフォーマッターは、読みにくいSQLクエリを整形・可読化するオンラインツールです。JOIN、WHERE、GROUP BYなどのキーワードを適切なインデントで整列させ、コードレビューやドキュメント作成を効率化します。

使い方

  1. テキストエリアにSQLクエリを貼り付けます。
  2. 「インデント」でスペース数を選択します。
  3. 「モード」で整形方法（標準整形 / 右揃え/表形式 / 圧縮）を選択します。
  4. 「予約語」・「識別子」で大文字 / 小文字 / 変更しない を選択します。
  5. 「変換」ボタンをクリックすると整形結果が表示されます。

仕様・用語解説

  • 「モード」: 整形方法の選択
    • 「標準整形」: 各キーワードを改行・インデントして読みやすく整形します。
    • 「右揃え/表形式」: キーワードを右揃えでタブ状に整列し、SQLキーワードが縦に並びます。
    • 「圧縮」: 改行・余分なスペースを除去して1行に圧縮します。
  • 「予約語」: SQLキーワードの大文字/小文字変換
    • 「大文字」: SELECT、FROMなどのSQLキーワードをすべて大文字に変換します。
    • 「小文字」: SQLキーワードをすべて小文字に変換します。
    • 「変更しない」: 入力のケースをそのまま保持します。
  • 「識別子」: テーブル名やカラム名の大文字/小文字を変換します。大文字 / 小文字 / 変更しない から選択できます。
  • 「インデント」: 出力するSQLのインデントに使用するスペース数を設定します（例: 2スペース、4スペース）。

ユースケース

  • コードレビュー前にSQLを整理して可読性を向上させたい場合。
  • ORMが自動生成したクエリのデバッグ・解析時。
  • ドキュメント用に整形されたSQLスニペットを作成したい場合。

JSON整形ツール

概要

JSON整形ツールは、読みにくいJSON文字列を自動的に整形・フォーマットするオンラインツールです。インデントの調整・ミニファイ（圧縮）に対応し、APIレスポンスや設定ファイルのデバッグ・確認作業を効率化します。

使い方

  1. テキストエリアにJSONテキストを貼り付けます。
  2. 「モード」で整形方法（整形 / 圧縮）を選択します。
  3. 「インデント」でスペース数を選択します。
  4. 「変換」ボタンをクリックすると結果が表示されます。
  5. クリップボードへコピーボタンで整形後のJSONをコピーできます。

仕様・用語解説

  • JSON（JavaScript Object Notation）: 軽量なデータ交換フォーマットです。人間にも機械にも読みやすく、REST APIのリクエスト・レスポンスや設定ファイルなどで広く使われています。RFC 8259 / ECMA-404で標準化されています。
  • 「整形」モード: インデントと改行を付与してJSONを読みやすく整形します。ネストされたオブジェクトや配列が階層構造で表示されます。
  • 「圧縮」モード: 改行・スペースをすべて除去してJSONを1行に圧縮します。ネットワーク転送量を削減したい場合や、HTTPリクエストボディとして利用する場合に有効です。
  • 「インデント」: 整形モード時に使用するスペース数を設定します（例: 2スペース、4スペース）。チームのコーディングスタイルに合わせて選択できます。
  • バリデーション: 入力されたJSONが不正な場合（構文エラー）はエラーメッセージが表示されます。JSONのキーは二重引用符で囲む必要があり、末尾のカンマ（trailing comma）は許可されていません。

ユースケース

  • APIレスポンスを読みやすく整形してデバッグする場合。
  • 設定ファイル（package.json、tsconfig.jsonなど）の確認・編集時。
  • 本番環境向けにJSONを圧縮してファイルサイズを削減する場合。

APIキー生成ツール

概要

APIキージェネレーターは、安全なAPIキーをオンラインで生成するツールです。Base62・16進数・UUID v4の3形式に対応し、任意のプレフィックスを付与したAPIキーを一括生成できます。

使い方

  1. 「フォーマット」でAPIキーの形式（Base62 / Hex / UUID v4）を選択します。
  2. 「文字数」でキーの長さを指定します（Base62・Hex形式の場合）。
  3. 「プレフィックス」に付加する文字列を設定します（省略可）。
  4. 「個数」で生成件数を指定します。
  5. 「生成」ボタンをクリックします。

仕様・用語解説

  • 「Base62」フォーマット: [0-9A-Za-z]の62文字を使用します。URLセーフで高いエントロピーを実現しており、Stripeなど多くのサービスで採用されています。
  • 「Hex」フォーマット: [0-9a-f]の16文字（16進数）を使用します。暗号ライブラリとの互換性が高く、SHA-256などのハッシュ関数と組み合わせやすい形式です。
  • 「UUID v4」フォーマット: RFC 4122に準拠したUUID v4形式（xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx）で生成します。既存システムとの互換性が高い標準形式です。
  • プレフィックス: sk_、pk_、api_などのプレフィックスを付与することで、キーの用途や権限を識別しやすくします（例: OpenAIのsk-...形式）。
  • エントロピーと安全性: Base62で32文字の場合、エントロピーは約190ビットとなり、総当たり攻撃に対して非常に高い耐性を持ちます。

ユースケース

  • REST APIの認証トークンやAPIキーの生成。
  • ウェブフックシークレットの生成。
  • マルチテナントSaaSアプリケーションの顧客向けAPIキー発行。

パスワード生成ツール

概要

パスワードジェネレーターは、セキュアなランダムパスワードをオンラインで一括生成するツールです。文字種・長さ・生成件数をカスタマイズでき、エンジニアのシステム構築からエンドユーザーの初期パスワード設定まで幅広く活用できます。

使い方

  1. 「文字」で文字種（英数字 + 記号 / 英数字 / 英小文字 + 数字 / 数字のみ）を選択します。
  2. 「文字数」でパスワードの長さを指定します。
  3. 「個数」で一括生成数を指定します。
  4. 必要に応じて「類似文字を除く」を有効にします。
  5. 「生成」ボタンをクリックします。

仕様・用語解説

  • 「英数字 + 記号」: 大文字・小文字・数字・記号を含む最もセキュアな文字セット。
  • 「英数字」: 大文字・小文字・数字のみ（記号不可なシステム向け）。
  • 「英小文字 + 数字」: 小文字英字と数字のみ（可読性重視・URLセーフ用途）。
  • 「数字のみ」: 数字のみ（PINコード・数値OTPなど）。
  • 「類似文字を除く」: 0とO、1とl、Iと|など、視覚的に混同しやすい文字を除外します。印刷物や口頭伝達での誤読防止に有効です。
  • パスワード強度（エントロピー）: 強度はエントロピー（ビット数）で評価されます。文字種が多く、長さが長いほど解読に要する計算量が指数的に増加します。一般的に80ビット以上が推奨されます。

ユースケース

  • 新規ユーザーの初期パスワードを一括生成したい場合。
  • APIシークレットや暗号化キーの生成。
  • テスト用ダミーパスワードの作成。

カラーパレット

概要

カラーパレットツールは、入力したHEXカラーコードからMaterial Designライクなカラーシェードパレットを自動生成するオンラインツールです。比較モードとシェード生成モードの2種類に対応しています。

使い方

  1. 「比較」または「濃淡」モードを選択します。
  2. HEXカラーコード（例: #3490DC）を1つ以上入力します。
  3. 「生成」ボタンをクリックします。
  4. 各シェードのカラーコードをクリックしてコピーできます。

仕様・用語解説

  • 「比較」モード: 複数のカラーを並べて比較します。各色のシェード（50〜900）を横に並べて表示し、カラー間のトーンの違いを確認できます。
  • 「濃淡」モード: 1色のシェードパレットを詳細表示します。選択した色の全シェードを一覧で確認できます。
  • シェードステップ: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900の10段階で表示します。Material Designの慣習に基づいており、数値が小さいほど明るく、大きいほど暗い色になります。
  • シェード生成アルゴリズム: 入力色を500ステップの基準色として、それより明るい色（50〜400）は白との線形補間（mixColors）、暗い色（600〜900）は黒との線形補間で生成します。例: 50ステップは白を90%混合、900ステップは黒を60%混合します。
  • WCAGコントラスト比: 各シェードのテキスト色（黒または白）は、相対輝度（Relative Luminance）をL = 0.2126R + 0.7152G + 0.0722Bの式で計算し、WCAGガイドラインに基づいてコントラストが高い方を自動選択します。
  • HEXカラーコード: 3桁形式（#RGB）と6桁形式（#RRGGBB）の両方に対応しています。#プレフィックスの有無も問いません。

ユースケース

  • Material DesignやTailwind CSSのカラーシステム設計。
  • ブランドカラーのシェードパレットを自動生成したい場合。
  • アクセシビリティ（WCAG）対応のカラー選定と確認。

UUID生成ツール

概要

UUIDジェネレーターは、RFC 4122（RFC 9562）に準拠したUniversally Unique Identifier（UUID）をオンラインで生成するツールです。v1・v4・v7の3バージョンに対応し、最大100件の一括生成が可能です。

使い方

  1. 生成するUUIDのバージョン（v1 / v4 / v7）を選択します。
  2. 「生成数」に件数を指定します（最大1,000件）。
  3. 「生成」ボタンをクリックします。
  4. 生成されたUUIDリストをコピーして利用します。

仕様・用語解説

  • フォーマット: UUIDは xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx の形式（M=バージョン番号、N=バリアントビット）で表記される128ビットの識別子です。
  • UUID v1: 60ビットのタイムスタンプとMACアドレス（またはランダム値）を組み合わせて生成します。時系列に並びやすい一方、マシン情報が含まれる場合があります。
  • UUID v4: 122ビットをすべてランダムな値で生成します。最も広く使われており、プライバシー安全性が高く、衝突確率は天文学的に低い（2の122乗通り）です。
  • UUID v7: 48ビットのUnixタイムスタンプ（ミリ秒精度）＋ランダム値で構成されます。RFC 9562で定義された最新仕様で、時系列ソートが可能かつv4と同等のランダム性を持ちます。DBインデックスの効率化に有利です。
  • 衝突確率: UUID v4の場合、10兆個生成しても衝突確率は0.00000001%以下です。実用上、重複は無視できます。

ユースケース

  • データベースのプライマリキーやレコードIDの生成。
  • 分散システムでのセッションID・リクエストトレースIDの生成。
  • ファイル名の一意化・マイクロサービス間の相関IDとして活用。

ULID生成ツール

概要

ULIDジェネレーターは、Universally Unique Lexicographically Sortable Identifier（ULID）を生成するオンラインツールです。UUIDの代替として、時系列ソート可能な一意識別子を一括生成できます。

使い方

  1. 生成件数を指定します。
  2. 「基準日時(タイムスタンプ)」に基準となる時刻（ミリ秒）を設定します（デフォルトは現在時刻）。
  3. 同一ミリ秒内でも値を単調増加させたい場合は「単調増加」を有効にします。
  4. 「生成」ボタンをクリックします。

仕様・用語解説

  • ULID仕様: 128ビット＝48ビットのタイムスタンプ（ミリ秒精度）＋80ビットのランダム値で構成されます。Crockford's Base32でエンコードされた26文字の文字列（例: 01ARZ3NDEKTSV4RRFFQ69G5FAV）です。
  • 辞書順ソート: ULIDの先頭10文字が時刻を表すため、辞書順ソート（文字列比較）がそのまま時系列ソートになります。DBインデックスの局所性が高まりパフォーマンスが向上します。
  • 「単調増加」機能: 同一ミリ秒内に複数のULIDを生成した場合、ランダム部分をインクリメントして単調増加を保証します。イベントの順序を厳密に保持したい場合に使用します。
  • UUIDとの比較: UUID v4はランダムな文字列のため辞書順ソートに時系列の意味がありませんが、ULIDは辞書順ソート＝時系列ソートになります。RDBMSのクラスタードインデックスで特に有効です。
  • Crockford's Base32: I, L, O, U を除外した32文字セットを使用。視覚的に紛らわしい文字を排除し、人間が読みやすい形式にしています。

ユースケース

  • 時系列順のログIDやイベントIDの生成。
  • RDBMSのプライマリキーとしてインデックス効率を高めたい場合。
  • ファイル名や一時トークンの一意識別子として活用。

UNIXタイム変換

概要

UNIXタイム変換ツールは、UNIXタイムスタンプ（エポック時刻）と人間が読める日時表記を相互変換するオンラインツールです。秒・ミリ秒単位のタイムスタンプに対応し、複数の形式（ISO 8601・RFC 2822など）とタイムゾーンでの時刻表示が可能です。

使い方

  1. 「変換モード」を「日時に変換」または「UNIXタイムスタンプに変換」から選択します。
  2. タイムスタンプ→日時の場合：UNIXタイムスタンプ（秒またはミリ秒）を入力します。
  3. 日時→タイムスタンプの場合：日付と時刻を入力します。
  4. IANA形式のタイムゾーン（例: Asia/Tokyo）を選択します。
  5. 「変換」ボタンをクリックします。

仕様・用語解説

  • UNIXタイムスタンプ: 1970年1月1日 00:00:00 UTC（Unixエポック）からの経過秒数です。32ビット整数の場合、2038年1月19日 03:14:07 UTCで上限に達する「2038年問題」が存在します。
  • タイムスタンプ（秒）: Math.floor(Date.now() / 1000)で取得できる10桁の数値です。
  • タイムスタンプ（ミリ秒）: Date.now()で取得できる13桁の数値です。JavaScriptやJavaで広く使用されます。
  • ISO 8601: 2024-01-15T12:30:00+09:00形式の国際標準日時表記です。タイムゾーンオフセットを明示できます。
  • RFC 2822: Mon, 15 Jan 2024 12:30:00 +0900形式のメールDate:ヘッダで使用される表記です。
  • IANAタイムゾーン: Asia/Tokyo、America/New_Yorkなどの標準的なタイムゾーン識別子です。夏時間（DST）も自動考慮されます。

ユースケース

  • APIレスポンスに含まれるUNIXタイムスタンプを人間が読める日時に変換する場合。
  • ログファイルのタイムスタンプ解析。
  • 異なるタイムゾーン間での時刻変換・比較。

URLエンコード・デコードツール

概要

URLエンコード・デコードツールは、URLで使用できない文字を%XX形式に変換（エンコード）、またはその逆変換（デコード）を行うオンラインツールです。encodeURIとencodeURIComponentの2種類のJavaScriptメソッドに対応しています。

使い方

  1. 「変換する文字列」に変換したい文字列を入力します。
  2. 「モード」を「エンコード」または「デコード」から選択します。
  3. 「URLの記号（/ や ? など）もすべて変換する」をオンにするとencodeURIComponent相当（記号もすべてエンコード）、オフにするとencodeURI相当（URLの構造文字は保持）の動作になります。
  4. 「変換」ボタンをクリックします。

仕様・用語解説

  • encodeURI: URLとして有効な文字（スキーム http://、パス区切り /、クエリ文字 ?・=・&など）はエンコードしません。URL全体をそのまま渡す場合に使用します。
  • encodeURIComponent: A-Z a-z 0-9 - _ . ! ~ * ' ( )以外の文字をすべてエンコードします。クエリパラメータの値など、URLの一部を渡す場合に使用します。
  • %エンコーディング（パーセントエンコーディング）: 各文字をUTF-8でエンコードし、各バイトを%XX形式（XXは16進数）で表現します（例: 「あ」→ %E3%81%82）。
  • デコード: decodeURI・decodeURIComponentに対応し、エンコード済みの文字列を元のテキストに戻します。
  • encodeURIとencodeURIComponentの違い: encodeURIは:、/、?、#などURLの構造文字をエンコードしませんが、encodeURIComponentはこれらもすべてエンコードします。

ユースケース

  • APIリクエストのクエリパラメータに日本語や特殊文字を含める場合。
  • フォームデータをURLセーフな形式に変換する場合。
  • ブラウザのアドレスバーに表示されるエンコード済みURLの内容を解読する場合。

テキスト比較ツール

概要

テキスト比較ツールは、2つのテキストの差分をサイドバイサイドで視覚化するオンラインツールです。追加・削除・変更箇所を行ごとにハイライト表示し、コードや文書の差分確認を効率化します。

使い方

  1. 「比較元テキスト」エリアに元のテキスト（変更前）を入力します。
  2. 「比較先テキスト」エリアに変更後のテキストを入力します。
  3. 「比較」ボタンをクリックすると差分がハイライト表示されます。
  4. 入力内容をリセットしたい場合はクリアボタンを使用します。

仕様・用語解説

  • 差分アルゴリズム（LCS）: LCS（Longest Common Subsequence：最長共通部分列）ベースのdiffアルゴリズムを採用しています。2つのシーケンス間で最も長い共通の部分列を求め、追加・削除箇所を特定します。
  • 行単位の差分: テキストを行単位で比較し、変更のあった行を識別します。各行の変更内容を原文と並べて表示します。
  • ハイライト色の意味: 緑は変更後に追加された行、赤は削除された行を示します。変更行は元の色と対比して表示されます。
  • サイドバイサイド表示: 原文と変更文を並列で表示することで、対応する行の変化が一目でわかります。ユニファイドdiff（---/+++形式）と異なり、変更前後を同時に確認できます。
  • 差分結果の構造: 各行に対して元のテキスト・変更後のテキスト・ハイライト情報が生成されます。変更なし・追加・削除・変更の4種類の状態が識別されます。

ユースケース

  • コードレビュー前に変更内容を確認する場合。
  • 設定ファイルのバージョン間比較。
  • 文書の校正・改訂内容の確認と管理。

SVGビューアー

概要

SVGビューアーは、SVGコードのリアルタイムプレビューとPNG画像への変換をオンラインで行えるツールです。キャンバスサイズ・背景色・スケール・オフセットを設定しながらプレビューし、PNG形式でダウンロードできます。

使い方

  1. 「SVGコード」エリアにSVGコードを貼り付けるか、サンプルを選択します。
  2. 「Canvas設定」でキャンバスの「幅」・「高さ」（ピクセル）を設定します。
  3. 「背景色」を指定するか、「背景を透過」を有効にします。
  4. 「SVG設定」で「拡大率」と「X座標」・「Y座標」（描画位置のオフセット）を調整します。
  5. プレビューを確認し、「PNG形式でダウンロード」をクリックして画像を保存します。

仕様・用語解説

  • SVG（Scalable Vector Graphics）: XMLベースのベクター画像形式（W3C標準）です。数式で図形を表現するため解像度に依存せず、どのサイズでも鮮明に表示されます。
  • PNG変換の仕組み: ブラウザのCanvas APIを使用してSVGをラスタライズします。drawImage()でSVGをCanvasに描画し、toDataURL('image/png')でPNGデータに変換します。
  • 「拡大率」: SVGを拡大・縮小して描画する倍率です。100%がデフォルトで、Retinaディスプレイ向けに200%で出力することもできます。
  • 「X座標」・「Y座標」: SVGの描画位置をX・Y方向にずらすピクセル数です。キャンバス内の配置調整に使用します。
  • 透明背景: PNG形式はアルファチャンネル（透明度）をサポートするため、透明背景のアイコンやロゴの出力が可能です。
  • キャンバスサイズ: 出力PNGのピクセルサイズを決定します。デフォルトは256×256ピクセルです。

ユースケース

  • デザインツールで作成したSVGアイコンをPNGに変換する場合。
  • OGP画像・faviconなどの素材を作成・確認する場合。
  • SVGパスやアニメーションのプレビュー・デバッグ。

IP/CIDR計算機

概要

IP/CIDR計算機は、IPアドレスとCIDR表記からネットワーク情報を計算するオンラインツールです。IPv4およびIPv6に対応し、サブネットマスク・ネットワークアドレス・使用可能ホスト数・2進数表現などを算出します。

使い方

  1. プロトコル（IPv4 / IPv6）を選択します。
  2. 「IPアドレス」を入力します（例: 192.168.1.100）。
  3. 「CIDR」でプレフィックス長を指定します（例: 24）。
  4. 「生成」ボタンをクリックします。

仕様・用語解説

  • CIDR（Classless Inter-Domain Routing）: IPアドレスとサブネットプレフィックス長をスラッシュ区切りで表記する方式（例: 192.168.1.0/24）です。クラスフルアドレッシング（A/B/Cクラス）を廃止し、柔軟なIPレンジ割り当てを実現します。
  • サブネットマスク: ネットワーク部とホスト部を区別するビットマスクです。/24は255.255.255.0に相当します。
  • ネットワークアドレス: サブネット内の最初のアドレス（ホスト部が全0）です。ルーティングの宛先として使用されます。
  • ブロードキャストアドレス: サブネット内の最後のアドレス（ホスト部が全1）です。IPv6には存在しません。
  • 使用可能ホスト数: 2^(ホスト部のビット数) - 2で計算します（ネットワークアドレスとブロードキャストを除く）。
  • IPv4とIPv6の違い: IPv4は32ビット（4オクテット、ドット区切り十進表記）、IPv6は128ビット（8グループの16進数、コロン区切り）で表現されます。
  • 2進数表現: IPアドレスをビット列で表示します。ネットワーク部とホスト部の境界を視覚的に確認できます。

ユースケース

  • VPCやオンプレミスネットワークのサブネット設計。
  • ファイアウォールルールのIPレンジ確認と検証。
  • AWS・GCP・Azureのネットワーク設計でのCIDRブロック計算。