Vue.js（以下Vue）というと、モダンな開発環境（Node.js + npm + webpack + …）でSPAを開発するフレームワークという認識が普通だと思います。だからなのでしょうか jQuery に慣れ親しんだ、一般的な WEB サイト制作の現場にはあまり入ってきていない印象があります。 Vueは jQuery と同じ様に HTML ファイルから直接読み込んで使うこともできます。なので、もっと気軽に使っていいフレームワークなのではないでしょうか。 Vue を使う利点は沢山ありますが、個人的に最大の利点は、HTML のソースをみればVue側で何をしようとしているかだいたいわかることだと思っています。また、コードを整理して書くように設計され、さらにパーツごとにファイルを分けられたりもするので、後々のメンテナンスも楽だということも気に入っています。 一般的な WEB サイトでも Vue を使わない手はありません。 # CDN版Vueで単一コンポーネント・ファイルを実現する Vueにはコンポーネントという機能があり、例えばヘッダーやフッターなどの使い回す部品を別ファイルに分割して扱うことができます。CDN版Vue では以前[このような方法](https://www.chaordic.co.jp/memorandum/chaordicdesign/36/)でのコンポーネント実現を紹介しました。 しかし、「単一コンポーネント・ファイル」でもっとシンプルにコンポーネントを扱える**「http-vue-loader」**というライブラリを知ったので、その使い方をまとめておきます。 **my-components.vue** 単一コンポーネント・ファイルは、 ＜template＞＜/template＞ ＜script＞＜/script＞ ＜style＞＜/style＞ を同じひとつのファイルに記述することができます。 ＜template＞ ＜div＞ ここに通常通りのHTMLコードを記述していきます。 ただし、必ず一つのタグで閉じられていなければなりません。 もちろんこのような{{プロパティ名}}構文や、 Vueの記法のほとんどが可能です。 ただしリアクティブデータとして使えるのは 自分自身のdataオプションに登録したものと、 親からpropsで受け取った{{属性名}}になります。 ＜/div＞ ＜/template＞ ＜script＞ module.exports = { /* == data == リアクティブ・データ登録 */ data: function(){ return { プロパティ名: "値", } }, /* == props == テンプレートタグの属性を登録 */ props: ['属性名', '……'], } ＜/script＞ ＜style scoped＞ ここに通常通りのCSSコードを記述していきます。 styleタグに「scoped」と指定することで、 このテンプレートの範囲にのみのCSSを適用することができます。 煩雑になる原因だったclassの指定を減らすことができます。 ＜/style＞ **top.js** componentsオプションにコンポーネントを登録します。下記の例では、単一コンポーネント・ファイル**「./my-components.vue」**を読み込んで、**「my-components」**と定義しています。 var app = new Vue({ el: '#app', /* == data == リアクティブなデータを登録 */ data(){ return{ プロパティ名: "値", }; }, /* ==== components ==== */ // -- 単一ファイルコンポーネントの登録 components: { 'my-components': httpVueLoader('./my-components.vue'), }, }); **親.html** 親.htmlでは、まず＜head＞で**vue.js**と**http-vue-loader**を読み込みます。 そして、上記のtop.jsで定義した「my-components」をカスタムタグ**＜my-components＞＜/my-components＞**として記述することで、コンポーネントをレンダリングすることができます。この時、**「:属性名="プロパティ名"」**を付与することで、top.jsに登録したリアクティブデータをコンポーネントに渡すことができます。 top.jsは最後に読み込みます。 ＜head＞ ＜script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"＞＜/script＞ ＜script src="//unpkg.com/http-vue-loader"＞＜/script＞ ＜/head＞ ＜body＞ ＜my-components :属性名="プロパティ名"＞＜/my-components＞ ＜script src="./assets/js/top.js"＞＜/script＞ ＜/body＞ # CDN版vueの雛形 実際に動かしてみたい、ソースをいじって学習したいという方のために、 [「CDN版vueの雛形」のサンプル](https://chaordicorg.github.io/vue2-cdn-template/)をつくってみました。 いきなりVueや生のjavascriptだけで書けと言われても難儀なので、今回はjqueryも使っています。VueはDOM操作をするフレームワークではないので、どうしてもDOM操作が必要な時や、便利で使い慣れたjqueryのライブラリを使いたい場合は、ためらいなく使いましょう。特別な設定の必要なく同居できます。 Vueの最新バージョンは「３」ですが、様々な情報がネットに出揃っているバージョン「２」を使っています。 **【ファイルの構造】** index.html common/ components/ my-header.vue my-footer.vue css/common.css assets/ components/ my-slick.vue my-movies.vue dat/owls.json js/top.js **【各コンポーネントの説明】** **my-header.vue**　[ソース](https://github.com/chaordicorg/vue2-cdn-template/blob/master/common/components/my-header.vue) ヘッダーとメニューのコンポーネントです。タイトルは親からpropsでデータを受け取っています。 **my-footer.vue**　[ソース](https://github.com/chaordicorg/vue2-cdn-template/blob/master/common/components/my-footer.vue) フッターのコンポーネントです。このにはscriptを記述せずにテンプレートとスタイルだけ定義しています。必ずしもscriptは必要ではないことの検証です。 **my-slick.vue**　[ソース](https://github.com/chaordicorg/vue2-cdn-template/blob/master/assets/components/my-slick.vue) jqueryとの共存を確認するため「[slick](https://kenwheeler.github.io/slick/)」というjqueryプラグインを使ってスライダーを実現しています。 また親からpropsで受け取ったデータがリアクティブであることを確認するため、親で監視しているウィンドウ幅をコンソールに出力しています。 **my-movies.vue**　[ソース](https://github.com/chaordicorg/vue2-cdn-template/blob/master/assets/components/my-movies.vue) axiosのAjaxでYouTube動画のidとタイトルが記述された[JSONファイル](https://chaordicorg.github.io/vue2-cdn-template/assets/dat/owls.json)を読み込み、表示させています。 **【ダウンロード】** CDN版vueの雛形（vue2-cdn-template）はGitHubからダウンロードできます。 https://github.com/chaordicorg/vue2-cdn-template