こんにちは、株式会社Romantistのデザイナー金(キム)です。
突然ですが、皆さんは普段の業務の中で特定のファイルやフォルダ間でどのような差分があるかをすばやく知りたいと思ったことはありませんか?(私はあります…!)
私は普段のコーディング業務で VSCode(Visual Studio Code) をよく使っているのですが、VSCodeは動作が軽く、便利な拡張機能も豊富でコーディング以外の業務でも使える優秀なテキストエディターです。
今回は、そのVSCodeでファイル・フォルダ間の差分を簡単に調べることのできる「Diff Folders」という拡張機能をご紹介します。
「Diff Folders」は、2つのフォルダを比較し、変更されたファイルやフォルダの差分を視覚的に示してくれるVSCodeの拡張機能です。
この機能を使うと「追加・削除・変更」の状態を簡単に確認することができます。
この画面の確認が出来たら Diff Folders のインストールは成功です。
それでは早速 Diff Folders を使ってファイル・フォルダ間の差分を調べてみましょう。
今回、フォルダ間の差分を見るために簡単なサンプルデータを用意しました。
変更内容は下記の通りです。
▼ サンプルデータの差分内容
こちらのサンプルを基に、Diff Folders 上でどのように見えるのか検証してみましょう。
まずは先程の起動手順から Diff Folders の画面を表示して、比較したい2つのフォルダを指定します。
※今回は「変更前(original)を左側」、「変更後(edited)を右側」に設定します
Compareボタンをクリックすると、その下の画面に各フォルダの一覧が表示され、差分が状態によって色違いで表示されます。
今回のサンプルデータ上での色の違いは下記のようになっています。
▼ サンプルデータの差分内容と色の違い
いかがでしょうか。
このように差分が視覚的にパッと見でわかりやすく確認できるのが Diff Folders の特徴です。
これだけでも十分便利なのですが、続けてこの Diff Folders に備わってる便利機能をご紹介していきます。
先ほどまでの差分結果が表示されたリスト上部にアイコンがいくつも並んでいるのが確認できるかと思いますが、その左側のアイコン群の選択によって、差分結果を該当するファイルのみ表示するという操作が可能となっています。
▼ 5つのアイコンが持つ役割(左から順に)
デフォルトでは一番右以外のアイコンが選択されていて、比較しているフォルダ内のリストが全て表示されている状態になっていますが、各アイコンON・OFFに応じて役割に該当するファイルも表示・非表示が切り替わるようになっています。
この機能によって、より目的のファイルが探しやすくなるかと思います。
今度は中央部分のアイコンの役割について解説します。
この部分では比較中のフォルダ間のファイル操作を行うことができるようになっています。
▼ 左右の矢印付き・4つのリストアイコンの役割
▽ 左矢印(←)のあるアイコン
▽ 中央4つのアイコン(左から順に)
▽ 右矢印(→)のあるアイコン
例えば、変更後(edited)で削除したファイルを対象としてコピーを行いたい時は上図ように
という操作が可能です。
こちらの機能はもはや無いわけないよなというほど必須機能になるかとは思いますが、差分結果リスト内の変更があるファイル(黄色)を選択すると左右両方のファイル内容表示・編集が可能となっています。
以上、ここまでが今回の「Diff Folders」の紹介となります。
「Diff Folders」は一見複雑に見えるかもしれませんが、実際には簡単な操作でフォルダ間の差分を確認できる便利なVSCode拡張機能です。 記事後半でご紹介した便利機能を使ってVSCode内でファイルの操作や内容の比較・修正も直接行うことができるので、うまく使えば普段の業務も格段に効率アップする可能性があります。
ぜひ活用してみてください!