5日目: 各種Vueコンポーネントを作ってみる

最初に作ろうとしているものの説明ページで

週間ランキングと月間ランキングの2つが表示される

と書いた。なのでランキングページの各要素をVueコンポーネントとして作りたい。

本当は危険度ランキングも作るんだが、一旦週間と月間のものに対して必要なコンポーネントだけ考えてみる。

ざっくり以下のような感じのものを考えている。

componentの名前がイケてないのはさておき...

• rank tab componentは見るランキングを切り替えるためのタブが入ったコンポーネント
• rank list componentはランキングにランキインしたユーザーやファイルのリストが入ったコンポーネントで子要素にrank componentが入っている

rank componentは以下のようなイメージ。

• rank componentの中にさらに順位を記載するrankとrank header componentとcomment componentがある。rankはコンポーネントではなくてただの文字列
• rank header componentはユーザーのアバターと名前、何回コメントしたかを記載する
• comment componentにはそのユーザーが書き込んだコメントとどのPRに対してのコメントかを記載する。できればファイル名とファイルの何行目に対するコメントかまで出したい。

componentの名前はイケてないんだけど、何も作らないよりはいいので一回こんな感じで書いてみる。

Tabs.vue

<template>
<div>
  tab component
</div>
</template>

List.vue

<template>
<div>
  <rank></rank>
  <rank></rank>
  <rank></rank>
</div>
</template>

Rank.vue

<template>
<div>
  rank component
  <comment></comment>
</div>
</template>

Comment.vue

<template>
<div>
  comment component
</div>
</template>

app.js

require('./bootstrap');

Vue.component('comment', require('./components/Comment.vue'));
Vue.component('rank', require('./components/Rank.vue'));
Vue.component('list', require('./components/List.vue'));
Vue.component('tabs', require('./components/Tabs.vue'));

const app = new Vue({
    el: '#app'
});

components以下のディレクトリ構造もちゃんと考えたほうがいいが、一旦この状態でgulpを実行。

chrome.google.com

vueコンポーネントがどんなふうに読み込まれるかを見やすくするため上記のchrome拡張を入れて表示してみたのが以下。

ふむ。

作ってみて思ったが、別にタブの部分はわざわざvueにする必要ないし、なんならLaravelのデフォルトになってるヘッダーに各ランキングへのリンクを出していいなと思った。Rank.vueとComment.vueはとりあえずこのままでもいい。
危険度ランキングのことを考えるとRank.vueの中身に書こうとしているヘッダーの要素はユーザーであるのかファイルであるのかで変わってくるので、あえてまだ作らずにいたが、ざっくり構造はこれでいく。

ユーザーが最近書いたコメントは別に1件分でいい気がした。イメージ図では3つ書いてみたけど多すぎるように感じる。

componentの中にcomponentを書いていくのはこんな書き方でいいのだろうか…。これで書けることは確かめられたのでオーソドックスなやり方は調べながら増やしていこうと思う。

というわけで、今日はここまで。