環境セットアップ
VSCodeの使い方
INDEX
目次

この教材の目安学習時間：110分

0. はじめに

目安の学習時間：45分

VSCodeとは

本格的なWebサイト制作に入る前に、まずは開発の拠点となるVisual Studio Code（ビジュアル・スタジオ・コード、以下VSCode）の準備をしましょう。
重要語句：VSCodeとは
  • Microsoft社が開発・提供している、無料で非常に人気の高いテキストエディタです。
  • プロのWeb開発現場で広く利用されており、軽量な動作と豊富な拡張機能による高いカスタマイズ性が特徴です。
この教材では、VSCodeをメインのエディタとして使用します。
コーディングの速度と正確性を高める機能が多数搭載されているため、今のうちに基本的な使い方に慣れておきましょう。

VSCodeのインストール

はじめに、自身のPCにVSCodeをインストールします。
お使いのOS（WindowsまたはMac）に応じて、以下の手順で進めてください。

公式サイトにアクセスし、インストーラーをダウンロードします。
トップページに表示されているボタンから、自身のOSに合ったものをダウンロードしてください。
操作手順：Windowsへのインストール
  1. ダウンロードしたインストーラー（.exeファイル）をダブルクリックして起動します。
  2. 「使用許諾契約書の同意」画面で「同意する」にチェックを入れ、「次へ」をクリックします。
  3. 「追加タスクの選択」画面では、特に「PATHへの追加（再起動後に使用可能）」にチェックが入っていることを確認してください。デスクトップにショートカットを作りたい場合は、ここでチェックを入れます。
  4. 設定内容を確認し、「インストール」ボタンをクリックします。インストールが完了するまでしばらく待ちます。
操作手順：Macへのインストール
  1. ダウンロードしたZipファイルをダブルクリックして解凍します。
  2. 解凍後に現れる「Visual Studio Code.app」というアプリケーションを、Finderの「アプリケーション」フォルダにドラッグ＆ドロップします。
  3. LaunchpadにVSCodeのアイコンが表示されれば、インストールは完了です。

VSCodeの日本語化

インストール直後のVSCodeは、メニューなどがすべて英語で表示されています。
日本語化することで、より直感的に操作できるようになりますので、最初に設定しておきましょう。
操作手順
  1. VSCodeを起動し、左側のアクティビティバーにある「拡張機能（Extensions）」アイコンをクリックします。
  2. 検索バーに「Japanese」と入力します。
  3. 検索結果から「Japanese Language Pack for Visual Studio Code」を探し、「Install」ボタンをクリックします。
  4. インストール完了後に右下に表示される「Change Language and Restart」ボタンをクリックします。
  5. VSCodeが再起動し、メニューが日本語化されていることを確認できれば完了です。
豆知識：拡張機能とは
  • VSCodeの機能を拡張するための追加プログラムです。今回の日本語化のように、世界中の開発者が作った便利な機能を後から追加して、エディタを自分好みに強化できます。

VSCodeの日本語化

インストール直後のVSCodeは英語表示のため、拡張機能を使って日本語化します。
1. VSCodeの左側のアクティビティバーから「拡張機能（Extensions）」アイコンをクリックする。
2. 検索バーに「Japanese Language Pack」と入力する。
3. 表示された同名の拡張機能の「Install」ボタンをクリックする。
4. インストール完了後、右下に表示される再起動を促すボタンをクリックする。
5. VSCodeが再起動し、メニュー表示が日本語に変わったことを確認する。
(40347)

画面構成の理解

SCodeの基本的な画面構成を把握しておきましょう。
主に5つのエリアに分かれています。
① アクティビティバー：メイン機能の切り替え
② サイドバー：ファイル一覧などを表示
③ エディタ：コードを記述する場所
④ パネル：エラー情報などを表示
⑤ ステータスバー：ファイル情報などを表示
(40342)

フォルダの開き方とファイルの作り方

Web制作では、単体のファイルだけでなく、複数のファイル（HTML, CSS, 画像など）をフォルダ単位で管理するのが基本です。
操作手順：フォルダを開いてファイルを作成する
  1. アクティビティバーの一番上にある「エクスプローラー」アイコンをクリックします。
  2. サイドバーに表示される「フォルダーを開く」ボタンをクリックし、作業用のフォルダを選択します。
  3. サイドバーに開いたフォルダ名が表示されます。フォルダ名にカーソルを合わせると表示される、ファイルのアイコン（新規ファイル）をクリックします。
  4. ファイル名（例：index.html）を入力してEnterキーを押すと、ファイルが作成され、エディタに表示されます。

知っておきたい便利機能

VSCodeにはコーディングを助ける便利な機能が標準で備わっています。
ここで紹介する機能は、今後の学習で自然と使う場面が出てきますので、「こんな機能がある」ということを覚えておきましょう。
機能名
概要
インテリセンス
コードを途中まで入力すると、候補となるコードを予測して表示してくれる賢い入力補完機能。
Emmet
短い省略記法でHTMLやCSSを素早く記述できる機能。後の章で詳しく学びます。
マルチカーソル
複数の場所に同時にカーソルを置き、一括で編集できる機能。同じ単語の修正などに便利です。
これらの機能を使いこなすことで、作業の速度と正確性が格段に向上します。
まずは「こんな機能があるんだ」ということを覚えておきましょう。

1. ファイル・フォルダ管理について

目安の学習時間：5分

自身のPCのデスクトップ（Desktop）に「programming」という名前のフォルダ（別名ディレクトリ）を作成し、その中で全てのフォルダ・ファイルを作成するようにしましょう。

そうするとファイルを見失わずに整理できて良いと思います。

2. codeコマンドで簡単にVSCodeでフォルダを開く方法

目安の学習時間：10分

下の記事の通りに実行すると、ターミナルで「code」コマンドを用いて、好きなディレクトリ・ファイルを開くことができます。
慣れてきたら毎回VSCodeを立ち上げて「File」→「Open」でフォルダを開くより早くなると思うので、おすすめです。

参考記事は以下です。

ターミナルからVisual Studio Codeを起動する方法【公式の方法】 #VSCode - Qiita

ターミナルからVisual Studio Codeを起動する方法【公式の方法】 #VSCode - Qiita
2018.07.03 新規で来てくださった方にわかりやすいように更新しました。ターミナルからエディタを起動したい。atom hoge.jsとかやって特定のファイル開いたりatom .とかやってカレ…

3. Emmetをフル活用してHTML・CSSをコーディングしましょう

目安の学習時間：30分

Emmetの基本

コーディングを進める上で、Emmet（エメット）は作業効率を劇的に向上させるための必須ツールです。
重要語句：Emmetとは
  • HTMLやCSSを、短い省略記法（Shorthand）で記述できるようにする機能です。
  • 例えば、div.containerと入力してTabキーを押すだけで<div class="container"></div>のように展開されます。
VSCodeにはEmmetが標準で搭載されているため、特別な準備は不要ですぐに利用を開始できます。
Emmetを活用する最大のメリットは2つあります。
  • コーディングの高速化：キーを打つ回数が大幅に減り、驚くほど速くコードを記述できます。
  • タイプミスの削減：タグの閉じ忘れやスペルミスといった、手入力で起こりがちなミスを防ぎます。
これから学ぶいくつかの基本的なルールを覚えるだけで、コーディングの負担が大幅に軽減されます。
積極的に活用していきましょう。

HTMLコーディングでよく使うEmmet記法

まずは、HTMLの構造を素早く組み立てるための、基本的かつ強力なEmmet記法を紹介します。
以下の記法を組み合わせることで、複雑なHTML構造も一行で記述することが可能です。
目的
記号
入力例
出力結果
HTML5の雛形
!
!
<!DOCTYPE html>...
classを付与
.
.container
<div class="container"></div>
idを付与
#
#header
<div id="header"></div>
子要素を作成
>
ul>li
<ul><li></li></ul>
兄弟要素を作成
+
h1+p
<h1></h1><p></p>
要素を繰り返す
*
li*3
<li></li><li></li><li></li>
1つ上の階層へ
^
div>p^h2
<div><p></p></div><h2></h2>
グルーピング
()
div>(h2+p)
<div><h2></h2><p></p></div>
連番を付与
$
.item-$*3
<div class="item-1"></div>...

CSSコーディングでよく使うEmmet記法

EmmetはCSSの記述も大幅に効率化します。
プロパティや値を数文字入力するだけで、完全なCSSの行を生成できます。
重要：CSS Emmetの基本ルール
  • プロパティの頭文字や省略形を入力します。（例：margin → m）
  • 続けて数値を入力すると、自動的にpx単位が付きます。（例：m10 → margin: 10px;）
  • 数値の後に特定の文字を付けることで単位を指定できます。（例：w50p → width: 50%;, fz1.6r → font-size: 1.6rem;）
目的
入力例
出力結果
幅と高さ
w100, h50p
width: 100px;, height: 50%;
余白 (外側/内側)
m10-20, p0
margin: 10px 20px;, padding: 0;
位置指定の余白
mt10, pr20
margin-top: 10px;, padding-right: 20px;
背景と文字色
bg#fff, c#333
background: #fff;, color: #333;
回り込み解除など
d:b, d:f, pos:a
display: block;, display: flex;, position: absolute;

4. VSCodeの必須プラグイン

目安の学習時間：20分

それでは本題のVSCodeの便利なプラグインについてご紹介します。

プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。

以下の2つのプラグインを試しに導入してみましょう。

  • Open in Browser：これを使用すると、以下の写真のようにHTMLファイルを右クリック→「Open in Default Browser」を選択すると、簡単にHTMLファイルをブラウザで開きサイトの見た目を確認できます。
(4785)

  • COMMENT ANCHOR： コメントが見やすくなります。コードレビューの際にあると見やすいので、導入しておいてください。
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH