VSコードのダウンロードとインストール方法について解説
制作や開発を行うためのコードエディタ「VSコード（Visual Studio Code）」のダウンロードとインストールについて解説します。またインストール後に日本語化の対応も行います。VSコードは無料で使用できます。
目次
①：ダウンロード
下記から VSコード の公式サイトを開きます。
公式サイト：Visual Studio Code
Macの場合、「Download for macOS」ボタンをクリックします。
※Windowsの場合は、「Download for Windows」ボタンをクリックします。
※以降はMacを使用して解説していきます。
ダウンロードページへ遷移した後、自動的にダウンロードが開始します。
※ダウンロードが始まらない場合は、「direct download link.」リンクをクリックして手動でダウンロードを開始します。
ダウンロードが完了したら、インストールに進みます。
②：インストール
VSコードのインストールを行っていきます。
ZIPファイルの解凍
ダウンロードしたZIPファイル「VSCode-darwin-universal.zip」をダブルクリックして解凍します。
インストール
ZIPファイルを解凍すると「Visual Studio Code」という名前のファイルが表示されるので、「アプリケーション」フォルダへドラッグ&ドロップすればインストール完了です。
インストールが完了したら、VSコードを立ち上げてみましょう。
③：VSコードの起動
「Launchpad」に「Visual Studio Code」が追加されているので、クリックします。
以下のようなVSコードの画面が立ち上がります。
そのままではメニューなどが英語表示のため、日本語化の対応を行います。
④：日本語化対応
「拡張機能」のアイコンをクリックして、拡張機能の検索ページを表示します。
検索窓に「japanese」と入力すると一番上に「Japanese Language Pack」が表示されるので、「インストール」をクリックします。
インストールが完了すると「インストール」ボタンが歯車マークに変わるのでこれで完了です。
以上で「VSコード（Visual Studio Code）」のダウンロードとインストールは全て完了です。
続いて、VSコードを使ってファイル管理を行う方法について解説していきます。
VSコードでフォルダとファイルを追加する方法について解説
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
