VScodeのアクティビティバーの説明・使い方

テキストエディタ

今回はテキストエディタ「VScode」の「アクティビティバー」の使い方と、機能の説明をしていきます。

アクティビティバーとサイドバーについて

VScodeには、「アクティビティバー」の他に「サイドバー」と呼ばれるエリアがあります。

まずは、それぞれの違いについて学んでおきましょう。

上の画像を見ていただくと分かります。

VScodeの一番左に固定で表示されているエリア、アイコンが縦に並んでいるのが「アクティビティバー」です。

アクティビティバーのアイコンをクリックした時に、隣に並んで表示されるのが「サイドバー」になります。

サイドバーは表示・非表示が切り替え可能

サイドバーですが、簡単なショートカットキーで表示と非表示の切り替えが可能です。

最初に覚えておきましょう。

  • Windows 「Ctrl」+「B」
  • Mac 「command」+「B」

です。ぜひ、VScodeを起動してショートカットを試してみてください。

コードを書く時はサイドバーを非表示に、アクティビティバーの便利な機能を呼び出す時にはサイドバーを表示させる、といった使い方になります。

アクティビティバーのアイコンの役割について

ここからは、アクティビティバーのそれぞれのアイコンについて説明をしていきます。

エクスプローラー

アクティビティバーの一番上、ファイルが2つ重なったようなアイコンは「エクスプローラー」になります。

エクスプローラーを選択すると、サイドバーに「現在開いているファイル」や、「開いているワークスペース」が表示されます。

また、ファイルやフォルダの作成も可能です。

サイドバーでファイルを作成し、コードを書き始めることができます。

検索

アクティビティバーの上から2番目の虫眼鏡のアイコンは「検索」機能を呼び出すことができます。

コードの中から文字列を検索することができます。

また、文字列の置換もすぐにできるようになっています。

VScodeの場合はシンプルな検索・置換の他にも、便利な検索機能がたくさんありますので、少しずつ勉強してコーディングに役立てていきましょう。

※VScodeの検索機能の説明は別記事にて公開予定です

ソース管理

アクティビティバー上から3番目は「ソース管理」です。

「ソース」とは、プログラミングのコード。コードが書かれたファイルのことです。

Gitと呼ばれるプログラマーの中ではとても有名なソース管理サービスと連携してソースコードを管理することができます。

プログラミング初心者の方は、最初はここを触らずに勉強を進めて大丈夫です。

※ソース管理の説明は別記事で公開予定です

実行とデバック

上から4番目のアイコンは「実行とデバック」です。

虫と再生ボタンの組み合わせのようなアイコンです。

ここでは、書いたプログラミングコードの実行を行うことができます。

実行結果からエラー見つけたり、バグを見つけたります。エラーやバグは適宜修正していきます。

※使い方については、プログラミング言語の勉強の時に説明します。

拡張機能

アクティビティバーの5番目は、「拡張機能」です。

VScodeには様々なプラグインと呼ばれる追加機能を任意で追加することができます。

ここでできることは主に

  • プラグインの検索
  • プラグインの追加
  • プラグインの有効・無効切り替え
  • プラグインの削除

などです。

このブログで紹介しているVScodeの日本語化も「日本語で表示するプラグイン」を追加することで実現しています。

他にもたくさんの便利なプラグインがVScodeにはあります。

また、使用するプログラミング言語に合わせて追加するようなプラグインもあるのです。

※VScodeのプラグインの説明は別記事で公開予定です

アカウント

アクティビティバーには下にもアイコンが並んでいます。

下から2番目のアイコンが「アカウント」です。人形の形をしています。

アカウントでログインをすると、複数のPCでVScodeの環境を共有できるようになります。

設定やプラグインや、画面の構成などを共有して異なるPCでも開発ができるようになるのです。

使えるアカウントは

  • Microsoftアカウント
  • GitHubアカウント

の2つ。

自宅のPC、会社のPCなど複数のPCでプログラミングをする場合にはログインして設定を同期すると便利です。

設定

最後に紹介するのは一番下のアイコン「設定」です。

設定にはたくさんの機能が盛り込ませれています。

  • VScodeの設定
  • 拡張機能
  • キーボードショートカットの登録
  • ユーザースニペットの登録

などなどです。

また、VScodeのテーマの変更も設定で行うことができます。

※設定の説明は別記事で公開予定です

まとめ

いかがでしたでしょうか?

今回はVScodeを初めて触る、そしてプログラミング初学者向けにシンプルに説明しました。

VScodeは人気のあるテキストエディタで、使っている人も多いですが、それだけに機能もたくさんあります。

使いこなせばこなすほどに便利になりますので、少しずつでもVScodeの機能を覚えていきましょう。

コメント

タイトルとURLをコピーしました