vuejs componentを使ってみよう
» STARTOUT詳細はこちら

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

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

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

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

componentを使ってみよう

Vue.js|2019年02月07日

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

componentとは簡単に言うと、テンプレート機能です。
Vue.jsからデータを表示するとき、ある一定のテンプレートを適応して表示できます。

例えばユーザーデータとコンテンツ、2つのリストを持っていたとします。
そして「どのようなデザイン」で出力するか考えたとしましょう。
結果的に3つのデザイン案が生まれ、両方に試したいとします。

通常、デザインを試すためには、それぞれコーディングしなければなりません。
デザインを変える度に、わざわざコーディングする必要があります。

しかし、componentを使えばデータに対してテンプレートを適応するだけです。
例えば、3つのデザインテンプレートを作って、データだけ変える、ということが出来ます。

個別にコーディングする必要がありません。
すぐ新しいデザインを適応できます。

管理や表示上の利便性を、向上させることができるのです。

今回は、component機能の習得を進めていきます。
細かいパーツにおけるデザイン管理も楽になりますので、ぜひ試してみましょう。

今回のミッション

まず、1つデータを用意します。
そのデータをcomponentでデザインを適応して出力してみましょう。

ソースコードの解説を参考に、下記を再現してみてください。
一通り解説でソースコードを理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいかと思います。

どうしても動かなければ、下記からファイルをダウンロードしてみてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。

なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。

ソースコードの解説

まずは、下記ソースコードに目を透してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。

<div id="app" class="articleArea">
    <!-- componentを使うと、datas-joblistというようなタグを作ることができます -->
    <!-- datas-joblistにはテンプレートが設定されており、テンプレートを使ってjoblistのデータが出力されます -->
    <!-- datas-joblistという名前は自由に設定できます(Vue.componentとあっていれば) -->
    <!-- このタグはv-forでループされています -->
    <datas-joblist v-for="list in joblist" v-bind:todo="list" v-bind:key="list.id"></datas-joblist>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//コンポーネントを使って、新しいタグを作り出しています。
    Vue.component('datas-joblist', {
        //propsにtodoを設定します。templateでデータ出力時に使うタグを設定します。
        //todoはhtmlのv-bindを通し、今回の場合「list」を出力する器となっています。
        //ここで設定したテンプレに応じてv-bind:todoで設定したデータが出力されます。
        props: ['todo'],
        template: '<article><h2>{{ todo.title }}</h2>{{ todo.text }}</article>'
    })
         
    //以下は前回もやったforと一緒の仕組を使っています。
    var app = new Vue({
        el: '#app',
        data: {
            joblist: [
                { id: 0, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' },
                { id: 1, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' },
                { id: 2, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' }
            ]
        }
    })
</script>
.articleArea{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
}
.articleArea article{
    border:1px solid #c2c2c2;
    padding:20px;
    box-sizing: border-box;
    margin-bottom:20px;
}
.articleArea h2{
    border-bottom:1px solid #c2c2c2;
    padding-bottom:15px;
    margin-bottom:15px;
}

なんとなく、流れはお分かり頂けたでしょうか。

ポイントはcomponent ( テンプレート ) とデータが完全に分かれていることです。
データとテンプレートを別々に作り、HTMLで出力する際に融合させます。

これで完全にデータとデザインを切り分けて管理できます。
従来のように、データ出力の度にソースコードを書く必要がありません。

管理と利便性の面から見ても、大きく向上します。

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

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

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

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

ウエヤマ ショウタ

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

ウエヤマ ショウタ

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

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

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

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

 詳しくはこちら