【VS Code】プログラマーに人気なコーディングツールの使い方を初心者向けに解説

Visual Studio Code(= VS Code)は、Microsoftが開発した無料のコードエディタです。プログラミングやWeb・アプリ開発をする上で非常に人気があり、初心者からプロまで幅広く使われています。インストールが簡単でかつ、パソコンに負担がかかることはありません。

Yama

初めて触った時にどのように使えばいいのか一瞬悩みましたが、操作方法がとても簡単で、すぐに使いこなすことができました。
今ではテーマを変えたりカスタマイズをしています。

またいろんな言語(Javascript, Python, Java, C++, Ruby, Goなど)にも対応しています。拡張機能を使えばさらに多くの言語やツールに対応が可能となります。またマルチプラットフォームにも対応しています。Windows, Mac, LinuxなどこれらのどのOSでも使用可能です。

プラグインなども豊富なためより使いやすくすることも可能です。もしトラブルが発生したとしてもチュートリアルが多いため、初心者でも安心してトラブルに対応することができます。 選ばない理由がないくらいにとても便利です。

※VS Codeのテーマ(色)が違うのはこちら側が変更しているだけですので問題ありません。

Visual Studio Code（VS Code）は、Microsoftが提供する無料の高機能コードエディタです。ではまず公式のVS Codeに行ってみましょう。
↓
VS Code

インストール後、拡張機能（Extensions）を使えば、JavaScriptやPythonなど様々な開発環境を簡単に構築できます。初心者から上級者まで幅広く使えるエディタです。

すると以下のような画面がでてくるはずです

Macの場合は「Download for macOS」をクリックしてzipファイルをダウンロードし、解凍後に「Visual Studio Code.app」をアプリケーションフォルダへ移動すれば完了です。

Windowsの場合は「Other platform」を選択してから「Windows」を選択し、インストーラー（.exe）をダウンロードします。起動後は画面の指示に従って進めるだけで、特別な設定は不要です。

以下の画像は【HTML】初めてWebサイトを作るならまずはHTMLから！基本的な扱い方を初心者向けに解説でWebページを作成した時の画像です。

全て無視していただいて結構です。左下の歯車に注目してください

VS Codeは、カスタマイズすることで初心者でも格段に使いやすくなります。
テーマ変更についてです。「テーマ」の変更の仕方としては、左下の歯車をクリックします。それからテーマにカーソルを合わせ

それからテーマにカーソルを合わせるとこのような選択が表示されます。そして「配色テーマ」をクリックします。

そうするとテーマを選択することが可能となります。たくさんあるので是非色んなものを試してみてください。

見やすい配色を選ぶことで、目の疲れを防げます。初心者には暗すぎないテーマがおすすめです。色んなテーマがあるので一度全てに目を通してみることをお勧めします。

最後に自動保存をお勧めしています。それを有効にすることで手動で保存する手間が省けるのでとっても便利です。保存忘れの防止にも繋がります。設定画面で「Auto Save」をオンにしましょう。これをオンにすると大変便利です。

今回も左下の歯車にカーソルを合わせます。そうすると「設定」という選択肢があるのでそれをクリック

設定の画面で「Auto Save」があるのでそれを「afterDelay」に変更すると、もう自動的に自動保存が可能となっています。

Yama

自動保存をオンにすることで保存を忘れる可能性をゼロにすることができます。

これらの設定で変更したのにうまくいかないという場合は、一度VS Codeを再起動してみてください。

VS Codeを効率よく使うなら、ショートカットキーを覚えるのが近道です。

まず基本はファイル操作で、
Macは「⌘ + N」で新規作成、「⌘ + S」で保存、
Windowsは「Ctrl + N」「Ctrl + S」です。

次に編集操作では、
Macは「⌘ + C／⌘ + V／⌘ + X」、
Windowsは「Ctrl + C／Ctrl + V／Ctrl + X」でコピー・貼り付け・切り取りができます。

さらに画面操作も便利で、Macなら「⌘ + Shift + E」でエクスプローラー表示、Windowsなら「Ctrl + Shift + E」です。検索はMac「⌘ + F」、Windows「Ctrl + F」で行えます。

また、タブ間の移動や複数カーソル操作も覚えるとコーディングが格段に速くなります。最初は基本だけで十分ですが、慣れてきたら便利ショートカットを徐々に追加すると作業が楽になります。

拡張機能を実装することでより効率的にコーディングをすることができ、また便利になります。

ではどのようにしたら拡張機能を入れることができるのかを説明いたします。

VS Codeの左下の歯車をクリックします。それから「拡張機能」という選択肢があるのでそれをクリック

するとこのような画面が出てきます。この左上の文字を入力できるところで拡張機能を検索できます。

まずおすすめなのが日本語化です。拡張機能から「Japanese Language Pack」をインストールすると、メニューが日本語表示になります。

次にお勧めなのが「Live Server」です。この拡張機能を使うことで途中経過を知ることが可能となります。

Live Serverを導入すれば、コーディング効率が大きく向上します。

例えばWebサイトを開発しているときに今サイトがどんな見た目になっているのか、どんな状態になっているのか、確認したいと言う場面が出てきます。

その場合にLive Serverを起動するだけですぐに現状を確認することができます。ですが無理に増やさず、必要なものから少しずつ追加するのがポイントです。

以上がVS Codeの基本となる操作方法の説明でした。これらの中でも、本当にお勧めしたいのがLive Serverです。この拡張機能を入れるだけで格段と開発が楽しくなります。また、途中経過を確認することでコードのミスに気づくことができます。効率的に開発を進めることができるので是非この拡張機能を入れてみてください。

この記事が、VS Codeをこれから使い始める方の参考になれば幸いです。ぜひ実際に触りながら操作に慣れてみてください。

関連記事

【HTML】初めてWebサイトを作るならまずはHTMLから！基本的な扱い方を初心者向けに解説

2026/03/20

HTMLはWebサイトを作る上で基本中の基本で必要となってくる知識です。 全てのWebサイトでHTMLが使われています。 しかし、HTMLはプログラミングではなくWebサイトの形を整えるためのマークア...