まず，HTML
はじめに
この本は，Vue.js を「フレームワーク」としてではなく，HTML の延長線上 にあるものとして紹介します．
いきなり Node.js をインストールしたり，ターミナルで npm create を叩いたりはしません．
必要なのは テキストエディタ と ブラウザ だけです．
なぜなら，Vue.js は Progressive Framework だからです．
"Progressive" とは「段階的に導入できる」という意味です．
静的な HTML にほんの少しの JavaScript を足すだけで，Vue の恩恵を受けることができます．
一枚の HTML を書く
まずは，Vue のことは一旦忘れて，ごく普通の HTML を書きましょう．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 40px auto;
padding: 0 20px;
}
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
}
.card h2 { margin-top: 0; }
.tag {
display: inline-block;
background: #edf2f7;
border-radius: 4px;
padding: 2px 8px;
font-size: 0.85em;
margin-right: 4px;
}
</style>
</head>
<body>
<h1>My Bookshelf</h1>
<p>最近読んだ本の記録です．</p>
<div class="card">
<h2>リーダブルコード</h2>
<p>読みやすいコードを書くための実践的な技法．</p>
<span class="tag">programming</span>
<span class="tag">practices</span>
</div>
<div class="card">
<h2>プログラミング言語の基礎概念</h2>
<p>言語の設計を支える根本的な概念を学ぶ．</p>
<span class="tag">cs</span>
<span class="tag">language</span>
</div>
<div class="card">
<h2>Web ブラウザセキュリティ</h2>
<p>ブラウザに関するセキュリティを体系的に解説．</p>
<span class="tag">security</span>
<span class="tag">browser</span>
</div>
</body>
</html>これを index.html として保存し，ブラウザで開いてみてください．
普通に表示されるはずです．当然です．ただの HTML ですから．
この HTML の課題
このページはちゃんと動きます．しかし，データが増えると辛くなります．
- 本を追加するたびに
.cardをコピペする必要がある - 「programming タグのものだけ表示したい」ができない
- 「タイトルで検索したい」ができない
つまり，静的 なのです．
データとビューが HTML の中に一体化されていて，分離されていません．
次の章では，この HTML に Vue.js を CDN から導入して，まったく同じ見た目のまま，裏側の構造だけを変えていきます．
まとめ
- すべては 一枚の HTML から始められる
- Node.js やビルドツールは（まだ）不要
- 静的な HTML には限界がある — データとビューが分離できない
- Vue.js はこの HTML を壊さずに，少しずつ拡張していく