導入
開発中に「さっきまで動いていたのに、どこを直したのか分からなくなった」という経験はありませんか？Gitのコミット単位では細かすぎる変更や、まだコミットしていないローカルでの試行錯誤は、通常のログでは追跡が困難です。VS Codeの「タイムラインビュー」は、Gitの履歴だけでなく、ローカルのファイル保存履歴（ローカルヒストリー）を統合的に表示することで、コードの変遷を時系列で可視化し、デバッグの難易度を劇的に下げてくれる強力なツールです。
基礎知識
タイムラインビューを理解する上で重要な概念が「ローカルヒストリー」です。これはGitのコミットとは別に、VS Codeがエディタ上での保存操作をトリガーに自動作成するバックアップ機能です。
File History：特定のファイルに絞った変更履歴。
Gitログ統合：Gitのコミットログとローカルの保存履歴が同一の時系列軸で表示される仕組み。
これらにより、Gitにプッシュする前の「数分前の修正」まで遡って比較（Diff）が可能になります。
実装/解決策
タイムラインビューを活用するには、特別な設定は不要です。VS Codeのサイドバー下部にある「タイムライン」セクションを開くだけです。
1. エクスプローラーで対象のファイルを右クリック、または編集画面を開く。
2. 左下の「タイムライン」パネルを展開する。
3. リストに表示されたエントリをクリックすると、その時点のコードと現在のソースとの差分が即座に表示されます。
※履歴が多すぎる場合は、フィルタアイコンを使って「Gitコミットのみ」や「保存履歴のみ」に絞り込むのが効率的です。
サンプルプログラム
ここでは、タイムラインビューで比較対象となる「状態の変化」をシミュレートするコード例を挙げます。このコードを編集し、保存を繰り返してからタイムラインビューを確認してみてください。
// サンプルコード：この関数に修正を加えて保存を繰り返してください
function calculateData(input) {
// タイムラインビューで「保存」ごとの変化を確認してみましょう
const baseValue = 100;
// 修正1: 係数を変更
// 修正2: 計算ロジックを条件分岐に変更
const result = input baseValue;
return result;
}
// タイムラインビューの使い方：
// 1. 上記コードを修正し、Ctrl + S (Cmd + S) で保存
// 2. サイドバーの「タイムライン」を開く
// 3. 表示された履歴を右クリックし「Compare with Previous」を選択
// これにより、どの行をどう書き換えたのかが直感的にわかります。
応用・注意点
タイムラインビューを最大限に活用するための現場のテクニックを共有します。
1. 誤削除の復旧：Gitコミットする前に誤って重要な関数を削除してしまった場合、Gitのログには残っていませんが、ローカルヒストリーには残っていることがほとんどです。慌てずにタイムラインから数分前の保存履歴を探しましょう。
2. 注意点：ローカルヒストリーはあくまでローカル端末のVS Code設定に依存します。PCを買い替えた際や、別のPCで作業する際には引き継がれないため、重要な変更は必ずGitへのコミット（またはブランチのプッシュ）を並行して行うことを推奨します。
3. パフォーマンス：巨大なプロジェクトで履歴が多すぎる場合、読み込みに時間がかかることがあります。その際は特定のファイルにフォーカスして使用するのがベストプラクティスです。
コメント