第5章：HTML/CSS/JavaScript開発

はじめに

VSCodeはWeb開発に最適な環境を提供します。この章では、HTML、CSS、JavaScriptの開発環境を セットアップし、実際のコーディングを通じて基本的な開発フローを学びます。

開発環境のセットアップ

必要な拡張機能

Live Server

ライブリロード 機能付きの開発サーバー

HTML CSS Support

インテリセンス によるHTML/CSSのコーディング支援

JavaScript (ES6) code snippets

スニペット でJavaScriptのコーディングを効率化

推奨設定

自動保存

"files.autoSave": "afterDelay"

フォーマット設定

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

プロジェクトの作成

1. プロジェクトフォルダの作成

my-web-project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

2. HTMLテンプレート

ボイラープレート から始めましょう： 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Project</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="js/main.js"></script>
</body>
</html>

3. CSSの基本設定

/* style.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

4. JavaScriptの初期化

// main.js
document.addEventListener('DOMContentLoaded', () => {
    console.log('JavaScriptが正常に読み込まれました');
});

開発フロー

1. Live Serverの起動

  1. index.htmlを右クリック
  2. 「Live Serverで開く」を選択
  3. ホットリロード 機能が有効になります

2. コーディングのベストプラクティス

  • HTML: セマンティック なマークアップを心がける
  • CSS: レスポンシブ デザインを意識する
  • JavaScript: モジュール化 を意識した実装

3. デバッグ方法

  • HTML/CSS: ブラウザの開発者ツールを使用
  • JavaScript: ブレークポイント でのデバッグ

開発効率を上げるTips

エミット記法

エミット を使用した素早いコーディング：

div.container>header>h1{タイトル}+nav>ul>li*3>a

Tabキーで展開されます

マルチカーソル

マルチカーソル を使った効率的な編集：

  • Alt + クリックで追加
  • Ctrl + Alt + ↑/↓で上下に追加
  • Ctrl + D で同じ単語を選択

スニペットの活用

よく使うコードブロックを カスタムスニペット として登録：

  1. コマンドパレットを開く
  2. 「スニペットの構成」を選択
  3. 言語を選択してスニペットを定義