【HTML/CSS/JS開発環境】VSCodeでWeb制作を始めるための設定と拡張機能

「Webサイトを自分で作ってみたいけど、何から始めればいいの？」

こんにちは！この記事を書いている私は、ほんの数ヶ月前までプログラミングの「プ」の字も知らない、皆さんと同じ全くの初心者でした。そんな私が、今ではAIの力を借りながら2つのWebサイト（buyonjapan.com, copicode.com）を独力で立ち上げることができました。

この記事では、私が実際にWeb制作の学習を始めたときに使った「Visual Studio Code（VSCode）」という無料ツールについて、環境構築の方法から、入れておくと爆発的に作業が楽になる拡張機能まで、私がつまずいたポイントも交えながら、専門用語を極力使わずに解説していきます。

難しい話は抜きにして、まずはこの記事の通りに真似してみてください。この記事を読み終える頃には、あなたのパソコンで簡単なWebページが「動く」状態になっています。さあ、一緒にWeb制作の世界へ第一歩を踏み出しましょう！

STEP1: VSCodeを準備しよう！【インストールと日本語化】

まずは、Web制作の相棒となるVSCodeをあなたのパソコンにインストールしましょう。料理でいう「包丁」を手に入れるようなものです。とても簡単なので、サクッと終わらせてしまいましょう。

1. VSCodeのダウンロードとインストール

最初に、VSCodeの公式サイトからインストーラーをダウンロードします。

Visual Studio Code 公式サイト

アクセスすると、あなたのOS（WindowsやMacなど）に合ったダウンロードボタンが大きく表示されているはずです。それをクリックしてダウンロードし、あとは画面の指示に従ってインストールすれば完了です。特に難しい設定はないので、基本的には「次へ」や「同意する」をクリックしていけばOKです。

2. 英語から日本語へ【日本語化拡張機能】

インストール直後のVSCodeは、メニューなどがすべて英語表記になっています。英語が得意な方ならそのままでも良いですが、やはり母国語の方が安心しますよね。私も最初は英語のままで頑張ろうとしましたが、すぐに挫折しました（笑）。

そこで、「拡張機能」というVSCodeをパワーアップさせるアイテムを使って、表示を日本語に変えてしまいましょう。

VSCodeの左側にある四角いアイコン（アクティビティバー）をクリックします。
表示された検索ボックスに「Japanese Language Pack」と入力します。
一番上に出てくる「Japanese Language Pack for Visual Studio Code」の「Install」ボタンをクリックします。
インストール後、右下に再起動を促すメッセージが表示されたら、「Restart」をクリックします。

VSCodeが再起動すれば、メニューなどが日本語になっているはずです。これで、最初の準備は完了です！

STEP2: 魔法の呪文を唱えよう！【必須・厳選拡張機能】

VSCodeの準備ができたところで、Web制作を劇的に効率化してくれる「魔法の呪文」、つまり拡張機能を3つだけ厳選してご紹介します。世の中にはたくさんの拡張機能がありますが、初心者のうちは「あれもこれも」と入れると混乱のもと。まずは、私が「これなしではもう開発できない！」と心から思う、以下の3つだけで十分です。

🥇 第1位: Live Server - 書いたコードが即座に反映される魔法

これ、絶対に入れてください。Web制作の楽しさを最初に教えてくれるのが、この「Live Server」です。

通常、HTMLやCSSファイルを修正したら、ブラウザに戻ってリロード（F5キーなど）ボタンを押さないと変更が反映されません。しかし、Live Serverを使うと、コードを保存した瞬間に、自動でブラウザの表示が更新されるようになります。

この「書いたらすぐ変わる」という体験は、本当に感動します。いちいちリロードする手間がなくなるだけで、作業効率が何倍にも跳ね上がります。

インストール方法は先ほどの日本語化と同じです。左側の拡張機能アイコンから「Live Server」と検索してインストールしてください。

🥈 第2位: Prettier - 自動でコードを綺麗に整えてくれる執事

コードを書き始めると、インデント（字下げ）がガタガタになったり、スペースの使い方がバラバラになったりします。そんな汚いコードを、保存するたびに一瞬で美しいコードに整形してくれるのが「Prettier」です。

「見た目なんてどうでもいいじゃん」と思うかもしれませんが、コードの見た目は非常に重要です。整ったコードは読みやすく、エラーを見つけやすくなります。Prettierを入れておけば、コードの見た目に悩む時間はゼロになります。

「Prettier - Code formatter」と検索してインストールしましょう。

【重要】Prettierを有効にする設定

Prettierはインストールしただけでは使えません。保存時に自動で整形されるように、簡単な設定を追加しましょう。

左下の歯車アイコンをクリックし、「設定」を選択します。（または Ctrl + ,）
右上のファイルのアイコン（設定(JSON)を開く）をクリックします。
開かれた settings.json というファイルに、以下の2行を追記してください。（すでに何か書かれている場合は、{} の中にカンマで区切って追加します）


"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

STEP3: 最初のWebページを作ってみよう！【コピペOK】

お待たせしました！いよいよ、実際にWebページを作成していきます。ここでは、HTML・CSS・JavaScriptという3つの言語を使いますが、今はそれぞれの意味を完全に理解する必要はありません。「こう書くと、こうなるんだな」という感覚を掴むのが目的です。以下の手順通りに進めてください。

1. 作業フォルダと3つのファイルを作成する

まず、パソコンの好きな場所（デスクトップなど）に、このプロジェクト用のフォルダを新しく作りましょう。フォルダ名は「my-first-website」などが分かりやすいです。

次に、VSCodeを開き、「ファイル」メニューから「フォルダーを開く...」を選択して、今作ったフォルダを開きます。

フォルダを開いたら、VSCodeの左側（エクスプローラー）で、新しいファイルを3つ作成します。

index.html （Webページの骨格を書くファイル）
style.css （Webページの見た目を整えるファイル）
script.js （Webページに動きをつけるファイル）

2. HTMLを書く (index.html)

index.html ファイルを開いて、以下のコードをそのままコピー＆ペーストしてください。

時短テクニック: 実は、index.html に ! （半角のビックリマーク）を1文字だけ入力して Tab キーを押すと、基本的な雛形が一瞬で生成されます。これは「Emmet」というVSCodeの標準機能で、覚えておくと非常に便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのウェブサイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>こんにちは、VSCodeの世界へ！</h1>
    <p id="message">ここにメッセージが表示されます。</p>
    <button id="changeTextBtn">クリックしてね！</button>

    <script src="script.js"></script>
</body>
</html>

簡単に解説すると、<h1> は大見出し、<p> は段落、<button> はボタンのことです。そして、<link rel="stylesheet" href="style.css"> でCSSファイルを、<script src="script.js"></script> でJavaScriptファイルを読み込んでいます。

つまずきポイント： ここで href="style.css" や src="script.js" のファイル名を間違えると、CSSやJSが正しく読み込まれず、見た目が崩れたり動きがなかったりする原因になります。私も何度もやりました…。ファイル名が正しいか、よく確認してくださいね。

3. CSSを書く (style.css)

次に、style.css ファイルを開いて、以下のコードをコピペします。これは、先ほど作ったHTMLの見た目を整えるためのコードです。

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

ここでは、ページ全体の文字の配置を中央揃えにしたり、文字の大きさを調整したり、ボタンのデザインを少し変えたりしています。

4. JavaScriptを書く (script.js)

最後に、script.js ファイルを開いて、以下のコードをコピペします。これが、Webページに「動き」を与える魔法のコードです。

// HTMLの要素を取得する
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// ボタンがクリックされたときの処理
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = 'すごい！JavaScriptが動いた！';
});

ここでは、「changeTextBtn というIDを持つボタンがクリックされたら、message というIDを持つpタグの中のテキストを書き換える」という命令を書いています。

STEP4: ついに感動の瞬間！Live Serverで「動く」を体験しよう

さあ、すべての準備が整いました！いよいよ、今作ったWebページをブラウザで表示してみましょう。

VSCodeで index.html ファイルを開いた状態で、右下にある「Go Live」というボタンをクリックしてください。

すると、自動的にブラウザが立ち上がり、作成したページが表示されるはずです！

そして、ページに表示されている「クリックしてね！」ボタンを押してみてください。「すごい！JavaScriptが動いた！」とメッセージが変われば大成功です！

さらに、VSCodeに戻って index.html の <h1> のテキストを「ようこそ、Web制作の世界へ！」などに書き換えて保存（Ctrl + S）してみてください。ブラウザに切り替えると、リロードしていないのに表示が瞬時に変わっているのが分かるはずです。これがLive Serverの力です。感動的じゃないですか？

つまずきポイント：「Go Live」を押してもページが表示されない、CSSが効いていない、ボタンを押しても何も起こらない…初心者のうちは必ず何かしらのエラーに遭遇します。そんな時は、まず以下の点を確認してみてください。

HTMLファイルに書いたCSS/JSファイルへのリンク（href や src）のパスは正しいですか？
ファイル名は間違っていませんか？（style.css なのに styles.css になっているなど）
コードは正しくコピー＆ペーストできていますか？

それでも解決しない時は、エラーをAIに聞くのがおすすめです。「VSCodeのLive ServerでCSSが反映されません。コードはこれです。」のように、状況とコードを貼り付けて質問すると、驚くほど的確な答えを返してくれます。私がサイトを作れたのも、この「AI先生」がいたからです。

まとめ: あなたのWeb制作キャリアは、ここから始まる

お疲れ様でした！この記事の手順通りに進めて、あなただけのWebページを動かすことができたでしょうか？

今回行ったことは、

Web制作の万能ツール「VSCode」を準備した
Live Serverなどの拡張機能で、開発環境を最強にした
HTML, CSS, JavaScriptを書いて、実際に動くWebページを作った

という、Web制作者にとっての基本中の基本であり、最も重要な第一歩です。この「自分の書いたコードが、目に見える形で動く」という感動を、ぜひ忘れないでください。その感動が、これからの学習の大きなモチベーションになります。

今日作った小さなページも、ここからHTMLやCSSを学び、JavaScriptで様々な機能を追加していくことで、私が作ったようなWebサイトへと成長させていくことができます。あなたのWeb制作キャリアは、まさに今、ここから始まったのです。

これからも、一緒に学習を続けていきましょう！