![]() |
「Web制作を始めたい」 「コードを入力するエディタはVisual Studio Code(VS Code)がいいらしい」 「ドットインストールという学習サイトで無料で始められるらしい」 |
今やWeb制作は人気の職業なので始めてみようと思う人が増えています。
ドットインストールという学習サイトも知られるようになり、気になる人も多いでしょう。
元ゲームプログラマーがVisual Studio Code(VS Code)入門をやってみた感想です。
以下「JQuery入門」の続きです。
目次
Visual Studio Code(VS Code)入門
ドットインストールのレッスン一覧からドットインストールが提供する学習コースの一覧が見れます。
コース詳細はいずれまとめ記事に書くとして、無料で受けられる以下を受けてみました。
- Visual Studio Code(VS Code)入門
レッスン内容

レッスンは動画です。
動画で解説されている通りに自分のPC環境でマネして学ぶスタイルです。
ドットインストールの特徴をまとめるとこんな感じです。
(利点)
- 開発環境の設定から実際現場で使用する開発環境で学習できる
- 動画の解説通りにマネすることで学習できる
- 1レッスンの動画の長さは平均2分と短いので集中できる。
- 他のユーザーの「質問と回答」を見れる
- レッスンに必要な素材は提供されている
- 分からないことを質問できる(有料)
初心者にやさしい学習サイトです。


学習した項目は一覧で確認できます。
レッスンを完了したら手動で「完了」に設定します。
無料のVisual Studio Code入門のレッスンの以下ですが、このコースにかかった時間は1時間です。
動画は合計30分ほどありますが、動画の説明が分かりやすいのでVisual Studio Codeのセットアップ、操作方法はこの動画だけを見るだけで理解できます。
ショートカットキーは一度で覚えようとせず、メモしておき、それを見ながら普段から使いながら覚えるといいです。
Visual Studio Code(VS Code)のレッスンは入門のみです。
レッスン内容 ポイント
Visual Studio Code(VS Code)のレッスン一覧はこちらで確認できます。
最初のレッスンはVisual Studio Codeのインストールです。
こちらの公式サイトからVS Codeをダウンロードし、インストールします。
その他学習する内容はざっくりとこんな感じです。
- 画面構成
- 設定の変更
- ファイルの編集
- Emmet記法
- ショートカットキー
画面構成
VS Codeの全体の操作方法や以下を学びます。
- 拡張機能に機能を追加
- コマンドパレットでコマンドを検索
VS Codeのテーマ(画面デザイン)を変えたい場合、コマンドパレットに”theme”と入力し、表示される選択肢から好みのテーマを選びます。

画面右上に全体図が小さく表示されるのですが、それが邪魔な場合はコマンドパレットに”minimap”と入力し、表示のON/OFFを切り替えます。
そういった、何か機能を変更したい場合、コマンドパレットでコマンドを検索し、設定変更します。
設定の変更
VS Code全体の設定変更は、歯車アイコンの設定で変更します。
レッスンでは次のように変更しました。
- Japanese Language Pack for VS Code
メニューの日本語化 - Auto Save
自動保存設定。afterDelayに変更 - Font Size
フォントサイズ。少し大きく14に変更 - Font Family
フォント。コードに適切な等幅フォント、Ricty Diminishedに変更 - Tab Size
タブのサイズ。少し減らして2に変更 - Render Whitespace
スペースに記号文字を入れるかどうか。allに変更 - Word Wrap
行の折り返しをするかどうか。onに設定
ファイルの編集
VS Codeでのファイル編集方法や以下操作についての説明です。
- 命令の自動補完
- マウスホバー時に命令の説明表示
- 未保存ファイルの確認
- マルチカーソル操作
特に、マルチカーソルを使うと複数行同時に編集が出来るので便利です。

その際、後述のショートカットキーで操作すると編集効率が上がります。
Emmet記法
よく使うHTMLタグはEmmet記法を使うと素早く入力出来ます。
その一例としてレッスンでは以下を説明しています。
- !
HTMLのテンプレート呼び出し -
ul>li*3
ulのliを3個
例えば、!と打つと、

選択肢が2つ表示されて、!を選択してリターンで選択するだけで、

HTMLの基本構文が入力できます。かなり便利です。
ショートカットキー(Mac)
VS Codeではショートカットキーが豊富にあります。
レッスンでは次のショートカットキーを説明されてます。
キー | 動作 |
⌘C | カーソルの行をコピー |
⌘V | カーソルの行をペースト |
⌘B | サイドバーを閉じる |
⌘/ | コメントを付ける |
⌥↑↓ | 選択範囲の行を上下に移動 |
⌥⇧↑↓ | 選択範囲の行を上下にコピー |
⌘[Enter] | 行の途中で下に行を挿入 |
⌘⇧[Enter] | 行の途中で上に行を挿入 |
⌘d | 単語を選択 |
⌘f | ページ内で検索 |
⌘g | 次の検索結果 |
⌘⇧g | 前の検索結果 |
⌘⌥f | ページ内で置換 |
⌘⇧f | プロジェクト内で検索 |
⌥マウスクリック | 複数行カーソル |
⌘dを連続 | 複数単語を選択(複数行カーソル時) |
⌘⇧l | 複数行で同じ単語を選択(複数行カーソル時) |
⌘⌥↑↓ | 複数行カーソルの行選択を上下に増やす |
⌘ Cmd
⌥ Option
⇧ Shift
^ Ctrl
その他のショートカットキーはググって調べるといいです。
例えば、このサイトにたくさんのショートカットキーが紹介されてます。
【Mac版】 VisualStudioCode キーボードショートカット
感想 Visual Studio Code(VS Code)入門
初心者にやさしい学習サイトです。
初心者でも一人でVisual Studio Codeの設定から基本的な操作方法まで勉強できます。
便利なショートカットキーもいろいろ説明されているので、VS Code経験者も見る価値があります。
Emmet記法も覚えると便利なので、もっと詳しく紹介されているサイトをググって調べておきたいです。
ドットインストールではレッスン内容の分からない点を質問できるので、疑問点は質問して理解を深めるといいです。
なお、Web制作でAdobe製品(XD、Dreamweaver、Adobe Photoshop、Illustratorなど)を使う場合はAdobe Creative Cloudが必要です。
社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。