「Visual Studio Code（VSCode）」を使ってみたいけれど、
インストール方法が分からない…
英語で表示されていて不安…
という初心者の方はとても多いです。
でも安心してください。
VSCodeは 無料で使えて、環境構築もたった数分で完了 します。
VSCodeは、HTML/CSS/JavaScript を学ぶ上で
最も使われているテキストエディタ です。
それではさっそく、
VSCodeがどんなツールなのか、簡単に見ていきましょう。
VSCodeは難しそうに見えますが、簡単に使い始められる優しいツールです。
この記事を順番に進めれば、必ずセットアップできますよ。
VSCodeとは？
VSCode（Visual Studio Code）は、
Microsoft が提供している 無料で使える高機能なテキストエディタ です。
HTML / CSS / JavaScript など、
Web制作で使うコードをとても書きやすくしてくれます。
初心者にも選ばれている理由は、主に次の4つです。
1. 完全無料で使える
プロも使うレベルの高機能なのに、ずっと無料です。
2. コード補完が超優秀
<h1> や <div> などのタグを自動で補完してくれるので、初心者でもミスが減ります。
3. 拡張機能が豊富
- 日本語化
- HTMLプレビュー
- 自動整形
など、必要なものを後から追加できます。
4. 初心者から上級者まで同じ環境で学べる
学習から実務まで一貫して使えるため、思いきって覚えておく価値があります。
VSCodeはボタン1つでコード補完が働くなど
初心者こそメリットを感じやすいツールなんですよ。
VSCodeのインストール手順【Windows / Mac 対応】
VSCodeは、公式サイトから簡単にダウンロードできます。
ここでは Windows と Mac それぞれの手順を分けて わかりやすく解説します。
インストール自体は 数分で完了 するので安心してください。
■ Windows 版のインストール手順
① 公式サイトにアクセス
VSCodeの公式ページを開きます。
「Windows版」をクリック。
② インストーラー（.exeファイル）をダウンロード
クリックすると自動で .exe ファイルがダウンロードされます。
③ ダウンロードしたファイルを実行
VSCodeUserSetup-x64-〇〇.exe をダブルクリックして起動。
④ 画面の指示に従って「Next」を押す
基本的にはすべてそのままで問題ありません。
インストーラーが起動すると、まず使用許諾契約書が表示されます。
内容をしっかりと確認したら、「同意する」を選択し、「次へ」をクリックしてください。
次に、VS CodeをPCのどこにインストールするか、インストール先のフォルダーを指定します。
通常は、表示されているデフォルトの場所で問題ありません。変更する必要がなければ、そのまま「次へ」をクリックして進みます。
次に、スタートメニューに表示されるフォルダー名を指定します。
ここもデフォルトの設定のままでOKです！そのまま「次へ」をクリックしましょう。
このステップでは、VS Codeをより便利に使うための追加タスクを選択します。
特に以下の設定は強くおすすめします。
「デスクトップ上にアイコンを作成する」にチェックを入れる：これにチェックを入れておくと、インストール完了後にデスクトップからすぐに起動できて非常に便利です！
これまでの設定内容の最終確認画面が表示されます。
内容に間違いがなければ、「インストール」をクリックしてください。インストールが開始されます。
⑥ 「完了」ボタンクリック → VSCodeが起動
インストールが完了すると、「完了」ボタンが表示されます。
「Visual Studio Code を実行する」にチェックが入った状態で「完了」をクリックすると、自動的にVS Codeが起動します。
お疲れさまです！
これで VSCode が Windows に入りました。
■ Mac 版のインストール手順
① 公式サイトにアクセス
Windows と同じ公式ページです。
「mac版」をクリック。
② ZIP ファイルをダウンロード
VSCode-darwin-universal.zip がダウンロードされます。
③ ZIPを解凍してアプリを取り出し、アプリケーションフォルダへ移動
ダウンロードした ZIP を開くと Visual Studio Code.app が出てきます。Visual Studio Code.app を Applications（アプリケーション）フォルダ へドラッグ＆ドロップ。
④ 初回起動（Mac特有の注意点）
アプリを起動すると、macOSのセキュリティ警告が出ることがあります。
「開く」 をクリックすれば問題ありません。
⑤ VSCodeが起動すれば完了
これで準備OKです。
Windows も Mac も、途中の設定はほぼそのまま次へで大丈夫です。
迷ったらそのまま進めばOKですよ。
VSCodeを日本語化する方法
VSCodeは初期状態だと 英語表記 になっています。
英語のままだと、設定やメニューが分かりづらく、
初心者にとってはストレスの原因になりがちです。
でも大丈夫です。
以下の手順どおりに進めれば、確実に日本語化できます。
日本語化するとメニューが一気に読みやすくなりますよ。
Step1：左のメニューから「拡張機能」を開く
VSCode画面の左側にある四角が並んだアイコン（Extensions）をクリックします。
Step2：「Japanese」と検索する
拡張機能の検索バーに
japanese
と入力します。
すると候補に、
Japanese Language Pack for Visual Studio Code
が表示されます。
Step3：Japanese Language Pack をインストールする
「Install」ボタンをクリックします。
数秒でインストールが完了します。
Step4：VSCodeを再起動する
日本語化が反映されるのは 再起動後 です。
画面右下に再起動を促す表示がされます。
「Change Language and Restart」
と表示されるのでクリックします。
Step5：メニューが日本語になっていれば成功！
再起動後、メニューや項目が日本語表示になっているはずです。
これで VSCodeの日本語化は完了 です！
まとめ（今日からVSCodeで学習スタート！）
今回は Visual Studio Code（VSCode）のインストール方法と日本語化手順 を紹介しました。
VSCodeは「難しそう」というイメージを持たれがちですが、
実は インストールして日本語化するだけで、誰でもすぐに使い始められる とてもやさしいエディタです。
これからの学習では、VSCodeを使って、
- HTML/CSS の練習
- UIデザインの制作
- JavaScriptの基礎学習
- 小さなWebツール開発
など、さまざまなプログラミングに挑戦できます。
VSCodeは初心者からプロまで幅広く使われているエディタです。
今日インストールしたこの環境を使って、ぜひWeb制作やプログラミングの世界を楽しんでください。
関連記事
HTMLとCSSの分かりやすい入門記事はこちら▼
【初心者向け】HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド
実際に使えるUIを作りながらHTMLとCSSを覚えたい方はこちら▼
【初心者向け】HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門
JavaScriptの基礎を最短で押さえたい方はこちら ▼
【初心者向け】JavaScript基礎入門｜最初に覚えるべき基本だけをわかりやすく解説
