会員限定 VSCodeの基本操作

今回は、Visual Studio Codeの画面レイアウトについて説明していきます。

Visual Studio Codeの画面レイアウトは、下記の画像のように大きく5つの部分に分かれます。

  1. アクティビティバー
    アクティビティバーは、画面の左側にある縦のツールバーです。
    ここには、プロジェクトのファイル管理や拡張機能の操作などよく使う機能が並んでいます。

    ・エクスプローラー(Shift⇧+ Command⌘ + E)
    エクスプローラーは、プロジェクトのファイルとフォルダを管理し、プロジェクト全体の構造を把握しながら作業効率を向上させるための便利な機能です。
    ・検索(Shift⇧+ Command⌘ + F)
    検索機能は、プロジェクト内の情報を効率的に検索し、必要なファイルや情報を迅速に見つけ出し、編集作業を効率化するための便利な機能です。
    ・ソース管理(Control^ + Shift⇧+ G)
    ソース管理機能は、Gitなどのバージョン管理システムと統合されており、開発プロセスを円滑に進めるための機能です。
    ・実行とデバッグ(Shift⇧+ Command⌘ + D)
    実行とデバッグ機能は、プログラムの実行状態を詳細に観察し、問題の特定と修正を効率的に行うための多くの機能を提供しています。
    ・拡張機能(Shift⇧+ Command⌘ + X)
    拡張機能は、エディターの機能や使い勝手をカスタマイズし、開発プロセスをより効率的にするための豊富なリソースを提供しています。
    ・リモートエクスプローラー
    リモートエクスプローラーは、リモートサーバー上でのファイル操作や開発作業を効率的に行うことができます。
    ・アカウント
    アカウントに内の機能を使用することで、開発者は作業環境やプロジェクトの管理を効率化し、開発者の作業効率を向上させることができます。
    ・管理
    管理にある機能を使用することで、開発者がVisual Studio Codeを自分の作業スタイルや好みに合わせてカスタマイズし、より効率的に作業を行うためができます。
  2. サイドバー
    サイドバーは、エディタの左側に位置し、アクティビティバーで選択している機能のビューを表示します。開発者が様々な作業を効率的に行うための機能が集約されており、必要なツールや情報に簡単にアクセスできます。
    ※上図では「エクスプローラー」を選択してる状態です。
  3. エディタ
    エディタは、サイドバーで選択したファイルのテキストやコードを編集するための主要な作業スペースです。
    複数のエディタを同時に開くことも可能で、効率的な作業環境を提供してくれます。
  4. パネル
    パネルは、エディタの下部に位置し、開発者がさまざまなツールや情報にアクセスできる領域です。
    出力やデバッグ情報、統合ターミナルなどを表示させることができます。また、パネルの配置は設定から変更することができます。
  5. ステータスバー
    ステータスバーは、エディタの最下部に位置し、現在開いているプロジェクトや編集中のファイルの状況、エディタの設定に関する情報を表示するバーです。これにより、作業の進行状況や設定の詳細を一目で確認できます。

以上、「Visual Studio Codeの基本操作」について説明でした。

次のステップで、 「プロジェクトファイルの作成」に取り掛かります。

コーディング環境の準備

全 6 動画
  • コーディングとは?

    02:21
  • GoogleChromeのインストール

    01:42
  • VSCodeのインストール

    01:58
  • 会員限定VSCodeの基本操作

    03:20
  • 会員限定プロジェクトファイルの作成

    03:03
  • 会員限定推奨する環境設定

    02:06