SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

開発の定番「VSCode」とは? インストールから使い方までを解説

開発用エディタのド定番「VSCode」を使いこなそう 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

VSCodeを日本語化する

 VSCodeのメニューやメッセージはデフォルトでは英語です。個人的には英語のままでの利用をお勧めしますが、英語はやはり苦手という方は、先に進む前にここで日本語化しておきましょう。日本語化は、「Japanese Language Pack for Visual Studio Code」というMicrosoft自身がリリースしている拡張機能を利用します。

 日本語化は、以下の手順で行います。これは、拡張機能をインストールする場合の共通の手順となりますので、この機会に慣れておくことにしましょう。

 すでに紹介した手順でVSCodeを起動します。一番左側のツールバー(アクティビティバーといいます)にある拡張機能アイコン  をクリックします(図2)。すると、その内側のサイドバー(プライマリサイドバーといいます)の表示が「EXPLORER」(エクスプローラー)から「EXTENSIONS」(拡張機能)に変わります(図3)。

図2:アクティビティバーの拡張機能アイコンをクリック
図2:アクティビティバーの拡張機能アイコンをクリック
図3:「EXTENSIONS」(拡張機能)のサイドバーが表示される
図3:「EXTENSIONS」(拡張機能)のサイドバーが表示される

 サイドバーの上部にある入力ボックスに、「japanese」と入力します。すると選択候補が下に現れますので、その中から地球儀のアイコンの付いた「Japanese Language Pack for Visual Studio Code」(全部は見えないかもしれません)に表示された、青い[インストール]をクリックします(図4)。サイドバーの右に「Japanese Language Pack for Visual Studio Code」の情報が表示されますので、青い[インストール]をクリックします(図5)。

図4:「japanese」を入力して候補を選択
図4:「japanese」を入力して候補を選択
図5:「Japanese Language Pack for Visual Studio Code」をインストール
図5:「Japanese Language Pack for Visual Studio Code」をインストール

 ウインドウの右下に「in order to use VS Code in Japanese, …」と表示されますので、[Restart]をクリックします(図6)。再起動後、日本語になっているのを確認できるでしょう(図7)。以降は、日本語化したものとして解説を進めていきます。

図6:再起動を促される
図6:再起動を促される
図7:日本語化されたVSCode

図7:日本語化されたVSCode

[NOTE]自動で日本語化する

 VSCodeを起動した直後に、ウインドウ右下に図8のようなポップアップが表示されたら、それは自動で日本語化できる合図です。[インストールして再起動 (Install and Restart)]をクリックすると、自動的にプラグインのインストールが実行されて再起動します。

図8:日本語化を促すポップアップ
図8:日本語化を促すポップアップ

[NOTE]拡張機能のアンインストール

 インストールした拡張機能は、不要になったらアンインストールできます。例えば、ここでインストールした「Japanese Language Pack for Visual Studio Code」であれば、拡張機能アイコン  をクリックした時点でプライマリサイドバーに表示されるはずです。それをクリックすると、エディタ画面に拡張機能の詳細が現れるので、[アンインストール]ボタンをクリックします。これで、拡張機能はアンインストールされます。

画面構成

 日本語化も済んだので、先ほど少しだけ触れた画面構成を見ていきましょう。図9は、とあるプロジェクトの画面です。主な場所に番号を振りましたので、順番に紹介していきます。なお、これらは表示と非表示を切り替えたり、レイアウトをある程度自由に変更できたりします。図9では、これらを全て表示させていますが、レイアウトはほぼデフォルトのままとなっています。

図9:サイドバーとパネルを表示したウインドウ
図9:サイドバーとパネルを表示したウインドウ

1. キャプションバー

 編集中のファイルやワークスペースが表示されるのがキャプションバーです。Windows版ではキャプションバーにメニューも表示されます(macOS版ではメニューはOSのメニューバーに統合される)。

 キャプションバーには、ファイル名などのほかにショートカットアイコンが4個右側に表示されます。左から、以下の機能となっています。

  • プライマリサイドバーの表示切り替え
  • パネルの表示切り替え
  • セカンダリサイドバーの表示切り替え
  • レイアウトのカスタマイズ

 それぞれのサイドバー、パネルについては後述します。

2. アクティビティバー

 ウィンドウの左端にあり、タスク(作業)の内容を大きく切り替えるのがアクティビティバーです。アクティビティバーには、初期状態で上に5つ、下に2つのアイコンがあります。上から順番に、以下の機能となっています。

  • エクスプローラー:ファイルやフォルダをツリー表示する
  • 検索:検索を実行し、結果を表示する
  • ソース管理:変更のあったファイルを一覧表示し、コミットも行う
  • 実行とデバッグ:編集中のファイルから直ちに実行したり、デバッグしたりする
  • 拡張機能:拡張機能をインストールしたり、アンインストールしたりする
  • アカウント:サインイン中のユーザの情報や設定の同期を行う
  • 設定:VSCodeのさまざまな設定を行う

3. プライマリサイドバー

 アクティビティバーのアイコンのクリックによって表示され、対応する作業の場所となるのがプライマリサイドバーです。すでに日本語化の拡張機能をインストールしましたが、その際に検索を行い一覧を表示したのがプライマリサイドバーです。通常はエクスプローラーを表示させておくことが多いので、非常に利用頻度の高いサイドバーです。

4. エディタグループ

 エディタとしてはある意味メインとなる部分がエディタグループです。開いているファイルをタブで表示したり、アクティビティバーの操作によって作業ページをタブで表示したりします。エディタグループ内では、エディタを左右または上下に分割したり、ファイルについては変更内容をdiff形式で表示したりすることができます。

5. セカンダリサイドバー

 プライマリサイドバーのサブ的な位置付けとして使用できるのがセカンダリサイドバーです。今年(v1.64)になって追加された新しいサイドバーです。具体的には、初期状態ではプライマリサイドバーにある「アウトライン」や「タイムライン」をセカンダリサイドバーに移動し、縦長の状態で見やすくできるというものです。これについては、実際に「アウトライン」等が存在していた方がわかりやすいので、詳細は後続の回で改めます。

6. パネル

 通常はエディタグループの下に表示され、問題の箇所、コンソール出力、デバッグコンソール、ターミナルなどを切り替えながら利用できるスペースがパネルです。エディタグループと並んで常時表示することが多いでしょう。編集中に発生している問題をリアルタイムで見たり、コンパイルメッセージや実行中のデバッグメッセージなどを表示させて確認したり、ターミナルでコマンド操作も可能になっています。パネルでも、上下左右の分割やターミナルで問題が発生した場合の強制終了など、いくつかの便利なショートカットアイコンが配置されています。

7. ステータスバー

 ステータスバーには、Gitのブランチ名、GitHubへの発行ボタン、問題の発生状況、カーソル位置、タブのスペース数、文字コード、改行文字、プログラミング言語、フィードバックや通知のショートカットアイコンが表示されます。

次のページ
ファイルの作成と保存

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16467 2022/09/15 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング