記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【入門編】Visual Studio Code 基礎知識・使い方

Visual Studio Code の基礎知識・使い方を解説。 これからVisual Studio Codeを使ってみたい方、使い始めた方向けに、Visual Studio Code入門編として幅広く解説しています。

カテゴリ: Visual Studio Code

こんにちは!
プログラミングをしている人の多くが使用しているテキストエディタ「Visual Studio Code 」
「Visual Studio Code って何・・?」「なぜ多くの人が使っているの・・?」「使い方は・・?」「どんな便利な機能があるの・・?」「使ってみたけどいまいち良くわからない・・!」そんな風に考えている方も多いのではないでしょうか?

今回はそんな方向けにVisual Studio Code入門編として「Visual Studio Codeとは」「基礎知識」「インストール方法」「使い方」「便利機能」について幅広く解説していきます。

Visual Studio Codeとは?

Visual Studio Code(VSCode)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

VSCodeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。

2.Windows版・macOS版・Linux版と各OSに対応している。

3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。

4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)

5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

Visual Studio Code入手・インストール方法

Visual Studio Code入手方法

Visual Studio Codeの入手はVisual Studio Code 公式サイトダウンロードページにアクセスします。
Visual Studio Code 公式ダウンロードページ
https://code.visualstudio.com/Download

Visual Studio Codeインストール方法

今回は、Mac版で進めます。
macOS版をクリック

Visual Studio Codeダウンロード開始

ダウンロードが開始されます、ダウンロードが終わるまで少し待ち。
ダウンロードデータは、ダウンロードフォルダにあります。

ダウンロードされたzipファイル(圧縮ファイル)をダブルクリックで展開。
Visual Studio Codeが現れます。

ここでわかりやすいように、アプリケーションフォルダに、移動させましょう。

起動方法

アイコンをダブルクリックし「開く」を押し、下記表が出てきたら。
開くをクリック

Visual Studio Codeを起動します。
これでVisual Studio Codeコードが使えるようになりました。

vs codeの画面の見方

VSCodeの画面は、下記のような画面構成になっています。

①.アクティビティバー
VSCodeで主に使用されている機能をアイコンで表示しています。
1-1エクスプローラー:開いているファイルを一覧表示
1-2検索:ファイル内を検索
1-3git:gitとの連携
1-4デバック:デバックを行う
1-5拡張機能:拡張機能の検索
1-6アカウント:設定の同期を指定
1-7設定:設定を行う

②.サイドバー
アクティビティバーでエクスプローラーが選択されている場合は、フォルダやファイル一覧、もしくはアクティビティバーで選択された項目が表示される。

③.エディタ
開いているファイルの内容を表示します。

④.パネル
ターミナルや、デバック情報が表示されます。

⑤.ステータスバー
文字コードなど、ファイルのステータスに関する情報を表示します。

ミニマップ

ミニマップとは、エディタの右側に表示されるコードアウトラインの事です。
ソースコードの概要を表示し、ミニマップ部をクリックすると該当箇所にすばやく移動する事ができます。

パンくずリスト

パンくずリストとは、エディター上部に表示されている、ナビゲーションバーです。フォルダ、ファイル、シンボルをクリックすれば該当箇所にすばやく移動する事ができます。

日本語表示にする

Visual Studio Codeは、インストールした時は英語表記になっています。
まずは日本語表示にします。日本語表示するには5ステップ。

1.【Command Palette】を開く
2.【Configure Display Language 】を入力
3.【Install additional languages 】を入力
4.【Japanese Language Pack for Visual Studio Code 】をインストール
5.【Visual Studio Code】を再起動
一つ一つ見ていきましょう。


1ステップ【Command Palette】を開く
画面上部のメニューバー、「view」をクリック→「Command Palette」を開きます。



2ステップ【Configure Display Language 】をクリック
コマンドパレットが開くので、「Configure Display Language 」を選択、クリックします。



3ステップ【Install additional languages 】をクリック
「Install additional languages 」をクリックします。



4ステップ【Japanese Language Pack for Visual Studio Code 】入力
画面左側に、インストール可能な言語パッケージが並びますので、
「Japanese Language Pack for Visual Studio Code 】」をクリック
みつからない場合は、「japanese」などでキーワード検索



5ステップ【Visual Studio Code】を再起動
言語パッケージをインストールした後は、Visual Studio Codeの再起動が必要になります。
右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。



リスタートすると、以下のように日本語で表示されるようになります。

これでVisual Studio Codeが日本語設定で使用できるようになりました。

フォルダの開き方/作り方

フォルダの開き方

フォルダをVSCodeドラックアンドドロップするとフォルダを開く事ができます。

ファイルの作り方

ファイル作成ボタンを押し→ファイル名を付け→エンター→ファイルを作成する事ができます。

エディタの分割

分割マークを押すとエディタを分割する事ができます。



また「表示」→「エディタレイアウト」→エディタの分割場所を指定することもできます。

便利機能

検索

VSCodeには便利な検索機能があります。
例えば下記ファイルから「テキスト5」という文字を検索したい。



まずは、検索バーを出します。
検索バーを出すには、VSCode上でショートカットキー、
「windows:[Ctrl] + 【F】」「mac:[Cmd] + 【F】」を入力し検索バーを出します。



検索バーに「テキスト5」と入力すると、該当の「テキスト5」がハイライトされます。コードの量が多くなってくるとより便利に活用する事ができます。

置換

置換をするには、まずは検索バーを出します。
ショートカットキー、「windows:[Ctrl] + 【F】」「mac:[Cmd] + 【F】」を入力し検索バーを出します。
置換したい文字やアルファベット、記号を入力。
今回は「p」を記載。



「>」ボタンを押す→置換バーを出す→「置換したいワードを入力」→今回は「p」と記載しpに置換→「全て置換」のマークを押して置換。
下記のように変更されています。

インテリセンス

VSCodeには予測補完機能が付いています。
途中まで入力すると変換候補を出してくれ、全て記述しなくても良くなります。

マルチカーソル

マルチカーソルとは、カーソルを複数選択し同時編集できる機能です。

Emmet

EmmetとはHTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれます。

例えば「!」と記述しTabを押すと、下記のようにHTMLの雛形を表示してくれます。



クラス名をつけた表示、imgタグの表示なども簡単に行ってくれます。

Emmet CSS記述

CSSでもEmmetの記述をする事ができます。
例えばCSSファイルに「m10」と記載し「tab」を押すと下記のように「margin: 10px;」と表示する事ができます。



「p10」なら「padding: 10px;」、「w20」なら「width: 20px;」と表示する事ができます。

コマンドパレット

VSCodeの機能にアクセスするためのもので、VSCodeの機能にアクセスするには「コマンドパレット」を介してアクセスをします。

「コマンドパレット」の開き方は、「表示」→「コマンドパレット」をクリックか、
ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」で開く事ができます。
VSCode内の機能を表示できます。

コマンドパレットからエディタの背景色を変える

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「theme」を入力「基本設定:背景色テーマ」を選択。
好きな背景色を選択しクリック、背景色を変更する事ができます。

コマンドパレットからミニマップ表示切り替え

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「minimap」を入力→「表示:ミニマップの切り替え」を押しミニマップの表示の切り替えをする事ができます。

設定

vscodeの設定は2通りあります。
①.GUIでの設定
②.settings.jsonでの設定

①.GUIでの設定

設定画面を開きます
「code」→「基本設定」→「設定」



例えばフォントサイズの設定であれば、検索バーに「font」などのキーワードをいれ、変更したい項目(今回であれば「Editor: Font Size」)を探し、数値を変更する事で設定を変更する事ができます。

※変更したい項目をインターネット検索すれば、項目にあったキーワードが出てきます。

②.settings.jsonでの設定

settings.jsonとはvscodeの設定内容を記載するファイルです。
settings.jsonを開きます。

「code」→「基本設定」→「設定」設定が画面を出し



settings.jsonを開くマークをクリック



settings.jsonファイルに定められた記述を記載することで、vscodeの設定を行う事ができます。

VSCode内でターミナルを開く

VSCode内でターミナルを開く事ができるので、テキストエディタとは別にターミナルを開く必要がなくなり、「作業効率」「見やすさ」の面で便利です。

VSCode内でターミナルを開くには、「ターミナル」→「新しいターミナル」をクリック

ショートカットキーが豊富

VSCodeは、マウスを使ってほとんどの操作が行えます、
しかし操作速度を上げ効率的な操作を行う為には、ショートカットーキーが欠かせません。
VSCodeには便利なショートカットキーが豊富に用意されています。

基本操作編

キー 動作 コマンドID
mac:Cmd + X
win:Ctrl + X
行の切り取り(未選択時) editor.action.clipboardCutAction
mac:Cmd + C
win: Ctrl + C
行のコピー(未選択) editor.action.clipboardCopyAction
mac:↑ + ⌘ + K
win: Ctrl+Shift+K
カーソル行削除 editor.action.deleteLines
mac:Cmd + Enter
win:Ctrl+Enter
下に行追加 editor.action.insertLineAfter
mac:↑+Cmd+Enter
win:Ctrl+Shift+Enter
上に行追加 editor.action.insertLineBefore
mac:option+↓
win:Alt+Down
カーソル行を下に移動 editor.action.moveLinesDownAction
mac:option+↑
win:Alt+Up
カーソル行を上に移動 editor.action.moveLinesUpAction
mac:↑+option+↓
win:Shift+Alt+Down
カーソル行を下にコピー editor.action.copyLinesDownAction
mac:↑+option+↑
win:Shift+Alt+Up
カーソル行を上にコピー editor.action.copyLinesUpAction
mac:Home
win:Home
行の先頭に移動 cursorHome
mac:End
win:End
行の末尾に移動 cursorEnd
mac:Cmd+↓
win:Ctrl+End
ファイルの末尾に移動 cursorBottom
mac:Cmd+↑
win:Ctrl+Home
ファイルの先頭に移動 cursorTop

エディター操作 編

キー 動作 コマンドID
mac:↑+Cmd+N
win:Ctrl+Shift + N
新しいウィンドウを開く workbench.action.newWindow
mac: ↑+Cmd+W
win:Ctrl+Shift+W
ウィンドウを閉じる workbench.action.closeWindow
mac:Cmd+W
win:Ctrl+W
エディターを閉じる workbench.action.closeActiveEditor
mac:Cmd+ K F
win:Ctrl+K F
フォルダーを閉じる workbench.action.closeFolder
mac:Cmd + \
win:Ctrl + \
エディターを分割する workbench.action.splitEditor

ファイル操作編

キー 動作 コマンドID
mac: Cmd+N
win:Ctrl+N
新しいファイル workbench.action.files.newUntitledFile
mac:Cmd+O
win:Ctrl+O
ファイルを開く workbench.action.files.openFile
mac:Cmd+S
win:Ctrl+S
保存 workbench.action.files.save
mac:↑+Cmd+S
win:Ctrl+Shift+S
名前を付けて保存 workbench.action.files.saveAs
mac:Cmd+ K W
win:Ctrl+W
ファイルを閉じる workbench.files.action.closeFile
mac:Cmd + K 、 Cmd + W
win: Ctrl+K Ctrl+W
すべてのファイルを閉じる workbench.files.action.closeAllFiles

画面表示編

キー 動作 コマンドID
mac:^ + Cmd +F
win: F11
フルスクリーン表示のトグル workbench.action.toggleFullScreen
mac:↑+Cmd+=
win:Ctrl+Shift+=
ズームイン workbench.action.zoomIn
mac:Cmd+-
win: Ctrl+Shift+-
ズームアウト
mac:Cmd+B
win:Ctrl+B
サイドバー表示のトグル workbench.action.toggleSidebarVisibility
mac: ↑+Cmd+E
win: Ctrl+Shift+E
エクスプローラーの表示 workbench.view.explorer
mac:↑ + Cmd + F
win:Ctrl+Shift+F
検索画面の表示 workbench.view.search

検索・置換編

キー 動作 コマンドID
mac:Cmd+F
win: Ctrl+F
検索 actions.find
mac:Cmd+Option+F
win:Ctrl+H
置換 editor.action.startFindReplaceAction
mac:Cmd+G
win:F3
次を検索 editor.action.nextMatchFindAction
mac:Cmd+↑+G
win:Shift+F3
前を検索 editor.action.previousMatchFindAction

拡張機能が豊富

拡張機能とは、後付けで追加できる便利な機能のことです。
自分の好みで、欲しい拡張機能を追加し、使いやすいようにオリジナルにカスタマイズする事ができます。
VSCodeはこの拡張機能が豊富にあります。
拡張機能の追加方法、オススメの拡張機能を紹介します。

vscode 拡張機能の追加方法

拡張機能ボタンを押し→検索バーに追加したい拡張機能名を記述→インストールボタンを押す これで拡張機能を追加する事ができます。
※拡張機能によってはインストール後に追加設定するものもあります。

オススメ拡張機能

zenkaku

全角スペースを把握
コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。そこで全角を可視化してくれる拡張機能。

HTML Snippets(HTMLのマークアップのサポート)

HTMLスニペットを表示
入力中に、入力内容に応じたHTMLスニペット(マークアップのサポート)を表示してくれます。
HTMLのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれる機能。

Live Server

テキストエディタの変更内容をリアルタイムでブラウザに反映
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

vscode-icons

アイコンを見やすく表示
デフォルトだと少し味気ないアイコンになってしましますが、vscode-iconsで見やすいアイコン表示する事ができます。

Color Highlight

カラーコードの色を可視化
コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができ、効率的に作業することができます。

trailing space

文末の空白を可視化する
プログラミングは文末にスペースがあると、機能しないことがあります。
スペースを可視化してくれる拡張機能。

Prettier – Code formatter

自動ソースコード整形
自動で改行の余白、タブのサイズや位置を整形してくれる拡張機能。

Partial Diff

選択範囲の差分を確認
選択範囲の差分を確認する事ができ、目視の工数を減らす事ができます。

indent-rainbow

インデントを色分
インデントを色分けしてくれ目立たせてくれる拡張機能です。

HTML CSS Support

HTMLにCSS側で作ったclass名を表示
HTMLファイルCSSファイルが連動し、作成した、class名候補を出してくれるので書き間違いを防いでくれます。

まとめ

いかがだったでしょうか?
今回は、Visual Studio Code入門編として

1.Visual Studio Code(VSCode)とは
2.Visual Studio Code入手・インストール方法
3.画面の見方
4.フォルダの開き方/作り方
5.エディタの画面分割方法
6.便利機能
7.コマンドパレットの使い方
8.設定方法
9.Visual Studio Code内でターミナルを開く方法
10.ショートカットキー
11.拡張機能

について解説してきました。
本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。