ブログBLOG

長い行でもサクサク動く！自社ツール「文字列差分チェッカー」の紹介

更新日：2026/11/13

自社で作成したツール「文字列差分チェッカー」の紹介です。

Webサイトの制作をしていると、クライアントからの修正依頼を反映したり、以前のソースからの微妙な更新をしたりするなど、2つのテキストを見比べるケースは意外と多くあります。
そんなときに活躍するのがこのツールです。

1 本ツールが必要な理由その１：目視チェックの限界
- 1.1 人の目は「読めてしまう」
- 1.2 見た目が同じでも違う文字
2 本ツールが必要な理由その２：あったらよいのに、と思う機能を満たしたサイトが無い
3 文字列差分チェッカーの紹介
4 まとめ

本ツールが必要な理由その１：目視チェックの限界

2つのテキストを比較する一番シンプルな方法は、並べて目で確認することです。

人の目は「読めてしまう」

しかし、人の目には少しくらい文字が違っていても、文脈から補って正しく読めてしまうという特徴があります。以下のようなものは見逃しやすい部分でしょう。

住所の番地や電話番号の数字が1つだけ違う
「10:00」と「9:00」のような営業時間の変更
「土日祝」と「日祝」のように1文字だけ消えている
長い文章の途中で、1文だけ追加されている

見た目が同じでも違う文字

さらにやっかいなのが、そもそも見た目では区別できない違いです。
たとえば次の文字は、フォントによってはほとんど同じに見えますが、コンピュータにとってはすべて別の文字です。

– / ‐ / − / ー
ハイフン、マイナス、長音など

A / Ａ、1 / １
半角と全角

一 / ⼀
通常の漢字と康熙部首

※康熙部首については、以前のブログ機種依存文字の解決方法について【変換ツール紹介！】で詳しく解説していますので、よろしければあわせてご覧ください。

いずれにしても、どれだけ注意深く見ても目視では限界があります。

本ツールが必要な理由その２：あったらよいのに、と思う機能を満たしたサイトが無い

それで、世の中にはいくつもの「差分チェックツール」なるサイトがあります。
わたしもWeb制作にあたりそういうサイトを使ってきて、大変助けられていました。
しかし、いろんなシーンで使っているうちに「かゆいところに手が届かない」という気持ちになり、こういう機能があったらよいのになぁ、と思ううちに、「そうだ！自社で作ればよいんだ！」と思いいたることになりました。

例えば以下のような機能です。

差分が無い箇所は表示を省略する機能

長い原稿の中で数か所の違いがあるだけの場合、「差分があります」という表示になったとしても、そもそもどこに差分があるのかを目視で探さないといけない、ということがあります。
差分が無い箇所は表示を省略できればそんな手間は無くなります。

差分はあるけど、気にしなくていい違いは無視する機能

機械は正直なので、全角と半角の違いも行末に残ったスペースも、すべて差分として教えてくれます。
でも、原稿とWebページの文言を比べたいだけのときに、インデントや改行位置の違いが大量に出てきても困りますよね。
差分が多すぎると、結局その中から大事な変更を目で探すことになってしまい、比較ツールを使った意味が薄れてしまいます。

長い行の比較

行単位で比較するツールの場合、もうひとつ困るのが、1行が非常に長いテキストです。
たとえば、minimize（改行や余分な空白を取り除く処理）されたHTMLやCSSは、ファイル全体が1行になっていることもあります。これを行単位で比較すると、ファイルのどこか1文字変わっただけでも「1行まるごと変更」という結果になってしまいます。

文字列差分チェッカーの紹介

上記のような機能が入った「文字列差分チェッカー」の紹介です。
以下の画像のようなツールです。

変更前と変更後の文字が色分けされ、1文字単位で違いが分かります。

比較オプションがいくつかあり、チェックを入れた項目の違いは、差分として扱われなくなります。比較後にチェックを変えるとその場で再比較されるので、試しながら絞り込めます。

そのほかにも、使いやすさのための工夫をいくつか入れています。

まず、変更のあった行は文字単位で比較しているので、minimizeされた長い1行のテキストでも、どこが変わったのかを絞り込めます。差分は画面右側のボタンで1つずつ順番にたどれるので、長い行の途中にある変更も見逃しません。
また、比較はすべてお使いのブラウザ内で行っているため、入力した内容がサーバーに送信されることはありません。公開前の原稿なども安心して貼り付けていただけます。入力できる文字数も、1つのテキストにつき100万文字までと余裕を持たせています。
結果の表示も見やすくなるようにしています。初期状態では一致している行を折りたたみ、差分の前後3行だけを残して表示するので、長い文章でも変更箇所に集中できます。さらに「空白を記号で表示」をONにすると、半角スペースは「･」、全角スペースは「□」、タブは「→」で表示されるので、目に見えない空白の違いも確認できます。

なお、差分の量が非常に多い場合は、処理を現実的な時間で終えるため、一部が大まかな比較結果になることがあります。その場合は結果の上に注意書きが表示されます。
こんな機能が欲しい、といったご要望がありましたら、Contactからお気軽にご連絡ください。

まとめ

2つのテキストの比較は、地味ながら間違いが許されない作業です。
目視では見落としが避けられず、かといって単純に比較すると気にしなくていい違いまで大量に出てきます。大事なのは、「今回は何を違いとして扱いたいのか」を決めて比較することだと思います。
原稿の修正確認やファイルの見比べなど、テキストを比較したくなったときには、ぜひ「文字列差分チェッカー」を使ってみてください！