こんにちは!日々のコーディング、お疲れ様です。
新しい技術やツールに触れるときって、なんだかワクワクしますよね。でも、環境構築の段階でにつまずいたり、「これ、本当に実務で役に立つの?」と不安になったりすることもあると思います。
今回は、あなたが毎日使っている(あるいはこれからメインエディタにするであろう)VS Code(Visual Studio Code)の、知られざる「超強力な命綱」についてお話しします。
開発現場でこんな絶望を味わったことはありませんか?
「あ、ここ数行のコードをごっそり消して書き直そう……って、やっぱりさっきの状態に戻したい!でも、Gitでまだコミットしてないから `git checkout` も効かない!」
……血の気が引く瞬間ですよね。でも、安心してください。
VS Codeには、Gitの履歴とは完全に独立して、あなたがエディタ上で打った一文字一文字の変更を裏側で黙々と記録し続ける「ローカルヒストリー(タイムラインビュー)」という機能が備わっています。
これをマスターすれば、あなたのコーディングライフにおける「うっかり事故」のストレスは劇的にゼロになりますよ。今日はその仕組みから、明日から使える実践的なリカバリー手法まで、優しく丁寧に解説していきますね。
—
1. VS Codeの「タイムラインビュー」とローカルヒストリーの正体
まず、この機能の本質を理解しておきましょう。
多くの人は「バージョン管理=Git」と考えがちです。そのため、`git init` をしていない一時的なメモファイルや、まだコミットしていない作業中のコードが吹っ飛ぶと、「終わった……」と絶望します。
しかし、VS Codeは優秀なアーキテクチャを持っており、エディタ内部(Workspace Storage)に独自の時系列データベースを持っています。
あなたがファイルを開き、編集し、保存する(あるいはVS Codeが自動保存する)たびに、そのスナップショットがローカル環境に暗黙的に保存されていくのです。
Gitヒストリーとの決定的な違い
- Gitヒストリー: 開発者が明示的に `git add` と `git commit` を実行した「節(節目の記録)」の履歴。
- ローカルヒストリー(Timeline): VS Codeが自動的に記録し続ける「無数の点(細かな変更の足跡)」の履歴。
つまり、Gitでコミットする前の「数分前の自分」や「さっき試行錯誤していたボロボロのコード」にだって、タイムマシンに乗ったかのようにいつでも戻れるというわけです。
—
2. 基礎セットアップ:タイムラインビューを呼び出す
特別なプラグインをインストールする必要はありません。VS Codeの標準機能(デフォルトで有効)です。
まずは、その機能がどこにいて、どうやって動くのかを目で見て確認してみましょう。
手順1:エクスプローラーの最下部を確認する
VS Codeの画面左側にあるエクスプローラー(ファイルツリー)を開き、一番下までスクロールしてみてください。
そこに「タイムライン(Timeline)」というアコーディオンメニューが存在するはずです。
もし見当たらない場合は、以下の手順で有効化してください。
1. エクスプローラーの何もないところで右クリックする。
2. 表示されたコンテキストメニューから「タイムライン」にチェックが入っているか確認する(入っていなければクリックして有効化)。
—
3. 実践!「HelloWorld」でローカルヒストリーの底力を体験する
百聞は一見に如かず。実際に手を動かして、消したコードが鮮やかに蘇る瞬間を体験してみましょう。
ステップ1:適当なファイルを作成する
デスクトップでもどこでも構いません。適当なフォルダをVS Codeで開き、`hello.js` というファイルを作成してください。
そして、以下のコードを記述して保存(`Ctrl + S` または `Cmd + S`)します。
// 【ステップ1】最初の状態
function sayHello(name) {
console.log(“こんにちは、” + name + “さん!”);
}
sayHello(“研修生”);
ステップ2:コードを大きく書き換えて保存する
「やっぱりアロー関数に書き直そう」と思い立ち、ファイルを以下のように上書き保存してしまったとします。
// 【ステップ2】大幅に書き換えて保存してしまった状態
const sayHello = (name) => {
console.log(`Hello, ${name}!`); // 日本語から英語に変えてしまった!
};
sayHello(“研修生”);
ここで、「あ、やっぱり日本語のメッセージの微妙なニュアンスを残しておきたかった……!」と後悔したとします。しかし、すでに上書き保存してしまっているので、`Ctrl + Z`(元に戻す)のUndoバッファは消えている可能性があります(エディタを一度閉じたりしていれば確実に戻せません)。
ステップ3:タイムラインビューから過去を召喚する
絶望する前に、画面左下の「タイムライン」ビューを開いてみてください。
`hello.js` をアクティブにした状態でタイムラインを見ると、以下のような履歴が並んでいるはずです。
- `数分前 – ユーザーが保存しました` (今の上書きした状態)
- `数分前 – ユーザーが保存しました` (←ここ!書き換える前の状態が残っています)
目的の履歴をクリックしてみてください。
なんと、Gitで管理していないファイルであるにもかかわらず、過去の保存時点のコードと現在のコードの差分(Diff)が美しい画面で表示されます。
過去のコードの右側にあるファイルを眺め、「これだ!」と思ったら、そこに表示されている「復元(Restore)」ボタンを押すか、必要な部分だけをコピーして現在のファイルに貼り付ければ、完全にデータが救出できます。
—
4. 現場で役立つ!知っておくべき設定とカスタマイズ
このローカルヒストリー機能、デフォルトでも十分に強力ですが、開発の規模や好みに合わせて挙動を微調整すると、さらに使いやすくなります。
VS Codeの設定画面(`Ctrl + ,` または `Cmd + ,`)を開き、検索窓に `local history` と打ち込んでみてください。以下のような設定項目がヒットします。
{
// ローカルヒストリー機能を有効にするか(デフォルト: true)
“workbench.localHistory.enabled”: true,
// 履歴として保存するファイルの最大数(1ファイルあたり)
“workbench.localHistory.maxFileSize”: 1024, // 単位はKB(デフォルトは10MB相当など大きめですが調整可能)
// 古い履歴を自動的に削除するまでの日数(デフォルトは30日)
“workbench.localHistory.daysLimit”: 30,
// 特定の機密ファイルや容量の大きいファイルをローカルヒストリーの対象外にする除外設定
“workbench.localHistory.exclude”: {
“/node_modules/“: true,
“/.log”: true,
“/.tmp”: true
}
}
特に `exclude` の設定は重要です。ビルド成果物や巨大なログファイルまでローカルヒストリーに保存されてしまうと、VS Code自体の動作が重くなったり、PCのストレージを無駄に圧迫したりする原因になります。プロジェクトの性質に合わせて適切に除外設定をしておきましょう。
—
まとめ:タイムラインビューはあなたの最強のセーフティネット
いかがでしたか?
今回ご紹介したVS Codeのタイムラインビューとローカルヒストリー機能は、派手さこそありませんが、「やっちまった!」という開発現場の修羅場で確実にあなたを救ってくれる地味で最強の機能です。
- Gitにコミットする前のコードでも自動でバックアップされている
- エディタを閉じても、一定期間(デフォルト30日)は履歴が保持される
- 差分を見ながら直感的に古い状態を復元できる
これをマスターしておけば、恐れることなく大胆なリファクタリングやコードの書き直しに挑戦できるようになります。毎日のコーディングの心理的負担が、驚くほど軽くなりますよ。
明日からの開発現場で、ぜひこの「タイムラインビュー」を相棒にしてみてくださいね。それでは、快適なエディタライフを!