← 機能一覧に戻る
Free

Diff ツール

Diff ツールは、2つのテキストブロックを比較し、追加、削除、変更のない行を色分けしてハイライト表示します。統合(Git スタイル)表示と並列表示に対応し、空白の無視や大文字・小文字の無視といったオプションも備えています。編集内容の確認、設定ファイルの比較、API レスポンスのチェックに役立ちます。

2つのテキストを比較する作業は、頻繁に発生します。設定ファイルの変更点の確認、API レスポンスの比較、文字列移行によって不具合が起きていないかのチェックなど、Diff ツールを使えばこれらをスマートに行えます。テキスト A(元)とテキスト B(変更後)を貼り付けて「比較」をクリックしてください。出力では、すべての行が追加(緑色、+ マーカー)、削除(赤色、− マーカー)、または変更なしとして分類されます。すべてを縦に並べる「統合表示(Git スタイル)」と、左右に並べて比較する「並列表示」を切り替え可能です。このツールは最長共通部分列アルゴリズムを使用しているため、単純な行ごとの比較ではなく、最適なアライメントで表示されます。空白の無視や大文字・小文字の無視などの設定により、細かなフォーマットの違いに惑わされず、重要な変更点に集中できます。上部には追加・削除・変更なしの行数が表示され、概要を一目で把握できます。

ライブプレビュー
example.com
Diff Tool +3 added −2 removed 5 unchanged
Unified Side-by-side
1 1 function greet(name) {
2 console.log("Hi " + name);
2 + console.log(`Hello, ${name}!`);
3 + console.log(`Welcome back.`);
3 4 }
4 5  
5 greet("world");
6 + greet("Alice");
6 7 greet("Bob");
主な機能

行レベルの Diff

最長共通部分列アルゴリズムを使用して、すべての行を適切に配置した上で、追加、削除、変更なしとして分類します。

統合表示と並列表示

好みに合わせて、Git スタイルの統合表示(縦一列)と、読みやすい並列表示(左右二列)を切り替えられます。

色分けされた出力

追加された行は緑と + マーカー、削除された行は赤と − マーカー、変更なしの行は通常の色でハイライトされます。視覚的に素早く確認できます。

空白・大文字小文字の無視

オプションを切り替えることで、些細なフォーマットや文字種の違いを無視し、本来の意味のある変更点だけに集中できます。

Diff の統計情報

上部バーに「+N 追加 −N 削除 N 変更なし」のカウントが表示され、全行をスキャンしなくても概要をすぐに把握できます。

高速な処理速度

数千行のデータでもミリ秒単位で処理します。大容量の入力でも UI のレスポンスを維持するように制限が設けられています。

主な活用例

保存前の変更確認

ファイルを上書きする前に、旧バージョンと新バージョンを貼り付けて、意図した変更のみが含まれているか、誤って削除した箇所がないかを確認します。

API レスポンスの比較

修正前後のレスポンスを取得して Diff を行い、変更すべき箇所だけが正しく修正されているかを検証します。

設定ファイルの差異確認

dev と prod、旧と新など、2つの環境の設定ファイルを比較し、潜在的なバグの原因となる設定の食い違いを見つけます。

フォーマット結果の検証

コードフォーマッタを実行した際、実行前と実行後を比較して、空白や書式以外のロジックに影響が出ていないことを確認します。

テキスト移行のチェック

ページやドキュメント内のコピー(文章)を更新した際、新旧を比較して、すべての移行が正しく行われたかを検証します。

使い方
1

Diff ツールを開く

DevSuite Pro のドックにある Diff アイコンをクリックします。2つのテキストエリアが左右に並んだパネルが開きます。

2

テキスト A と B を貼り付ける

「テキスト A」に元のバージョンを、「テキスト B」に修正後のバージョンを貼り付けます。コード、JSON、ログ、文章など、どのようなテキストでも対応可能です。

3

オプションを切り替える

フォーマットや文字の大文字小文字の変更を無視したい場合は、それぞれのオプションを有効にします。

4

比較ボタンをクリック

「比較」を押すと、下に色分けされた Diff と上部に統計情報が表示されます。

5

表示を切り替える(オプション)

統合表示と並列表示を切り替えます。統合表示はコンパクト、並列表示は行の対応関係が明確です。

試してみませんか? Diff ツール?

DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加