ssecutils

🆚 Diff Viewer

2つのテキストを行単位で比較。LCS（最長共通部分列）アルゴリズムで差分を計算し、追加・削除をハイライト表示。 すべてブラウザ内で処理され、入力データはサーバーに送信されません。

6 行
7 行
+ 4 追加− 3 削除= 3 同一
差分（unified）
11 function hello(name) {
2−  console.log("hello, " + name);
3−  return name.length;
2+  console.log(`hello, ${name}`);
3+  return name.trim().length;
44 }
55 ​
6−const x = 42;
6+const x = 100;
7+const y = "new";

💡 Diffについて

  • LCS（最長共通部分列）アルゴリズムで2テキスト間の最小編集列を計算。古典的な方法ですが、行数が大きすぎなければ実用上十分です。
  • 行数は最大 5,000 行ずつまで。それ以上はメモリ消費とブラウザ保護のため拒否します（git diff など外部ツールの利用を推奨）。
  • 空白の差分を無視: 連続する空白を1つに正規化し、行頭・行末の空白も無視。インデント変更やエディタ自動整形を除外したい場合に。
  • 行番号は左（変更前）と右（変更後）を別々に表示。挿入のみの行は左、削除のみの行は右が空欄になります。
使い方と解説

2つのテキスト差分を比較する

Diff Viewer は、2つのテキストを比較し、追加、削除、変更を行単位で確認するツールです。設定ファイル、環境変数、ログ、コード片の違いを素早く見つけられます。

入力データの扱い

比較するテキストはブラウザ内で処理され、secutilsのサーバーへ送信されません。

設定変更の確認に使う

本番と開発環境の設定、変更前後のJSON、YAML、nginx設定などを比較すると、意図しない差分に気づきやすくなります。

レビュー前の自己チェック

小さなテキスト差分でも、手で追うと見落としが起きます。比較結果を見てから共有すると、レビューやトラブルシュートの時間を短縮できます。

見た目が同じなのに差分が出るとき

画面上では全く同じに見えるのに差分として検出される、という場面があります。原因はほぼ不可視文字です。まず疑うべきは改行コードで、Windows由来のCRLFとLinux/macOS由来のLFが混ざると、全行が差分として出ます。次に多いのが行末の余分な半角スペースとタブとスペースの混在で、これらは目視では区別できません。ファイル先頭に付くBOM（U+FEFF）も同様で、1文字目だけが違うという不可解な差分になります。日本語環境では全角スペース（U+3000）が半角に見える環境もあり、これも差分の原因になります。逆に言えば、差分ツールは目に見えない違いを可視化する道具でもあります。設定ファイルをコピー＆ペーストして動かなくなったときは、動く方と動かない方を並べて比較すると、混入した不可視文字が特定できることがあります。

Diff Viewer でできること

  • 行単位の差分比較
  • 追加、削除、変更を色分け
  • 設定ファイルやログ比較に便利
関連ツール

次に使うツール

作業の流れに近いツールへすぐ移動できます。

{}JSON Formatter / ValidatorAPIレスポンスの整形
YMLJSON ↔ YAML Converter設定ファイル形式の変換
.*Regex Testerログ抽出や入力チェックの検証
#Hash Generatorファイル改ざんや一致確認
IDUUID GeneratorテストデータのID作成
解説記事

このツールに関連する解説記事

すべての記事 →
Security約10分
OWASP Top 10 入門Webアプリの代表的なリスクを、A01からA10まで実装者が押さえるべき観点で読み解きます。
Security約12分
ソフトウェアサプライチェーン攻撃2026 - npm/PyPIの6類型と防御npm/PyPIを狙うサプライチェーン攻撃を6類型（タイポスクワッティング・依存関係混同・slopsquatting・メンテナ乗っ取り・悪意あるインストールスクリプト・自己増殖ワーム）で体系整理。Mini Shai-HuludやTrapDoor、AIが幻覚した存在しないパッケージ名の悪用、累計120万超の悪性パッケージの実態と、lockfile・Trusted Publishing・リポジトリファイアウォール・SBOM・環境分離による防御を日本語で解説します。