「テキストの違いを一目で見分けられるツールを自分で作れたら便利なのに…」
そう感じたことはありませんか？
今回ご紹介するのは、HTMLとJavaScriptだけで作れる「テキスト差分比較ツール（diffツール）」の作成方法です。
特別な開発環境は不要。WebブラウザがあればOK！ サーバーにデータを送信しないため、セキュリティ的にも安心して使えるツールになります。
この記事では、
・完成イメージの確認
・HTMLファイルの作成手順
・差分比較の実装ポイント（ライブラリの使い方含む）
・よくあるエラーの対処法
などを、初心者にもわかりやすく順を追って解説していきます。
さらに、JavaScriptの理解を深めたい方向けに、おすすめの学習書籍や講座も紹介しています。
ぜひこの記事を読みながら、自分だけの実用ツールを作ってみましょう！
こんな悩みありませんか？
テキストファイルや文章を見比べる場面で、こんなお悩みを抱えていませんか？
- 文章の修正箇所をどこか分からずに探すのが大変…
- プログラムのコードの差分確認をしたいが、手作業だと見落としが不安
- オンラインのdiffツールを使いたいけど、データを外部サーバーに送るのが心配
- もっと軽量で、ローカルで使えるツールを自作したい
- JavaScriptの勉強も兼ねて、自分で作ってみたいけどハードルが高そう…
こうした悩みは、自分専用のテキスト差分比較ツールを作ることで一気に解決できます。
「でも、自作なんて難しそう…」と思っていませんか？
実は、HTMLとJavaScriptだけで簡単に作成可能なんです。
次の章では、その解決方法をわかりやすくご紹介します。
自作のテキスト差分比較ツールなら安心・安全！
先ほど挙げたような悩みは、自分でテキスト差分比較ツール（diffツール）を作ることで、解決できます。
なぜ自作がよいのか？
- セキュリティ面も安心
一般的なオンラインツールは、入力内容がサーバーに送信されることがあります。
しかし、自作ツールはブラウザ上だけで動作するため、入力データは外部に送信されません。
機密情報の比較にも安心して使えます。 - 自分の用途に合わせてカスタマイズ可能
行ごと・文字ごとの比較、見やすいハイライト表示など、自分が欲しい機能だけを組み込むことができます。 - HTMLとJavaScriptだけで作れる
特別な環境や難しいプログラミング言語は必要ありません。
ローカルに保存したHTMLファイルをブラウザで開くだけで動作します。
こんな方におすすめ！
- Web開発初心者の方
- 自分用の便利ツールを持ちたい方
- 学習ついでに実践的なスキルを身につけたい方
次の章では、実際にテキスト差分比較ツールを作る手順をわかりやすく解説していきます。
実際に作ってみよう｜ステップごとに丁寧に解説
ここでは、初心者の方でも迷わないように、テキスト差分比較ツール（diffツール）をHTMLとJavaScriptで作成する手順をステップごとに解説します。
ステップ1：基本のHTMLファイルを作成
まずは、ツールの見た目（レイアウト）を作るHTMLから用意しましょう。以下のコードをコピーして、diff-tool.html という名前で保存してください。
ユーザーが入力できるように2つのテキストエリアと、比較するためのボタンを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキスト差分比較ツール</title> <style> body { font-family: sans-serif; padding: 20px; } textarea { width: 45%; height: 200px; margin: 5px; vertical-align: top; } .container { display: flex; justify-content: space-between; } .buttons { text-align: center; margin: 15px 0; } .result-container { display: flex; justify-content: space-between; } .result { width: 45%; border: 1px solid #ccc; padding: 10px; white-space: pre-wrap; background-color: #f9f9f9; } .added { background-color: #d4fcdc; } .removed { background-color: #ffe2e2; } </style> </head> <body> <h1>テキスト差分比較ツール</h1> <div class="container"> <textarea id="text1" placeholder="比較元テキスト（左側）"></textarea> <textarea id="text2" placeholder="比較先テキスト（右側）"></textarea> </div> <div class="buttons"> <button onclick="compareText()">比較する</button> </div> <div class="result-container"> <div class="result" id="result1"></div> <div class="result" id="result2"></div> </div> </body> </html> |
ステップ2：必要なライブラリを読み込む（diff.min.js）
差分比較には、自分で1文字ずつ比べるコードを書くと大変です。
そこで今回は、文字単位の差分を簡単に抽出できる便利なライブラリ「diff.min.js」を使います。
CDN（インターネット上の読み込みリンク）を使うことで、ファイルのダウンロードや設置は不要です。
以下のように、CDN経由でライブラリを読み込むだけで利用できます。
|
1 |
<script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script> |
このライブラリの Diff.diffChars() 関数を使えば、2つの文字列を1文字単位で比較し、どこが異なるのかをハイライトできるようになります。
ステップ3：JavaScriptで差分を比較し、結果を表示
実際の比較処理は、以下のJavaScriptで行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> function compareTexts() { const left = document.getElementById("input1").value; const right = document.getElementById("input2").value; const diff = Diff.diffChars(left, right); let result1 = ''; let result2 = ''; diff.forEach(part => { const escaped = part.value.replace(/</g, "<").replace(/>/g, ">"); if (part.added) { result2 += `<span style="background-color: #b3ffb3">${escaped}</span>`; } else if (part.removed) { result1 += `<span style="background-color: #ffcccc">${escaped}</span>`; } else { result1 += escaped; result2 += escaped; } }); document.getElementById("result1").innerHTML = result1; document.getElementById("result2").innerHTML = result2; } </script> |
ここでは次のような処理を行っています：
- 入力欄のテキストを取得
Diff.diffChars()で差分を取得- 変更部分を
<span>タグで色付け（追加は緑、削除は赤） - 結果をそれぞれの出力欄に表示
完成版のソースコード（コピー＆実行できます）
最後に、ここまで説明してきたテキスト差分比較ツールの完成形ソースコードを掲載します。
うまく動かない場合は、このコードと照らし合わせて確認してみてください。
ひとつの .html ファイルにまとめて保存し、ブラウザで開けば、差分をハイライトして表示できるWebツールが完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキスト差分比較ツール</title> <style> body { font-family: sans-serif; padding: 20px; } textarea { width: 45%; height: 200px; margin: 5px; vertical-align: top; } .container { display: flex; justify-content: space-between; } .buttons { text-align: center; margin: 15px 0; } .result-container { display: flex; justify-content: space-between; } .result { width: 45%; border: 1px solid #ccc; padding: 10px; white-space: pre-wrap; background-color: #f9f9f9; } .added { background-color: #d4fcdc; } .removed { background-color: #ffe2e2; } </style> </head> <body> <h1>テキスト差分比較ツール</h1> <div class="container"> <textarea id="text1" placeholder="比較元テキスト（左側）"></textarea> <textarea id="text2" placeholder="比較先テキスト（右側）"></textarea> </div> <div class="buttons"> <button onclick="compareText()">比較する</button> </div> <div class="result-container"> <div class="result" id="result1"></div> <div class="result" id="result2"></div> </div> <script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script> <script> function compareText() { const left = document.getElementById("text1").value; const right = document.getElementById("text2").value; const diff = Diff.diffChars(left, right); let leftHtml = ''; let rightHtml = ''; diff.forEach(part => { if (part.added) { rightHtml += '<span class="added">' + part.value + '</span>'; } else if (part.removed) { leftHtml += '<span class="removed">' + part.value + '</span>'; } else { leftHtml += part.value; rightHtml += part.value; } }); document.getElementById("result1").innerHTML = leftHtml; document.getElementById("result2").innerHTML = rightHtml; } </script> </body> </html> |
応用テクニック｜より便利なツールにするカスタマイズ例
基本の差分比較ツールが完成したら、さらに使いやすくするためのカスタマイズを加えてみましょう。ここでは、ユーザーにとって便利な機能をいくつか紹介します。
クリアボタンを追加する
ユーザーが入力欄をリセットしたりできるように、以下のようなボタンを追加しましょう。
|
1 |
<button onclick="clearText()">入力をクリア</button> |
JavaScriptの追加：
|
1 2 3 4 5 6 7 8 9 |
<script> function clearText() { document.getElementById("input1").value = ""; document.getElementById("input2").value = ""; document.getElementById("result1").innerHTML = ""; document.getElementById("result2").innerHTML = ""; } </script> |
スマホでも使いやすいレイアウトにする
スマホユーザーにとっても操作しやすいように、レスポンシブデザインを取り入れましょう。
CSS例（スタイルタグ内や別ファイルに記述）：
|
1 2 3 4 5 6 7 8 |
@media screen and (max-width: 768px) { .flex-container { flex-direction: column; } .result-box { width: 100%; } } |
HTMLにクラスをつける例：
|
1 2 3 4 |
<div class="flex-container" style="display: flex; gap: 20px;"> <div class="result-box" style="...">...</div> <div class="result-box" style="...">...</div> </div> |
入力欄のサイズや表示位置を調整する
テキストエリアの幅や高さ、配置を工夫することで、見やすさ・使いやすさが格段に向上します。たとえば次のように調整するとよいでしょう。
- テキストの折り返しやスクロールバーの設定
- 入力欄の開始位置（左上）を揃える
比較結果の色やスタイルを調整する
ユーザーによっては赤や緑が見づらいこともあるため、アクセシビリティを意識した配色もおすすめです。
CSS変数を使えば、後から簡単に変更できます。
このように、ちょっとした工夫を加えるだけで、実用性がグッと上がるツールになります。
もしWeb制作のスキルをもっと深めたいと感じたら、次の章でおすすめの本や講座も紹介していますので、参考にしてください！
おすすめの学習リソース｜HTMLやJavaScriptをさらに学びたい人へ
今回紹介した「テキスト差分比較ツール」は、HTMLとJavaScriptの基本を活用して作成しました。ここからさらに理解を深めていくことで、もっと高度なツールやWebサービスの開発ができるようになります。
初心者にもわかりやすく、実践的に学べるおすすめの書籍・講座をご紹介します。
おすすめの書籍
『確かな力が身につくJavaScript超入門』（SBクリエイティブ）
- JavaScriptを基礎から丁寧に学べる入門書。
- 実践的なサンプルも豊富で、今回のツールのような小さなアプリを自分で作れるようになります。
- 初学者にぴったりの1冊です。
『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）
- Web制作初心者に最適な入門書。HTMLとCSSの仕組みをやさしく解説。
- これからWebページを作ってみたい方にぴったり。
- レイアウトの基本やスタイルの調整方法など、実践的に学べます。
おすすめのオンライン講座
Udemy｜世界最大級のオンライン学習プラットフォーム
世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。
「何か作ってみたい！」という目標を持って学ぶことで、学習効率もモチベーションも格段に上がりますよ。
まとめ｜誰でも作れる！テキスト差分比較ツールでスキルアップしよう
今回は、HTMLとJavaScriptだけで作れるテキスト差分比較ツール（diffツール）の作り方をご紹介しました。
このツールは、一見難しそうに思えるかもしれませんが、基本的なWebの知識があれば十分に作成可能です。とくに、外部ライブラリ（diff.min.js）を活用することで、文字単位の比較機能も簡単に実装でき、見た目も整った本格的なツールになります。
「ツールを作る」という実践的な取り組みは、学習を定着させる最高の方法です。
今回の記事を参考にして、あなた自身のオリジナルツールを作る第一歩にしてみてください！
関連記事
ブラウザ上で使える便利な差分比較ツールを無料公開中！コピー＆ペーストで手軽に使えます。▼
差分比較ツールの具体的な使い道や、仕事・学習での活用法をわかりやすく紹介しています。▼
