突然ですが、この2つのソースコード何が違うかパッと見てわかりますか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/sytle.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>答えは、
<link rel="stylesheet" href="css/style.css">この「style.css」と「sytle.css」の違いです。
目視で確認するのはなかなか大変ですが「WinMerge」というツールを使うと
これが一瞬でわかります。
WinMergeは、こんな時に使えます。
- お手本通りやったのに上手くいかない
➡︎ どこが違うのか並べて確認できる！ - ソースコードを色々修正したけど、余計な箇所を触っていないか確認したい
➡︎ バックアップのファイルと編集後のファイルを比べて確認できる！
WinMergeのインストール
まずは、こちらからWinMergeをインストールしましょう！
ダウンロードできたら、左下をクリック
「変更を加えますか？」という表示が出たら「はい」をクリック。
その先も「次へ/Next」を押してどんどん進んでいってください。
インストールが完了すると、WinMergeが起動します。
WinMergeを使ってみよう
比べたいファイルをエクスプローラーからWinMergeにドラッグ&ドロップします。
もう一つのファイルもドラッグ&ドロップします。
2つセットできたら「比較(M)」をクリック
すると、差分があるところは黄色で色がつきます。一瞬ですね。
左上の矢印をクリックすると、差分を一つずつ確認していくことができます。
（今回は、一つしか差分がありません）
以上です！
ちなみに、WinMerge上で編集すると自動的に元のファイルも編集されるようになっています。
Macの方はこちら！CompareMergeのインストール
WinMergeはWindows用のツールなので、
今回はMacで使える差分確認ツール「CompareMerge」の紹介です。
Apple Storeで「CompareMerge」を検索してみます。
有料版と無料版がありますが、無料版で大丈夫です。
インストールが完了して「開く」をクリックすると、
環境設定が開かれますが、いつでも変更できるので「OK」です。
アプリが起動したらWinMergeと同じように、
比較したいファイルをドラッグ&ドロップで左右に置きます。
右でも左でもどちらでも大丈夫なので、左右に置いたら「比較」をクリックします。
比較結果もほとんどWinMergeと同じように確認することができます。
grepの使い方
今度は「サクラエディタ」を使ったgrepについてです。
サクラエディタがインストールされていない方はこちらの記事で全てを紹介しています！
では簡単にgrepについてです。
例えば、このように100ファイルの中から
「test」という文字列が入っているファイルを特定したかったとします。
100個のファイルを全て開いて確認する！
と、まぁそれでもできなくは無いですが、時間かかりすぎです。
サクラエディタのgrepを使うと1秒くらいで完了するのでツールの力を使いましょう！
まず、サクラエディタを開いて画面上で
「Ctrl + g」を押します。
- 「条件」の部分には検索したい文字列を入れます
➡︎ 今回の場合は「test」 - 指定したフォルダの中に入っているファイル全てが検索の対象になります。
➡︎ 今回の場合は「sample」フォルダのパスを指定
「sample」フォルダのパスについては、フォルダをドラッグ&ドロップすれば自動で入ります。
「検索」をクリックすれば、完了です。
検索結果は6件であることがわかります。
見方
C:¥Users¥ユーザ名¥Desktop¥sample¥test1.txt（1,1）[UTF-8]：test
これは、日本語で書くと、
Cドライブの中の、ユーザ名フォルダの中の、Desktopフォルダの中の、sampleフォルダの中にあるtest1.txt
という意味になります。
ダブルクリックで、対象のファイルの対象の行まで自動で遷移できます。
