タイトル: 環境構築
SEOタイトル: HTML 開発環境構築完全ガイド（VS Code・Live Server・Emmet・Vite）
| この記事の要点 |
|
最小構成: テキストエディタ + ブラウザ
HTML はテキストファイルを書いてブラウザで開くだけで動きます。Hello World レベルなら何もインストール不要:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>これを index.html として保存 → ダブルクリックでブラウザに表示されます。とはいえ実務では効率化のため、以下のツールが必須です。
テキストエディタ / IDE 選び
| エディタ | 料金 | 特徴 | 2026 現在の状況 |
|---|---|---|---|
| Visual Studio Code | 無料 | 軽量・拡張豊富・Git 統合・Live Share | 業界標準 |
| WebStorm | 有料 | JetBrains 製・Vue/React/TS が強力 | 商用大規模で人気 |
| Cursor | 有料 | VS Code フォーク + AI 補完 | 急成長中 |
| Sublime Text | $99 | 動作軽快 | シェア減少 |
| Vim / Neovim | 無料 | キーボード操作の達人向け | 玄人向けで根強い |
| Atom | 無料 | GitHub 製 | 2022 年に開発終了（EOL） |
| Brackets | 無料 | Adobe 製、HTML/CSS 特化 | Adobe 提供は終了。OSS コミュニティで継続 |
| Adobe Dreamweaver | サブスク | ビジュアル編集 | サブスクとして継続中だが新規採用は減 |
VS Code の HTML 向け推奨拡張機能
| 拡張機能 | 役割 |
|---|---|
| Live Server / Live Preview | 保存と同時にブラウザリロード |
| Prettier | HTML/CSS/JS の整形（保存時自動） |
| ESLint | JS の静的解析 |
| HTMLHint | HTML の linter |
| Auto Rename Tag | 開始タグを書き換えると終了タグも同時に |
| Highlight Matching Tag | 対応タグのハイライト |
| Path Intellisense | パスの補完（画像/CSS/JS の参照） |
| indent-rainbow | インデントを色で可視化 |
| Color Highlight | CSS の色コードをプレビュー |
| GitLens | Git 履歴を行単位で表示 |
| Japanese Language Pack | VS Code の UI を日本語化 |
# CLI から拡張インストール
code --install-extension esbenp.prettier-vscode
code --install-extension ritwickdey.LiveServer
code --install-extension dbaeumer.vscode-eslint
code --install-extension formulahendry.auto-rename-tagLive Server / Live Preview
保存即リロードは HTML 学習の体験を激変させます。代表的な選択肢:
| ツール | 使い方 |
|---|---|
| Live Server (VS Code 拡張) | HTML を開いて右下「Go Live」 |
| Live Preview (VS Code 公式) | Microsoft 製の公式拡張。エディタ内プレビュー |
| browser-sync | npm i -g browser-sync → browser-sync start --server |
| Vite | npm create vite → npm run dev で HMR |
| Python http.server | python -m http.server（リロードはなし） |
Emmet（VS Code 標準搭載）
HTML/CSS の省略記法で爆速入力できます。! + Tab で HTML5 のボイラープレートが生成されるのが有名:
入力: !
Tab を押す ↓
↓ 出力:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
------
入力: div.container>ul.menu>li.item*3>a{Item $}
Tab ↓
<div class="container">
<ul class="menu">
<li class="item"><a href="">Item 1</a></li>
<li class="item"><a href="">Item 2</a></li>
<li class="item"><a href="">Item 3</a></li>
</ul>
</div>| Emmet 記号 | 意味 | 例 → 出力 |
|---|---|---|
el.cls | クラス付き要素 | div.box → <div class="box"></div> |
el#id | ID 付き | div#main |
> | 子要素 | ul>li |
+ | 兄弟 | h1+p |
*N | N 回繰返し | li*5 |
$ | 連番 | li.item-$*3 |
{text} | テキスト | p{Hello} |
[attr=value] | 属性 | a[href="/"] |
ブラウザ DevTools（F12）
ブラウザに標準搭載されている開発者ツール。F12 キー（または右クリック → 検証）で開きます。
- Elements: HTML 構造の確認と編集、CSS の調整
- Console: JavaScript の対話実行、エラー確認
- Sources: スクリプトのデバッグ（ブレークポイント）
- Network: 通信ログ、API レスポンス、画像サイズ
- Application: localStorage / Cookie / Service Worker
- Lighthouse: パフォーマンス / アクセシビリティ / SEO 自動監査
- Recorder: ユーザー操作を記録して再生
- デバイスモード: スマホサイズでのプレビュー
静的解析・整形ツール
# Prettier（HTML/CSS/JS 統一フォーマッタ）
npm install --save-dev prettier
echo '{ "tabWidth": 2, "printWidth": 100 }' > .prettierrc
npx prettier --write "**/*.{html,css,js}"
# HTMLHint
npm install --save-dev htmlhint
npx htmlhint "**/*.html"
# Stylelint
npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"
# W3C Validator（公式）
# https://validator.w3.org/ にファイルアップロード or URL 入力
# CLI 版: html-validate
npm install --save-dev html-validate
npx html-validate "**/*.html"JS フレームワーク向けセットアップ（Vite / Webpack）
# Vite（推奨・最速）
npm create vite@latest myapp
cd myapp
npm install
npm run dev # → http://localhost:5173
# テンプレート選択肢:
# vanilla / vanilla-ts / vue / react / svelte / lit / preact / solid
# Webpack（旧来の定番、設定は重い）
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npx webpack serve
# Parcel（ゼロコンフィグ）
npm install --save-dev parcel
npx parcel index.htmlローカルサーバが必要な理由
file:// でファイルを直接開くと、以下が動きません:
- fetch / XHR: CORS エラー / file プロトコル拒否
- ES Modules (
<script type="module">): モジュールスクリプトは file:// で動作不可 - Service Worker: HTTPS or localhost のみ
- WebRTC / MediaStream: HTTPS 必須
- OGP / SNS シェア確認: 公開 URL が必要 → ngrok 等で公開
これらが必要な開発では、必ず Live Server / Vite / browser-sync 等のローカルサーバを使ってください。
ブラウザのインストール
開発用に 複数ブラウザを入れておくのが鉄則:
- Chrome: 開発のメイン（DevTools が最も成熟）
- Firefox: グリッドレイアウト・フォントデバッグツールが優秀
- Safari: iPhone 動作確認に必須（macOS / iPhone）
- Edge: Windows 標準。Chromium ベースなので Chrome とほぼ同等
Git の準備
# Git インストール
# Windows: https://gitforwindows.org/
# macOS: brew install git
# Linux: sudo apt install git
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
# プロジェクト開始
mkdir myapp && cd myapp
git init
echo "node_modules/" > .gitignore
git add . && git commit -m "Initial commit"
# GitHub に push
gh repo create myapp --private --source=. --pushLighthouse でサイト診断
Chrome DevTools の Lighthouse タブで、以下のスコアを自動測定できます:
- Performance: 描画速度・LCP・CLS・FID
- Accessibility: コントラスト・alt 属性・ARIA
- Best Practices: HTTPS・コンソールエラー・モバイル互換
- SEO: title / meta description / viewport / canonical
- PWA: Service Worker / manifest（任意）
FAQ
Q: VS Code と WebStorm、初心者ならどっち？
A: 無料・学習リソース・拡張機能から VS Code 一択。慣れたら WebStorm の強力な静的解析を試すのもアリ。
Q: Atom が EOL になったが代替は？
A: Atom の公式継続版 Pulsar も存在しますが、VS Code 移行が圧倒的多数。Atom 由来の拡張は VS Code Marketplace に多くが移植済。
Q: HTML だけ書くなら Node.js / npm は要らない？
A: 静的 HTML のみなら不要。ただし Prettier / HTMLHint / Live Server CLI / Vite を使うなら Node.js が必要。LTS（18.x or 20.x）を入れておくと損なし。