【Vue.js】コンポーネント事始め（グローバル登録とローカル登録）

Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携でしたが、今回からコンポーネント。コンポーネントって部品を一まとめにする機能ですが、独自のタグ名を命名できます。これを見かけるとJSフレームワーク感が高まるんですがw、いよいよ自分でも実際に触って体験してみます。それではいきましょう！

【目次】

コンポーネントとは
類似する方法（WordPress、jQueryなど）
コンポーネントの基本
- グローバル登録
- ローカル登録
最後に

※前回：【Vue.js】localStorageと連携したTodoリストを読み解く（JS編-3） - クモのようにコツコツと

コンポーネントとは

公式サイトによると…

コンポーネントは名前付きの再利用可能な Vue インスタンスです。

ふむふむ。これまではマスタッシュタグ{{ }}とかVue属性v-hogeなんかでHTMLと連携していたけど、それが名前付きのタグになるわけだな。

コンポーネントの編成
アプリケーションがネストされたコンポーネントのツリーに編成されるのは一般的です:
例えば、ヘッダー、サイドバー、およびコンテンツ領域のコンポーネントがあり、それぞれには一般的にナビゲーションリンク、ブログ投稿などの他のコンポーネントが含まれています。

※参考：コンポーネントの基本 — Vue.js

この図はわかりやすいな。フッターヘッターなんてまさに再利用したい代表例だ。

類似する方法（WordPress、jQueryなど）

共通化したパーツを使い回す方法は他でもある。

WordPressのインクルードタグ

身近なのはWordPressのインクルードタグ

<?php get_header(); ?>

これを貼った場所にヘッダー（header.php）がインクルードされて表示される。

※参考：ざっくりWordPress：PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと

header.phpにはhead要素の閉じタグに下記のコードを書く。

<!--header.php-->
<?php wp_head(); ?>
</head>

※参考：ざっくりWordPress：PHP書式とテンプレートタグの識別-後編 - クモのようにコツコツと

jQueryの$.ajax

JSでもjQueryを使ったインクルード方法はよく使う。CMSじゃない静的なコーポレートサイトのヘッダーフッターとかで。

ヘッダーを表示したい場所に下記のscriptタグを書く。

<script>header();</script>

JSは$.ajaxを使う。

function header(rootDir){
    $.ajax({
        url: rootDir + "header.html", // 読み込むHTMLファイル
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); //header.htmlの{$root}を置換
            document.write(html);
        }
    });
}

url:キーでheader.htmlを読み込んでいる。下記の記事にいつもお世話になっています！

※参考：Javascriptで簡単に更新！ヘッダーやフッターなどの共通部分を簡単に更新する方法！ - Qiita

Ajaxは以前こちらの記事でも触れたように、ページの一部分に外部ファイルを非同期通信で読み込むこと。ページ全体のリロードが不要でパフォーマンスが向上する。

※参考：【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む - クモのようにコツコツと

その他

他にも共通化の方法はいろいろある。ネイティブなPHPやJSを使う方法、SSI、Node、Rubyを使う方法など。詳細はこちら。

※参考：更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer｜web制作に関するネタの引き出しサイト

コンポーネントの基本

Vue.jsのコンポーネントのグローバル登録とローカル登録がある。

グローバル登録

下記サンプルの「こにゃにゃちわ、コンポーネント」の部分がコンポーネントで読み込まれた部分。

See the Pen Vue components 1 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

<div id="test">
  <h1>グローバル登録</h1>
  <p>成功すればここにコンポーネントが表示されるわけさ↓</p>
  <test-component></test-component>
</div>

「こにゃにゃちわ〜」が表示されている場所がコンポーネント名test-componentという独自タグになっているのがわかると思う。

JSコード

Vue.component('test-component', {
  template: '<p>「こにゃにゃちわ、コンポーネント」</p>'
})

new Vue({
  el: '#test' 
})

Vue.component()でコンポーネントをグローバル登録。第1引数はコンポーネント名、第二引数は連想配列
templateキーの値はpタグ（こにゃにゃちわ〜）
Vueインスタンス作成
elオプションで#testタグと紐付け

コンポーネントはグローバルな場所で登録されており、HTML上のコンポーネント名test-componentタグと紐づいている。
一方、Vueインスタンスは#testとは紐づいているが、コンポーネントとは紐づいていない。

公式サイトによると、グローバル登録はあまり使われないらしい。

多くの場合、グローバル登録は理想的ではありません。例えば Webpack のようなビルドシステムを利用しているときに、グローバルに登録した全てのコンポーネントは、たとえ使用しなくなっても、依然として最終ビルドに含まれてしまうことでしょう。これは、ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまいます。

※参考：コンポーネントの登録 — Vue.js

一般的に使われるのは下記の「ローカル登録」になる。

ローカル登録

ローカル登録で読み込んだコンポーネント。

See the Pen Vue components 2 by イイダリョウ (@i_ryo) on CodePen.

見た目は同じ。

HTMLコード

<div id="test">
  <h1>ローカル登録</h1>
  <p>成功すればここにコンポーネントが表示されるわけさ↓</p>
  <test-component></test-component>
</div>

HTMLコードも変わらない。コンポーネント名test-componentが同じ場所にある。

JSコード

var testComponent = {
  template: '<p>「こにゃにゃちわ、コンポーネント」</p>'
}

new Vue({
  el: '#test',
  components: {
    'test-component': testComponent
  }
})

変数testComponentの値は連想配列
templateキーの値はpタグ（こにゃにゃちわ〜）
Vueインスタンス作成
elオプションで#testタグと紐付け
componentsオプションでtestComponentを読み込む

変数testComponentの値はグローバル登録のVue.component()の第2引数と同一。
Vueインスタンスは#testともコンポーネントとも紐づいており、コンポーネントの中身だけが外部の変数testComponentにある。

この方法だとコンポーネントはVueインスタンスが作成されるときだけ読み込まれる。

最後に

f:id:idr_zz:20190814061814j:plain

今回はハローワールド的な内容でしたが、コンポーネントのはじめの一歩を踏みしめました。Vueの他の機能と連携してどんなことができるのか、引き続き試していきたく。いや〜共通パーツって本当に便利ですよね。それではまた、サヨナラ、サヨナラ。

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com