自動でページの目次を作成する「vue-side-catalog」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-side-catalog.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-side-catalog.umd.min.js"></script>
<div id="app">
  <div id="main">
    <h1>Vue.js WIKI</h1>
    <p><a href="https://ja.wikipedia.org/wiki/Vue.js">出典</a></p>
    <p>
      Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである[4]。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。
    </p>
    <h2>概要</h2>
    <p>このプロジェクトは、Web UI開発（コンポーネント、宣言的UI、ホットリロード、タイムトラベルデバッグなど）において、アイデアをより実現させることに焦点を当てている。独断的ではなく開発者がピックアップしやすい。<br>
      部分的に採用可能なアーキテクチャ（プログレッシブフレームワーク）を採用している。 コアライブラリは、宣言的なレンダリングとコンポーネントの構成に焦点を合わせ、既存のページに埋め込むことができる。 ルーティング、状態管理、ビルドツールなどの複雑なアプリケーションに必要な高度な機能は、正式に維持されているサポートライブラリとパッケージを介して提供される。</p>
    <h2>歴史</h2>
    <p>VueはGoogleにおいてAngularJSを使用した開発に携わったエヴァン・ヨーによって開発され、2014年2月にリリースされた。ヨーは「Angularの本当に好きだった部分を抽出して、余分な概念なしに本当に軽いものを作ることができたらどうだろうか？」と考えていた。<br>
      VueはGitHubでスターの数が、Backbone.js、AngularJS、Angular、jQuery、React等、他の歴史あるライブラリを上回る。</p>
    <h2>特徴</h2>
    <h3>テンプレート</h3>
    <p>HTMLベースのテンプレート構文を使用して、レンダリングされたDOMを基となるインスタンスのデータに宣言的にバインドできる。すべてのVueテンプレートは、モダンブラウザとHTMLパーサによって解析できる有効なHTMLである。 その中で、Vueはテンプレートを仮想DOMレンダー機能にコンパイルする。 リアクティブシステムと組み合わせることで、Vueは最小限の数のコンポーネントを把握して再描画し、アプリの状態が変化したときに最小限のDOM操作を適用することができる。<br>
      Vueでは、テンプレートシンタックスを使用するか、Reactで使用されるJSX[7][8]を使用してレンダリング関数を直接作成するかを選択できる[9]。 これを行うには、テンプレートオプションをレンダリング関数に置き換える必要がある。レンダリング機能は、強力なコンポーネントベースのパターンを可能とする。例えば、新しいトランジションシステムは完全にコンポーネントベースで、レンダリング機能を内部的に使用する。</p>
    <h3>リアクティブ</h3>
    <p>Vueの最も特徴的な機能の1つは、目立たないリアクティブシステムである。 モデルは単純なJavaScriptオブジェクトである。それらが変更されるとViewが更新される。 状態管理は非常に容易で直感的である。 Vueは何もすることなく、最適な再レンダリングを提供する。 各コンポーネントは、レンダリング中にそのリアクティブ依存性を追跡しているため、システムはいつ再レンダリングするか、どのコンポーネントを再レンダリングするかを正確に認識している。</p>
    <h3>コンポーネント</h3>
    <p>コンポーネントは、Vueの最も強力な機能の1つである。...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h1, h2, h3, h4{
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}
h1 {
  font-size:150%;
}
h2 {
  font-size:130%;
}
h3 {
  font-size:115%;
}

#main {
  width: 500px;
  overflow: auto;
  padding: 20px;
  line-height: 1.5;
  border: 1px solid;
}
.side-catalog {
  position: fixed;
  top: 40px;
  right: 0px;
}

Vue

const SideCatalog = window['vue-side-catalog'].default;

new Vue({
  el: '#app',
  components: {
    'side-catalog':SideCatalog
  },
  data: {
    catalogProps:{
        containerElementSelector: '#main',
        openDomWatch: true,
    }
  }
});