vuejs componentを出し分けよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

componentを出し分けよう

Vue.js|2019年02月07日

2019年02月07日
  • このエントリーをはてなブックマークに追加

もう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つ確認しながら理解してみましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら