もう1歩踏み込んだcomponentの使い方を試してみましょう。
WEBサイトやUIを作っていると、よく「タブ」に出会います。
クリックすると、一定エリアの表示が変わるボタンのようなものですね。
Vue.jsを使うと、こうした動作もすぐ出来てしまいます。
何かを表示させるだけがVue.jsではありません。
あくまでも基本はJavaScriptです。
動きをつけたり、表示を切り替えたり。
あとでご説明しますが、アニメーションだって扱えます。
JavaScriptで出来ることは大体できます。
しかも、管理や運用がしやすいように作ることが出来ます。
リアクティブに動いてくれるので、何か余分なソースを書く必要もありません。
では、さっそくタブを使って表示エリアの切り替えを行ってみましょう。
今回のミッション
基本的な概念としては、そんなに難しくありません。
まずcomponentを2つ作ります。
あとはcomponentをクリックしたタブに合わせて切り替えます。
百聞は一見にしかずということで、一度サンプルを見てみましょう。
ソースコードの解説を参考に、上記を再現してみてください。
一通りソースコードを読んで理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいです。
どうしても動かなければ、下記からファイルをダウンロードしてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。
なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。
ソースコードの解説
まずは、下記ソースコードに目を通してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。
<div id="app">
<!--ボタンをクリックすると、現在のタブのidがcurrentTabに入ります(v-on:click)-->
<!--するとscript内のdataにあるcurrentTabの中がidに切り替わります-->
<!--その変化を検知して、算出プロパティ(computed)が動きます-->
<!--現在のcurrentTabを取得してtab-(currentTab)という形に繋げ、コンポーネント呼び出します。-->
<!--v-bind:classはcurrentTabがtab.idと一緒だったらcompTabButton-activeが追加されるという意味です-->
<button v-for="(tab,index) in tabs" v-bind:key="tab.id" class="compTabButton" v-bind:class="{ 'compTabButton-active': tab.id === currentTab }" v-on:click="currentTab = tab.id">
<!--v-forでタブ一覧を表示させています-->
<span v-bind:class="tab.id">{{ tab.text }}</span>
</button>
<!--currentTabComponentに返されたtab-のテキストから適応するcomponentを判断します-->
<!---script内componentのtab-homeなど、文字列が一致したcomponentが適応されます->
<!--結果、中のコンテンツが切り替わるという流れです-->
<component v-bind:is="currentTabComponent" class="app-tab"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('tab-home', { template: '<div>ホームのコンポーネントです。</div>' })
Vue.component('tab-posts', { template: '<div>投稿のコンポーネントです。</div>' })
Vue.component('tab-archive', { template: '<div>一覧のコンポーネントです。</div>' })
new Vue({
el: '#app',
data: {
currentTab: 'home',
tabs: [
{id:'home',text:"ホーム"},
{id:'posts',text:"投稿"},
{id:'archive',text:"一覧"}
]
},
computed: {
currentTabComponent: function () {
//currentTabComponentにtab-(currentTab)の文字列を繋げ呼び出します。
return 'tab-' + this.currentTab;
}
}
})
</script>
.compTabButton {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.compTabButton:hover {
background: #e0e0e0;
}
.compTabButton-active {
background: #e0e0e0;
}
.app-tab {
border: 1px solid #ccc;
padding: 10px;
}
なんとなく、流れはお分かり頂けたでしょうか。
ポイントは「処理の流れ」をしっかり把握することです。
クリックされてから、どのように処理が走るのか、順番通りに理解しましょう。
- ボタンを押すと、dataにあるcurrentTabが変わる。
- currentTabの変化を検知して算出プロパティが起動。
- 押したタブ内のidを取得し「tab-」という文字列とくっつける。
- 出来た文字列(例 : tab-home)と同じ名前を持つcomponentを表示させる。
上記の流れを反芻して、意味をしっかり理解しましょう。
また、タブそのものもhtml直書きではなくv-forを使って表示しています。
最初は概念を認識するのが、難しいかもしれません。
何度も繰り返せば理解できますので、向き合ってみてください。
1つ1つ確認しながら理解してみましょう。