VisualStudioCodeとは？|VisualStudioCodeを使いこなして作業効率を上げよう！

Visual Studio

公開日時: 2021-09-14 　更新日時: 2021-10-07

VisualStudioCodeとは？|VisualStudioCodeを使いこなして作業効率を上げよう！

この記事でわかること

システム エンジニア: VisualStudioCodeについて詳しく教えていただけませんか。

プロジェクト マネージャー: 分かりました。それでは、VisualStudioCodeの使い方についてご説明いたしましょう。

Visual Studio Codeとは？

Visual Studio Codeとは、プログラム開発用につくられた高機能なエディタのことです。エンジニアの間では「VS Code（ブイエスコード）」とも言われています。

Visual Studio Codeの特徴は？

Visual Studio CodeはMicrosoftが無償で提供しています。対応しているOSは、WindowsOS、macOS、LinaxOSです。

初心者に優しい機能を備えていて、拡張機能が豊富です。初心者から上級者までのあらゆるエンジニアにとって、使いやすいエディタだと言えるでしょう。

しかしながら、機能が豊富過ぎて使い方がわからないという方も多いのではないでしょうか。この記事では、Visual Studio Codeの使い方について解説していきます。

Visual Studio Codeの起動方法

Visual Studio Codeの起動方法には、二つの方法があります。

一つは、スタートメニューまたはスタート画面でVisual Studio Codeのアイコンをクリックする方法です。二つ目は、コマンドプロンプトやPowerShellで「code」と入力してEnterを押す方法です。

WindowsOSの場合、コマンドプロンプトやPowerShellで起動できないようであれば、PATH設定を確認しましょう。

日本語対応方法（拡張機能）

Visual Studio Codeをインストールすると、最初は英語表示になっています。日本語表示にしたいという方は、日本語対応パッケージをインストールしてみましょう。

画面上部にメニューバーがあります。そのメニューバーから「View」→「Extensions」の順でクリックします。

すると、画面左上部に「Serch Extensions ・・」と表示されます。その検索ボックスに「Japanese」と入力して、以下の名前のパッケージを探してください。

Japanese Language Pack for Visual Studio Code
これが日本語対応のパッケージです。

「install」を押してインストールを完了させましょう。画面右下にリスタートを要求するメッセージが出てきますので、リスタートします。日本語パッケージが反映されて、日本語インターフェイス画面が表示されたら完了です。

以上、拡張機能（Extensions）を使用した日本語パッケージのインストールについて説明しました。Visual Studio Codeは、この拡張機能がとても便利です。拡張機能の使い方は是非覚えましょう。

コードの入力補助機能（インテリセンス）

VisualStudioCodeには、ソースコード補完機能（インテリセンス）があります。先頭文字を入力すると、入力候補を表示してくれる機能です。

また、入力を続けていくとフィルター機能が働き、入力候補が減っていきます。入力候補を絞るのに役立ちます。

関数を入力する時に、引数の型や戻り値についての情報を表示するのもインテリセンス機能の一つです。

既にインテリセンス機能を備えている言語もありますが、言語拡張機能を取り入れることで更に豊富なインテリセンス機能を使用することが可能です。

インデントの整形機能（フォーマッティング）

Visual Studio Codeには、ソースコードのインデントを整形してくれるフォーマット機能があります。例として、以下のJavaScriptのコードを見てください。

【フォーマッター使用前】

//Visual Studio Codeの使い方 ～formatterの解説～
function test_msg() {
var a = 100;
    var c = 0;
    for(let b = 0; b < a; b++) {
        c = b + 1;
console.log("現在" + c + "回目の処理です。");
    }
document.write(c + "回の処理が完了しました。");
        alert("Visual Studio Codeの使い方を学びましょう！");
}

//Visual Studio Codeの使い方～formatterの解説～

function test_msg() {

var a = 100;

var c = 0;

for(let b = 0; b < a; b++) {

c = b + 1;

console.log("現在" + c + "回目の処理です。");

}

document.write(c + "回の処理が完了しました。");

alert("Visual Studio Codeの使い方を学びましょう！");

}

上記のように、ソースコードを書いているとインデントが不揃いになってしまう時があります。そうすると、ソースの解読が難しくなります。そんな時は、このフォーマット機能を使いましょう。

OS	ショートカット
WindowsOS	Shift + Alt + F
macOS	Shift + Option + F(英字モードで)
Linux(Ubuntu)	Ctrl + Shift + I

OSによってショートカットが違います。上の表を参考にしてください。

もし、フォーマット機能がインストールされていなければメッセージで教えてくれます。その際はフォーマット機能をインストールしてみましょう。

【フォーマッター使用後】

//Visual Studio Codeの使い方 ～formatterの解説～
function test_msg() {
    var a = 100;
    var c = 0;
    for(let b = 0; b < a; b++) {
        c = b + 1;
        console.log("現在" + c + "回目の処理です。");
    }
    document.write(c + "回の処理が完了しました。");
    alert("Visual Studio Codeの使い方を学びましょう！");
}

//Visual Studio Codeの使い方～formatterの解説～

function test_msg() {

var a = 100;

var c = 0;

for(let b = 0; b < a; b++) {

c = b + 1;

console.log("現在" + c + "回目の処理です。");

}

document.write(c + "回の処理が完了しました。");

alert("Visual Studio Codeの使い方を学びましょう！");

}

インデントがきれいに入って、見やすくなりました。

テキストの矩形選択の方法

プログラムのコードを書いていると、テキストを矩形選択したい時があるのではないでしょうか。矩形選択の方法には、「マウス」を使った方法と、「キーボード」を使った方法があります。それぞれの方法について見てみましょう。

「マウス」を使った矩形選択

マウスを使って矩形選択する方法は、以下の表を参考にしてください。ポイントは、基本的な使い方はどのOSも同じということです。二つのキーを押し続けている状態であれば、矩形選択の範囲を変更することも可能です。

OS	方法
WindowsOS	始点をクリック後、Shift + Altを押しながら範囲選択して左クリック
macOS	始点をクリック後、Shift + Optionを押しながら範囲選択して左クリック
Linux(Ubuntu)	始点をクリック後、Shift + Altを押しながら範囲選択して左クリック

「キーボード」を使った矩形選択

キーボードを使って矩形選択する方法は、以下の表を参考にしてください。キーボードを使う場合は、三つのキーを同時に押しながら選択していきます。「矢印キーで範囲選択」の部分は、PageUpキーまたはPageDownキーでも可能です。

OS	方法
WindowsOS	Ctrl + Shift + Altを押しながら矢印キーで範囲選択
macOS	Shift + Option + Commandを押しながら矢印キーで範囲選択
Linux(Ubuntu)	既定での設定はなし

Linux（Ubuntu版）の場合は、矩形選択のキーバインド設定がされていません。Linux（Ubuntu版）で、キーボードを使用して矩形選択したい場合は、キーバインド設定しましょう。

矩形選択する際の、マウスとキーボードの使い方は理解できましたか。Visual Studio Codeで、矩形選択の方法をマスターしてコーディング効率を上げていきましょう。

対応する括弧に色付け（拡張機能）

コードが長くなってくると、入れ子に入れ子が重なって複雑になっていきます。この括弧はどの括弧に対応しているのか、わからなくなることも多くあります。そのような時に、対応する括弧がどこにあるのかわかるようにしてくれる機能があると便利です。

Visual Studio Codeの拡張機能には、対応する括弧を色付けしてくれる機能があります。日本語パッケージをインストールした時と同様に、拡張機能の検索ボックスで以下の名前を検索してください。

Bracket Pair Colorizer2
「install」を押してインストールを完了します。

早速、ソースコードを開いてみましょう。対応する括弧の色が同じになっています。また、対応する括弧と括弧が線で結ばれていてとても分かりやすくなります。

自分の好きな色に設定することもできます。
自分の好きなようにカスタマイズしたい場合は、設定してみましょう。

システム エンジニア: Visual Studio Codeは日本語にも対応していて使いやすそうですね。

プロジェクト マネージャー: VisualStudioCodeは初心者から上級者まで活用できますので、使い方をマスターして効率よくコーディングしてください。

Visual Studio Codeの使い方をマスターしよう！

Visual Studio Codeの使い方の一部を紹介しました。いかがでしたでしょうか。

Visual Studio Codeには、たくさんの便利機能があります。使い方をマスターして、効率よくコーディングしていきましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

VisualStudioCodeとは？|VisualStudioCodeを使いこなして作業効率を上げよう！

Visual Studio Codeとは？