このガイドは、プログラミング初心者を対象に、Visual Studio Code (VSCode) を使ったWeb開発の基礎を学ぶための資料です。基本的な環境設定から、HTML/CSS/JavaScriptを組み合わせた実践的なサンプルまで、Web開発に必要な知識を段階的に解説します。

目次

VSCodeの基本
HTMLの基礎
CSSの基礎
JavaScriptの基礎
実践：Hello Worldサンプル
デバッグの基本
参考リンク集

1. VSCodeの基本

1.1 VSCodeとは

Visual Studio Code（VSCode）は、Microsoft社が開発した無料のコードエディタです。多機能でありながら軽量で、初心者から上級者まで幅広く使われています。

1.2 インストール方法

VSCode公式サイトにアクセス
お使いのOS（Windows/macOS/Linux）に合わせたダウンロードボタンをクリック
ダウンロードしたインストーラーを実行し、指示に従ってインストール

1.3 基本的な画面構成

VSCodeの画面は主に以下の要素で構成されています：

アクティビティバー：左端の縦長のアイコン群
- エクスプローラー（ファイル一覧）
- 検索
- ソース管理（Git）
- デバッグ
- 拡張機能
サイドバー：アクティビティバーで選択した機能の詳細が表示される領域
- ファイルエクスプローラーではファイル一覧が表示される
- 拡張機能ではインストール可能な拡張一覧が表示される
エディタ：コードを編集する中央の広い領域
- 複数のファイルをタブで開ける
- 分割表示も可能
ステータスバー：下部の情報表示バー
- カーソル位置、行・列番号
- エンコーディング情報
- インデント設定
- 言語モード
- Live Serverのボタンなど
パネル：エディタの下部に表示できる領域
- ターミナル
- 出力
- 問題（エラーや警告）
- デバッグコンソール

1.4 プロジェクトの作成と管理

フォルダを開く：ファイル > フォルダを開く でプロジェクトフォルダを選択
ファイルの作成：エクスプローラーで右クリック → 新しいファイル
ファイルの保存：Ctrl+S（macOSではCmd+S）

1.5 便利な拡張機能

初心者におすすめの拡張機能：

Live Server：HTMLファイルをブラウザでリアルタイムプレビュー
HTML CSS Support：HTMLとCSSのコード補完
Auto Rename Tag：HTMLタグの名前を自動で揃える
Prettier：コードを自動的に整形
ESLint：JavaScriptのコード品質チェックとエラー検出
IntelliSense for CSS class names：CSSクラス名の自動補完
Bracket Pair Colorizer：括弧のペアを色分けして見やすく表示
Color Highlight：カラーコードを背景色として表示
Path Intellisense：ファイルパスの入力補完
Japanese Language Pack：VS Code の UI を日本語に変更

Live Serverのインストール方法

左側のアクティビティバーから拡張機能アイコン（□）をクリック
検索バーに「Live Server」と入力
Ritwick Deyが作成したLive Serverを「インストール」

Live Serverの使い方

HTMLファイルを開く
右下の「Go Live」ボタンをクリック
自動的にブラウザが起動し、ページが表示される
コードを編集・保存すると自動的にブラウザが更新される

1.6 ショートカットキー

操作	Windows	macOS
保存	`Ctrl + S`	`Cmd + S`
全て選択	`Ctrl + A`	`Cmd + A`
コピー	`Ctrl + C`	`Cmd + C`
貼り付け	`Ctrl + V`	`Cmd + V`
元に戻す	`Ctrl + Z`	`Cmd + Z`
コードの整形	`Shift + Alt + F`	`Shift + Option + F`
ファイル内検索	`Ctrl + F`	`Cmd + F`
ターミナル表示	Ctrl + `	Cmd + `

2. HTMLの基礎

2.1 HTMLとは

HTML（HyperText Markup Language）は、Webページの構造を定義するためのマークアップ言語です。

2.2 基本的なHTMLファイルの構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
  <!-- コンテンツはここに記述 -->
  <h1>見出し</h1>
  <p>段落</p>
</body>
</html>

ヒント: VSCodeで新規HTMLファイルに「!」と入力してTabキーを押すと、上記の基本構造が自動的に挿入されます。

2.3 主要なHTMLタグ

<!-- 見出し -->
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

<!-- 段落 -->
<p>これは段落です。</p>

<!-- 強調 -->
<strong>太字</strong>
<em>斜体</em>

<!-- リンク -->
<a href="https://www.example.com">リンクテキスト</a>

<!-- 画像 -->
<img src="画像のパス" alt="代替テキスト">

<!-- リスト -->
<ul> <!-- 順序なしリスト -->
  <li>項目1</li>
  <li>項目2</li>
</ul>

<ol> <!-- 順序ありリスト -->
  <li>最初の項目</li>
  <li>2番目の項目</li>
</ol>

<!-- 区切り -->
<div>ブロックレベル要素</div>
<span>インライン要素</span>

<!-- フォーム要素 -->
<input type="text" placeholder="テキストを入力">
<button>ボタン</button>

2.4 HTMLの基本ルール

タグは < と > で囲む
多くのタグは開始タグと終了タグのペア (<p></p>)
終了タグには / が必要
タグは入れ子にできる（正しく入れ子にする）
属性は開始タグに記述 (<a href="...">）

3. CSSの基礎

3.1 CSSとは

CSS（Cascading Style Sheets）は、HTMLで作成した要素の見た目をデザインするための言語です。

3.2 CSSの適用方法

インラインスタイル（HTML内に直接記述）

<p style="color: blue; font-size: 16px;">青い文字</p>

内部スタイルシート（HTMLファイル内のstyleタグ）

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

外部スタイルシート（別ファイル）※最も推奨される方法

styles.css ファイル:

p {
  color: blue;
  font-size: 16px;
}

HTMLでの読み込み:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

3.3 セレクタの基本

/* タグ名でセレクト */
p {
  color: blue;
}

/* クラスでセレクト */
.highlight {
  background-color: yellow;
}

/* IDでセレクト */
#header {
  height: 80px;
}

/* 複数のセレクタ */
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

/* 子孫セレクタ */
nav a {
  text-decoration: none;
}

3.4 ボックスモデル

すべてのHTML要素は「ボックス」として扱われ、以下の要素で構成されています：

content：内容が表示される領域
padding：内側の余白
border：枠線
margin：外側の余白

div {
  width: 300px;        /* 幅 */
  height: 200px;       /* 高さ */
  padding: 20px;       /* 内側の余白 */
  border: 1px solid black; /* 枠線 */
  margin: 30px;        /* 外側の余白 */
}

3.5 主要なCSSプロパティ

/* テキスト関連 */
p {
  color: #333;           /* 文字色 */
  font-size: 16px;       /* フォントサイズ */
  font-family: Arial, sans-serif; /* フォント */
  text-align: center;    /* テキストの配置 */
  line-height: 1.5;      /* 行の高さ */
}

/* 背景 */
div {
  background-color: #f0f0f0;  /* 背景色 */
  background-image: url('bg.jpg'); /* 背景画像 */
}

/* レイアウト */
.container {
  display: flex;         /* フレックスボックス */
  justify-content: center; /* 水平方向の配置 */
  align-items: center;     /* 垂直方向の配置 */
}

/* サイズと余白 */
.box {
  width: 50%;           /* 幅（親要素に対する割合） */
  max-width: 500px;     /* 最大幅 */
  height: 200px;        /* 高さ */
  margin: 10px auto;    /* 上下10px、左右自動（中央寄せ） */
  padding: 20px;        /* 内側の余白（四方向同じ） */
}

4. JavaScriptの基礎

4.1 JavaScriptとは

JavaScriptは、WebページにインタラクティブIF性（動き）を追加するためのプログラミング言語です。HTML（構造）とCSS（見た目）に対して、JavaScriptは振る舞いを担当します。

4.2 JavaScriptの適用方法

内部JavaScript（HTMLファイル内のscriptタグ）

<body>
  <!-- HTMLコンテンツ -->
  
  <script>
    // JavaScriptコード
    console.log("Hello, World!");
  </script>
</body>

外部JavaScript（別ファイル）※推奨される方法

script.js ファイル:

console.log("Hello, World!");

HTMLでの読み込み:

<body>
  <!-- HTMLコンテンツ -->
  
  <script src="script.js"></script>
</body>

ポイント: <script>タグは通常、</body>タグの直前に配置します。これにより、ページの読み込みパフォーマンスが向上します。

4.3 基本的な構文

変数宣言

// 変数（再代入可能）
let name = "田中";
name = "鈴木"; // 再代入OK

// 定数（再代入不可）
const PI = 3.14;
// PI = 3.15; // エラー！

データ型

// 文字列
let greeting = "こんにちは";

// 数値
let age = 20;
let height = 170.5;

// 真偽値
let isStudent = true;

// 配列
let colors = ["赤", "青", "緑"];
console.log(colors[0]); // "赤"

// オブジェクト
let person = {
  name: "山田",
  age: 20,
  isStudent: true
};
console.log(person.name); // "山田"

条件分岐

let age = 18;

if (age >= 20) {
  console.log("成人です");
} else if (age >= 18) {
  console.log("18歳以上です");
} else {
  console.log("未成年です");
}

ループ

// for ループ
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// 配列のループ
const fruits = ["りんご", "バナナ", "オレンジ"];
for (const fruit of fruits) {
  console.log(fruit);
}

関数

// 関数宣言
function greet(name) {
  return "こんにちは、" + name + "さん";
}

// 関数呼び出し
console.log(greet("太郎")); // "こんにちは、太郎さん"

// アロー関数（ES6）
const greet2 = (name) => {
  return `こんにちは、${name}さん`; // テンプレートリテラル
};

4.4 DOM操作の基本

DOM（Document Object Model）を使ってHTML要素を操作します。

要素の取得

// IDによる取得
const header = document.getElementById("header");

// クラスによる取得（複数）
const items = document.getElementsByClassName("item");

// タグ名による取得（複数）
const paragraphs = document.getElementsByTagName("p");

// CSSセレクタによる取得（単一）
const container = document.querySelector(".container");

// CSSセレクタによる取得（複数）
const buttons = document.querySelectorAll("button");

要素の操作

// テキスト内容の変更
element.textContent = "新しいテキスト";

// HTML内容の変更
element.innerHTML = "<span>新しいHTML</span>";

// クラスの追加と削除
element.classList.add("active");
element.classList.remove("hidden");

// スタイルの変更
element.style.color = "red";
element.style.fontSize = "16px";

イベント処理

const button = document.getElementById("myButton");

// イベントリスナーの追加
button.addEventListener("click", function() {
  console.log("ボタンがクリックされました");
  alert("こんにちは！");
});

5. 実践：Hello Worldサンプル

実際にHTML、CSS、JavaScriptを組み合わせたサンプルを作成しましょう。

5.1 基本的なHello Worldページ

方法1: ファイルを分割する方法

以下の3つのファイルを作成します：

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World サンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello World サンプル</h1>
    
    <div id="message">
      これはHTML, CSS, JavaScriptを組み合わせた簡単なサンプルです
    </div>
    
    <button id="greetBtn">挨拶する</button>
    <button id="changeColorBtn">色を変える</button>
    
    <div id="result">
      <!-- 結果がここに表示されます -->
    </div>
  </div>

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

styles.css

/* ページ全体のスタイル */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 20px;
}

/* コンテナのスタイル */
.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 見出しのスタイル */
h1 {
  color: #333;
  margin-bottom: 20px;
}

/* メッセージのスタイル */
#message {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

/* ボタンのスタイル */
button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

/* 結果表示エリアのスタイル */
#result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  min-height: 20px;
}

/* 強調表示 */
.highlight {
  color: #ff6600;
  font-weight: bold;
}

script.js

// DOMが読み込まれた後に実行
document.addEventListener('DOMContentLoaded', function() {
  // console.logでデバッグメッセージを出力
  console.log('ページが読み込まれました！');
  
  // HTML要素を取得
  const greetBtn = document.getElementById('greetBtn');
  const changeColorBtn = document.getElementById('changeColorBtn');
  const resultElement = document.getElementById('result');
  const messageElement = document.getElementById('message');
  
  // 要素が取得できたかコンソールで確認
  console.log('挨拶ボタン:', greetBtn);
  console.log('色変更ボタン:', changeColorBtn);
  console.log('結果表示領域:', resultElement);
  
  // 挨拶ボタンのクリックイベント
  greetBtn.addEventListener('click', function() {
    console.log('挨拶ボタンがクリックされました');
    
    // 現在の時間を取得
    const currentHour = new Date().getHours();
    let greeting;
    
    // 時間帯に応じて挨拶を変える
    if (currentHour < 12) {
      greeting = 'おはようございます！';
    } else if (currentHour < 18) {
      greeting = 'こんにちは！';
    } else {
      greeting = 'こんばんは！';
    }
    
    // デバッグ情報をコンソールに出力
    console.log('現在の時間:', currentHour, '時');
    console.log('選択された挨拶:', greeting);
    
    // 結果を表示
    resultElement.innerHTML = '時間: ' + currentHour + '時<br>' +
                             '<span class="highlight">' + greeting + '</span>';
  });
  
  // 色変更ボタンのクリックイベント
  changeColorBtn.addEventListener('click', function() {
    console.log('色変更ボタンがクリックされました');
    
    // ランダムな色を生成
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#7B68EE'];
    const randomIndex = Math.floor(Math.random() * colors.length);
    const selectedColor = colors[randomIndex];
    
    // デバッグ情報をコンソールに出力
    console.log('利用可能な色:', colors);
    console.log('選択されたインデックス:', randomIndex);
    console.log('選択された色:', selectedColor);
    
    // メッセージの色を変更
    messageElement.style.color = selectedColor;
    
    // 結果を表示
    resultElement.innerHTML = '色を変更しました:<br>' +
                             '選択された色: <span style="color:' + 
                             selectedColor + '">' + selectedColor + '</span>';
  });
});

方法2: 1つのHTMLファイルにすべてを統合する方法

HTMLファイル内にCSS（<style>タグ内）とJavaScript（<script>タグ内）を含める方法です。

integrated.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML/JavaScript統合サンプル</title>
  <!-- 内部CSSスタイル -->
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
      text-align: center;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    #message {
      font-size: 18px;
      color: #666;
      margin-bottom: 30px;
    }
    
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      margin: 0 5px;
      transition: background-color 0.3s;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    #result {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 5px;
      min-height: 20px;
    }
    
    .highlight {
      color: #ff6600;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>HTML/JavaScript統合サンプル</h1>
    
    <div id="message">
      これはHTML, CSS, JavaScriptを組み合わせた簡単なサンプルです
    </div>
    
    <button id="greetBtn">挨拶する</button>
    <button id="timeBtn">現在時刻を表示</button>
    <button id="colorBtn">色を変える</button>
    
    <div id="result">
      <!-- 結果がここに表示されます -->
    </div>
  </div>
  
  <!-- JavaScriptコード -->
  <script>
    // DOMが読み込まれた後に実行
    document.addEventListener('DOMContentLoaded', function() {
      // console.logでデバッグメッセージを出力
      console.log('ページが読み込まれました！');
      
      // HTML要素を取得
      const greetBtn = document.getElementById('greetBtn');
      const timeBtn = document.getElementById('timeBtn');
      const colorBtn = document.getElementById('colorBtn');
      const resultElement = document.getElementById('result');
      const messageElement = document.getElementById('message');
      
      // 要素が取得できたかコンソールで確認
      console.log('挨拶ボタン:', greetBtn);
      console.log('時刻ボタン:', timeBtn);
      console.log('色変更ボタン:', colorBtn);
      console.log('結果表示領域:', resultElement);
      
      // 挨拶ボタンのクリックイベント
      greetBtn.addEventListener('click', function() {
        console.log('挨拶ボタンがクリックされました');
        
        // 現在の時間を取得
        const currentHour = new Date().getHours();
        let greeting;
        
        // 時間帯に応じて挨拶を変える
        if (currentHour < 12) {
          greeting = 'おはようございます！';
        } else if (currentHour < 18) {
          greeting = 'こんにちは！';
        } else {
          greeting = 'こんばんは！';
        }
        
        // デバッグ情報をコンソールに出力
        console.log('現在の時間:', currentHour, '時');
        console.log('選択された挨拶:', greeting);
        
        // 結果を表示
        resultElement.innerHTML = '時間: ' + currentHour + '時<br>' +
                               '<span class="highlight">' + greeting + '</span>';
      });
      
      // 時刻ボタンのクリックイベント
      timeBtn.addEventListener('click', function() {
        console.log('時刻ボタンがクリックされました');
        
        // 現在の日時を取得
        const now = new Date();
        const dateTimeStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        
        // 結果を表示
        resultElement.textContent = "現在の日時: " + dateTimeStr;
      });
      
      // 色変更ボタンのクリックイベント
      colorBtn.addEventListener('click', function() {
        console.log('色変更ボタンがクリックされました');
        
        // ランダムな色を生成
        const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#7B68EE'];
        const randomIndex = Math.floor(Math.random() * colors.length);
        const selectedColor = colors[randomIndex];
        
        // デバッグ情報をコンソールに出力
        console.log('選択された色:', selectedColor);
        
        // メッセージの色を変更
        messageElement.style.color = selectedColor;
        
        // 結果を表示
        resultElement.innerHTML = '色を変更しました:<br>' +
                               '選択された色: <span style="color:' + 
                               selectedColor + '">' + selectedColor + '</span>';
      });
    });
  </script>
</body>
</html>

5.2 サンプルの実行方法

VSCodeで3つのファイル（index.html, styles.css, script.js）を作成します
ファイルは同じフォルダに保存します
index.htmlを開いた状態で、Live Serverを起動します（右下の「Go Live」ボタン）
ブラウザが自動的に開き、サンプルページが表示されます
「挨拶する」ボタンと「色を変える」ボタンをクリックして動作を確認します

6. デバッグの基本

6.1 console.logの使い方

JavaScriptのデバッグで最も基本的なのはconsole.log()を使うことです。

// 変数の値を確認
let name = "太郎";
console.log(name); // "太郎"

// オブジェクトの内容を確認
let person = { name: "太郎", age: 20 };
console.log(person); // {name: "太郎", age: 20}

// 複数の値を一度に確認
console.log("デバッグ:", name, person, 42);

6.2 ブラウザの開発者ツール

開発者ツールの開き方

Chrome/Edge: F12キーまたは右クリック→「検証」
Firefox: F12キーまたは右クリック→「要素を調査」

コンソールタブの使い方

上部のタブから「Console」（コンソール）を選択
JavaScriptエラーやconsole.logの出力が表示される
コンソール下部に直接JavaScriptコードを入力して実行できる

6.3 エラーメッセージの読み方

JavaScriptエラーの例：

Uncaught TypeError: Cannot read property 'value' of null
    at HTMLButtonElement.<anonymous> (script.js:15)

この例は以下を意味します：

エラーの種類：TypeError（型エラー）
エラーの内容：nullオブジェクトのvalueプロパティを読み取ろうとした
エラーが発生した場所：script.jsの15行目

6.4 デバッグのコツ

段階的に確認する：問題が発生している箇所の前後にconsole.logを配置する
一時変数を使う：複雑な式を分解して、中間結果を確認する
エラーメッセージを注意深く読む：行番号とエラーの種類に注目する
条件分岐の確認：if文の条件が期待通りに評価されているか確認する

// デバッグの例
function calculateTotal(price, quantity) {
  console.log("関数が呼び出されました");
  console.log("引数:", price, quantity);
  
  // 値が正しいか確認
  if (typeof price !== 'number' || typeof quantity !== 'number') {
    console.error("引数が数値ではありません");
    return 0;
  }
  
  const subtotal = price * quantity;
  console.log("小計:", subtotal);
  
  const tax = subtotal * 0.1;
  console.log("消費税:", tax);
  
  const total = subtotal + tax;
  console.log("合計:", total);
  
  return total;
}

7. 参考リンク集

公式ドキュメント

チュートリアルサイト

学習リソース

W3Schools - HTML/CSS/JavaScriptのチュートリアル
freeCodeCamp - 無料で学べるWebデベロップメントコース
Progate - 日本語でプログラミングを学べるサイト

便利なツール

CodePen - HTML/CSS/JavaScriptのコードを書いて即座に実行・共有できるサービス
JSFiddle - Web開発のためのオンラインエディタ
Can I use... - ブラウザ対応状況を確認できるサイト

まとめ

この資料を通じて、VSCodeの基本的な使い方から、HTML/CSS/JavaScriptの基礎、そして実際のWebページ作成まで学びました。Web開発の最初の一歩として、以下のことを意識しながら練習を続けてください：

小さく始める：シンプルなページから始めて、徐々に機能を追加していく
実践的に学ぶ：概念を学んだら、すぐに実際にコードを書いて試す
エラーから学ぶ：エラーが発生したら、恐れずにデバッグし、原因を理解する
リソースを活用する：分からないことがあれば、ドキュメントやチュートリアルを参照する

Web開発の世界は非常に広く、常に新しい技術や手法が登場しています。この資料で学んだ基礎を土台にして、さらに知識を深めていってください。

Happy Coding!