はじめに

この本は，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を壊さずに，少しずつ拡張していく