AIアシスタントを使ってコーディングを進める際、エディタとして「Visual Studio Code（VS Code）」を利用する方は多いでしょう。しかし、いざターミナル（コマンドライン）とエディタの画面（GUI）を前にすると、「どこを操作すればいいの？」と混乱してしまうことがあります。本記事では、VS Codeの基本機能であるエクスプローラー、ソース管理、そしてターミナルの明確な役割と使い分けについて解説します。
1. ターミナルでの「cd」移動とは？
ターミナルは、コンピュータに対して直接テキストで命令を下す場所です。よく使うcd（Change Directory）コマンドは、作業者が「どのフォルダのファイルに対して作業を行うか」を移動するためのものです。AIアシスタント（Claude Codeなど）に指示を出す際も、このターミナル上で正しいフォルダに移動してから呼び出す必要があります。
2. エクスプローラーとソース管理（GUI）の役割
一方で、VS Codeの左側に表示されるメニューアイコンにもそれぞれ重要な役割があります。
- エクスプローラー（書類棚アイコン）：現在開いている大元のフォルダの中身を視覚的に確認・編集するための画面です。ターミナルでcdを使って内部的に移動しても、ここの表示は自動では切り替わりません。
- ソース管理（枝分かれアイコン）：Gitの操作を視覚的に行うパネルです。初心者にとって、長いGitコマンド（git addやgit commit）を手打ちするのはミスの元になりますが、この画面ならクリックだけで安全にGitHubへコードをアップロードできます。
3. 「最初の1回」と「その後の更新」での使い分け
新しいアプリを作って初めてGitHubに連携する「最初の1回」は、ミスを防ぐためにソース管理のGUIパネルを使うのが安全です。しかし連携が完了した後の日常的な機能追加であれば、ターミナル上でAIアシスタントに「コードを修正してプッシュして」と指示するだけで、裏側で自動的にGit操作を行ってくれるため、GUIパネルをポチポチと操作する必要はなくなります。
まとめ
VS Codeの画面構成は一見複雑に見えますが、「視覚的な確認（エクスプローラー）」「安全な初期設定（ソース管理）」「AIとの対話とコマンド実行（ターミナル）」という役割を理解すれば、迷うことなく開発を進められます。
編集後記
VS Codeを使い始めたばかりの頃、ターミナルで別のフォルダに移動したはずなのに、左側のファイルツリーが変わらなくてパニックになった経験は誰にでもあるはずです。GUI（見た目）とCLI（コマンド）は連動しているようで、実は独立して動いている部分が多いんですよね。一度設定を終えてしまえばAIが裏側でコマンドを叩いてくれる現代の開発体験は、まさに魔法のようだと感じます。