初心者でも簡単！VSCodeインストール方法を解説

Visual Studio Code（VSCode）とは？
VSCodeの導入方法
まとめ

Visual Studio Code（VSCode）とは？

出典：https://code.visualstudio.com/

Visual Studio Code（VSCode）は、Microsoftが開発した軽量かつ高機能なオープンソースの無料のコードエディタです。本記事では、HTML、CSS、JavaScriptの開発環境をVSCodeで簡単にセットアップする方法を、初心者にもわかりやすく解説します。プラグインの活用で、効率的な開発環境を構築しましょう。

特徴

クロスプラットフォーム対応 (Windows、macOS、Linux)
豊富な拡張機能
多くのプログラミング言語に対応
Git統合
デバッグ機能
インテリジェントなコード補完

メリット

軽量で高速な動作
カスタマイズ性が高い
無料で利用可能
活発なコミュニティと頻繁な更新
シンタックスハイライトやコード補完機能により効率的な開発が可能
拡張機能により機能を柔軟に追加可能

デメリット

機能が豊富すぎて初心者には扱いづらい場合がある
完全なIDEと比べると一部機能が限定的
拡張機能の設定や学習に時間がかかる
一部の拡張機能やアドオンが有料

VSCodeは、その高い機能性と拡張性から、多くの開発者に愛用されています。プログラミング初心者から上級者まで幅広く使用されており、現在最も人気のあるコードエディタの1つとなっています。

VSCodeの導入方法

VSCodeのインストール

インストール手順

インストーラーをダウンロードする
インストーラーを起動して設定を行う
Visual Studio Codeをインストールする

｜Visual Studio Codeのインストーラーをダウンロード

・VSCodeの公式サイトからVisual Studio Codeのインストーラーをダウンロードします。

　　　　　　▼Microsoft公式サイト

Visual Studio Code

・お使いのOSに合わせたインストーラーをダウンロードします。今回は「Windows」用をダウンロードします。

出典：https://code.visualstudio.com/download

｜Visual Studio Codeのインストーラーの起動

ダウンロードしたVisual Studio Codeのインストーラーをダブルクリックして起動します。

｜規約に同意する

「同意する」を選択して、「次へ」をクリックします。

｜インストール先の指定

続けてインストール先の指定を行います。特別に必要がなければ、ここは初期値のままで問題ありません。

｜スタートメニューフォルダの指定

Windowsのスタートメニューにショートカットを作成するかの選択ができますが、ここも初期値のままで問題ありません。

｜追加タスクの選択

今後「VisualStudioCode」を起動しやすくするためにも、次の内容にチェックを入れておくのがおススメです。

▼おススメのチェック項目

エクスプローラーのファイルコンテキストメニューに[Code で開く]アクションを追加する
エクスプローラーのディレクトリコンテキストメニューに[Code で開く]アクションを追加する

｜インストールの準備完了

以上でVisualStudioCodeのセットアップは完了です。問題が無ければ「インストール」を開始しましょう。

｜インストール状況の表示

VisualStudioCodeのインストール完了までしばらく待ちます。

｜インストールの完了

インストールが終わると次の画面が表示されますので、最後に「完了」をクリックします

｜Visual Studio Codeの起動

完了をクリックすると同時にVisualStudioCodeが起動します。

お好みで赤枠にあるデザインを変更できます。設定が終わったら「X」を押して閉じましょう。

以上でインストール作業は完了です。

エディタの日本語化

日本語化の作業の流れ

拡張機能のメニューを開く
日本語化の拡張機能をインストールする
Visual Studio Codeを再起動する

VSCodeを起動し、左側のサイドバーにある拡張機能アイコン（四角が4つ並んだアイコン）をクリックします。
検索バーに「Japanese」と入力します。
「Japanese Language Pack for Visual Studio Code」を見つけ、「Install」をクリックします。

「Visual Studio Codeの表示言語を日本語に変更して再起動しますか？」とポップが表示されるので「Change Language and Restart」をクリックして再起動します。

VSCodeを再起動すると日本語化されます。

以上で、エディタの日本語化は完了です。

HTML、CSS、JavaScript開発に役立つ拡張機能４選

拡張機能４選

Live Server
HTML CSS Support
Auto Rename Tag
Prettier – Code formatter

今回は拡張機能を4つ紹介します。以下の拡張機能をインストールすることで、開発効率が大幅に向上します。

1. Live Server

リアルタイムでWebページをプレビューできます。
検索バーに「Live Server」と入力し、「Live Server」をインストールします。

2. HTML CSS Support

HTMLとCSSのコード補完機能を強化します。
検索バーに「HTML CSS Support」と入力し、インストールします。

3. Auto Rename Tag

HTMLタグの名前を変更すると、対応する閉じタグも自動で変更されます。
検索バーに「Auto Rename Tag」と入力し、インストールします。
同じ名前の拡張機能がありますが、ダウンロード数、評価の数が多いものを選択すればいいです。

4. Prettier – Code formatter

コードを自動的に整形してくれます。（スペース、改行などを整えてくれます。）
検索バーに「Prettier」と入力し、「Prettier – Code formatter」をインストールします。

左側のサイドバーにある拡張機能アイコン（四角が4つ並んだアイコン）をクリックします。

「Prettier – Code formatter」をクリックして「Prettier – Code formatter」のページを開きます。

「歯車マーク（設定）」をクリックして、「拡張機能の設定」を選択してください。

「Editor: Format On Save」と検索して「Editor: Format On Save」にチェックを入れます。

次に、VSCodeの右上の「ファイル」、「ユーザー設定」、「設定」を選択します。

「設定」ページが開いたら、「Default Formatter」を検索して「Editor: Default Formatter」のプルダウンメニューから「Prettier – Code formatter」を設定します。

これで保存した際にコードを自動整形するようになります。

以上の手順で、VSCodeを使ったHTML、CSS、JavaScriptの基本的な開発環境が整います。

WEBページを作ってみよう！

VSCodeの右上の「ファイル」「フォルダを開く」を選択します。

エクスプローラー内で作りたい場所を決め、「新しいフォルダー」をクリックして新規フォルダ「sample」を作成します。

ポップが出ますが、自分で作成したフォルダなので「はい、作成者を信頼します」をクリックします。

「SAMPLE」フォルダ横にあるの新規ファイルのマークをクリックして「index.html」ファイルを作成してください。

「index.html」ファイル内に以下のコードをコピペしてください。以下のコードの右上にコピーマークがあります。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>サンプルページ</h1>
  </body>
</html>