こんにちは！かたすけです。
これからウェブ制作を学び始める皆さん、プログラミング用のツール選びで迷っていませんか？
ウェブサイトを作る上で、HTMLやCSSといった「言語」を書くための専用ツール、「テキストエディタ」は欠かせません。このエディタを選ぶことは、料理でいうと「使いやすい包丁を選ぶ」ようなものです。そして、その中でも世界中のプログラマーから絶大な支持を得ているのが、今回ご紹介するVS Code（Visual Studio Code）です。
なぜVS Codeがこれほどまでに人気なのか、そしてパソコンにインストールして、快適に使えるようになるまでの手順を、初心者の方でも絶対に迷わないように、画像付きで徹底的に解説します。
この記事を読めば、あなたのウェブ制作学習は素晴らしいスタートを切れること間違いなしです！
1. なぜVS Codeがウェブ制作初心者に断然おすすめなの？
数あるエディタの中で、なぜ私たちはVS Codeを強く推奨するのでしょうか。その理由は、以下の4つの大きなメリットにあります。
① 完全無料で、プロも使う高機能ツール
VS Codeは、マイクロソフトが開発したオープンソースのソフトウェアです。つまり、誰でも無料で、しかも商用・非商用を問わず自由に使えます。無料で使えるからといって機能が劣っているわけではありません。世界中のプロフェッショナルな開発者が、このVS Codeを使って日々、高度なシステムやウェブサイトを構築しています。初心者からプロまで、ずっと使い続けられるツールなのです。
② コードが見やすく、間違いに気づきやすい
HTMLやCSSをテキストエディタで書くと、コードはただの文字列として表示されます。しかし、VS Codeを使うと、言語ごとに色分けして表示してくれます。例えば、HTMLのタグは青、属性は緑、テキストは白といった具合です。この「シンタックスハイライト」と呼ばれる機能のおかげで、コードが格段に見やすくなり、タイプミスや閉じタグの忘れといった初歩的なミスに気づきやすくなります。
③ 便利な「拡張機能」で自分好みにカスタマイズできる
VS Codeの最大の魅力の一つが、「拡張機能（Extension）」です。これは、スマホでいうアプリのようなもので、機能を追加・カスタマイズすることができます。
- HTMLの閉じタグを自動で補完してくれる
- 書いたコードをブラウザで即座に確認できる
- コードをきれいに自動整形してくれる
など、ウェブ制作の作業効率を劇的に上げてくれる拡張機能が、何千種類も用意されています。
おすすめの拡張機能に関する記事はこちら！
2. VS Codeのインストール方法【Windows編】
Windowsをお使いの方はこちらの手順で進めていきましょう。
ステップ1：公式サイトからダウンロード
まず、VS Codeの公式サイトにアクセスします。サイトにアクセスすると、ご自身のOS（Windows/Mac/Linux）を自動で認識し、「Download for Windows」という大きなボタンが表示されるはずです。このボタンをクリックしてください。
ファイルは自動でダウンロードが始まります。ダウンロードが完了したら、次のステップに進みましょう。
ステップ2：インストーラーを起動する
ダウンロードしたファイルVSCodeUserSetup-x64-1.xx.x.exe（ファイル名はバージョンによって少し変わります）をダブルクリックして開きます。
すると、「Visual Studio Code セットアップウィザードへようこそ」という画面が表示されます。
内容を確認し、「同意します(A)」にチェックを入れて、「次へ(N)」ボタンをクリックしてください。
ステップ3：追加タスクを選択する
続いて、いくつかのオプションを選択する画面が表示されます。
初心者の方におすすめなのは、「デスクトップにアイコンを作成する(D)」と「コンテキストメニューに追加する」にチェックを入れることです。
- デスクトップアイコン：次から起動するときにデスクトップから簡単に開けるようになります。
- コンテキストメニューに追加：「ファイルを開く」「フォルダーを開く」にチェックを入れると、エクスプローラーからファイルやフォルダを右クリックしたときに「Codeで開く」というメニューが表示され、すぐにVS Codeで編集できるようになります。これは非常に便利なので、ぜひチェックを入れておきましょう。
設定が完了したら、「次へ(N)」ボタンをクリックしてください。
ステップ4：インストールを開始する
最終確認画面が表示されます。「インストール(I)」ボタンをクリックすると、VS Codeのインストールが始まります。数分で完了し、「セットアップウィザードの完了」画面が表示されたら、「完了(F)」ボタンをクリックして終了です。
3. VS Codeのインストール方法【Mac編】
Macをお使いの方はこちらの手順で進めていきましょう。
ステップ1：公式サイトからダウンロード
Windowsと同様に、公式サイトにアクセスします。「Download for Mac」と書かれたボタンをクリックして、ファイルをダウンロードします。ファイルはVSCode-darwin-universal.zipのような形式でダウンロードされます。
ステップ2：アプリケーションフォルダに移動
ダウンロードしたVS Code.zipファイルをダブルクリックして解凍します。
解凍するとVisual Studio Code.appというファイルが生成されるので、このファイルを「アプリケーション」フォルダにドラッグ＆ドロップすれば、インストールは完了です。
これで、LaunchpadやFinderの「アプリケーション」からVS Codeを起動できるようになります。
4. VS Codeの初期設定と基本操作
インストールが完了したら、VS Codeを起動してみましょう。
① ウェルカム画面と基本レイアウト
VS Codeを初めて起動すると、ウェルカム画面が表示されます。ここから「新しいファイルを作成」したり、「フォルダを開く」といった基本的な操作ができます。画面左側には、ファイルを探したり、拡張機能を管理したりするためのメニューが並んでいます。
② フォルダを開いて作業する
VS Codeは、「フォルダ」単位で作業するのが基本です。
- 「ファイル」＞「フォルダを開く」を選択
- 作成したウェブサイトのフォルダを選択して開く
こうすることで、フォルダ内のファイル全体をVS Codeで管理できるようになり、作業効率が格段に上がります。
③ 最初のファイルを作成してみる
フォルダを開いた状態で、左側のファイルエクスプローラーから「新しいファイル」アイコンをクリックし、index.htmlという名前でファイルを作成してみましょう。index.htmlという名前は、ウェブサイトのトップページを示す際に慣習的に使われるものです。
5. よくある質問Q&A
Q1. インストール中にエラーが出ました。どうすればいいですか？
A. エラーメッセージの内容を正確にGoogle検索してみましょう。公式サイトの「トラブルシューティング」ページを確認するのも有効です。また、パソコンの再起動や、ダウンロードし直すことで解決することもあります。
Q2. VS Codeをインストールしたのですが、どこにありますか？
A. Windowsの場合は、デスクトップにアイコンを作成していればそこから起動できます。なければ、Windowsのスタートメニューから「Visual Studio Code」を探して起動してください。Macの場合は、「アプリケーション」フォルダに移動させたので、そこから起動できます。
まとめ
この記事では、ウェブ制作に必須のツール、VS Codeのインストール方法を解説しました。これで、HTMLやCSSを快適に書くための準備が整いました。
この後は、いよいよ実際にHTMLコードを書いて、初めてのウェブページを作成してみましょう。もしよければ、次のステップとしておすすめの拡張機能についての記事も見ていってくださいね！
これからもあなたのウェブ制作学習を全力でサポートします！
