VS Codeの基本操作を学ぼう

• 学習の目標
• フォルダを開く
• ファイルの操作
  • ファイルを開く
  • 新しいファイルの作成
  • フォルダの作成
  • ファイル・フォルダの移動
• ファイルの保存
  • 保存方法
  • 保存状態の確認
• エディタエリアの分割
• まとめ

学習の目標

本章では、VS Codeの基本的な使い方について説明します。プログラミング学習に必要な操作方法を、順を追って解説していきます。

フォルダを開く

プログラミングで使用するフォルダをVS Codeで開く手順です。

1. メニューバーから「ファイル」>「フォルダを開く」を選択します。
2. 表示されるダイアログで目的のフォルダを選択し、「フォルダの選択」をクリックします。
3. 選択したフォルダの内容が、左側のエクスプローラーパネル（ファイルツリー）に表示されます。

ファイルツリーでは、フォルダの階層構造が表示されます。フォルダの横にある三角形のアイコンをクリックすることで、フォルダの内容を展開したり折りたたんだりできます。

ファイルの操作

VS Codeでよく使う、ファイルの基本的な操作方法を説明します。

ファイルを開く

• ファイルツリーから目的のファイルをクリックします
• ファイルが右側のエディタエリアに開かれます
• 複数のファイルはタブとして表示されます
• タブをクリックして、編集するファイルを切り替えできます
• タブの×ボタンでファイルを閉じられます

新しいファイルの作成

• メニューバーの「ファイル」>「新規ファイル」を選択
• または、ファイルツリーで右クリック>「新しいファイル」を選択
• 新規ファイルがエディタエリアに開かれます

フォルダの作成

• ファイルツリーで右クリック>「新しいフォルダ」を選択
• フォルダ名を入力してEnterキーを押します

ファイル・フォルダの移動

• 移動したい項目をドラッグ
• 移動先にドロップするだけです

ファイルの保存

編集したファイルの保存方法です。

保存方法

• メニューバーの「ファイル」>「保存」を選択
• MacならCommand + S
• WindowsならControl + S

保存状態の確認

• 未保存のファイルはタブに白い点が表示されます
• 保存すると点が消えます

エディタエリアの分割

長いファイルの編集や複数ファイルの比較に便利な、エディタエリアの分割方法です。

1. 開いているタブを右クリックします。
2. 「右に分割」を選択します。
3. エディタエリアが2つに分割され、同時に2つのファイルを表示できるようになります。

以下の画像では、左側と右側で異なるファイルが表示されています。

まとめ

VS Codeの基本的な操作方法について学びました。

フォルダやファイルの操作、保存方法、エディタエリアの分割など、プログラミングでよく使用する機能を説明しました。これらの操作に慣れることで、プログラミング作業を効率的に進められます。