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

【初心者むけ】vscode とは?基礎から徹底解説

「Visual Studio Codeって何?」「Visual Studio Codeを使ってみたいけど難しそう」「プログラミング用のテキストエディタって何使ったら良いの?」そんなお悩みを抱えている方はぜひ本記事を参考にしてください。

カテゴリ: Visual Studio Code

vscodeとは?「使い方」、「導入方法」、「画面の見方」、「ショートカットキー」、「フォルダ・ファイルの作成方法」、「拡張機能」を基礎から徹底解説します。
初心者の方向けにわかりやすく、写真、動画付きで解説しています。

エディタとは?

テキストエディタとはテキスト(文章)を編集するためのソフトウェアのことです。
テキストエディタには種類があります。

プログラミング用
プログラミングでコードを書くときに使用され、様々なプログラミング言語に対応されており、プログラミングしやすい機能が豊富。

ライティング用
文章を書く時に使用され、文字数チェック、自動補完機能など文章記述しやすい機能が豊富。

データ編集用
データ編集用に使用され、データベースなどが入っており、データ編集しやすい機能が豊富。

この中でもVisual Studio Codeはプログラミング用に使用されます!

Visual Studio Codeとは?

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

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

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

vs code入手方法

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

vs codeインストール方法

Windows版・macOS版・Linux版それぞれのOSに合わせてクリック
今回は、Mac版で進めます。

vs codeダウンロード開始

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

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

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

起動方法

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

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

vs code日本語化

vs 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ステップ【vs code】を再起動
言語パッケージをインストールした後は、vs codeの再起動が必要になります。
右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。

リスタートすると、以下のように日本語で表示されるようになります。
これでvs codeが日本語設定で使用できるようになりました。

vs codeの画面の見方

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

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

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

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

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

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

ミニマップ

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

パンくずリスト

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

フォルダ・ファイルの作り方

フォルダを作成するには、フォルダをクリックし、
フォルダ作成ボタンをクリック、フォルダ名をつけて、エンターで作成する事ができます。

ファイルを作成するには、フォルダをクリックし、
ファイル作成ボタンをクリック、ファイル名をつけて、エンター
で作成する事ができます。

vs codeはショートカットキーが豊富

vs codeには、ショートカットキーが用意されています。
ショートカットキーを使用する事でより効率的な作業を行なう事ができます。

キー 動作
mac:Cmd+F
win: Ctrl+F
検索
mac:Cmd+Option+F
win:Ctrl+H
置換
mac:↑+Cmd+N
win: Ctrl+Shift + N
新しいウィンドウを開く
mac: ↑+Cmd+W
win:Ctrl+Shift+W
ウィンドウを閉じる
mac:Cmd+W
win:Ctrl+W
エディターを閉じる
mac:Cmd+ K F
win:Ctrl+K F
フォルダーを閉じる
mac: Cmd+N
win:Ctrl+N
新しいファイル 作成
mac:Cmd+O
win:Ctrl+O
ファイルを開く
mac:Cmd+S
win:Ctrl+S
保存
mac:↑+Cmd+S
win:Ctrl+Shift+S
名前を付けて保存
mac:↑+Cmd+=
win:Ctrl+Shift+=
画面ズームイン
mac:Cmd+-
win: Ctrl+Shift+-
画面ズームアウト

ほんの一部の紹介ですが、その他にも沢山の便利なショートカットキーが用意されおり、効率的な作業を行う事ができます。

vs codeは便利な拡張機能が豊富

全角スペースを把握【zenkaku】

コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。

zenkakuを導入することで全角スペースがわかりやすく、効率的な作業ができる。

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

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

Color Highlight(カラーコードの色を可視化してくれる)

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

ほんの一部の紹介ですが、その他にも無料で沢山の便利な拡張機能が用意されており、効率的な作業を行う事ができます。

まとめ

今回は、「Visual Studio Codeとは」、「ダウンロード方法」、「画面の見方」、「フォルダ・ファイルの作成方法」、「ショートカットキー」、「拡張機能」について解説してきました。

本記事を参考にvscodeを使用していただけたら幸いです。

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

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

minweb編集部(株)セルリア

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

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

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

ダウンロード資料画像

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

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