無駄遣いチェックページをコンポーネントで作る

"Vue.js入門基礎から実践アプリケーション開発まで"の3章を読んだので、前回作った無駄遣いチェックページを分解してコンポーネントにし、ページを作り直した。
前回の記事はこれ。
tasotasoso.hatenablog.com

コンポーネントとテンプレートの作成

下図の様にページを2つのコンポーネントで構成する。

f:id:tasotasoso:20190612003447p:plain

コンポーネントの表示内容はテンプレートを使って書いていく。
そうすると、コードは3つの部分に別れる:
・HTML部分
・componentに読み込むテンプレートの宣言
・コンポーネントの宣言

コードの外観としては以下のようになる。
※"$xxx"は自分で好きに名付けてください。

<--!　###ここはHTML###  -->

<div id="$app-id">
  <$component-id></$component-id>
</div>

<script type="text/x-templete" id="$template-id">
  //テンプレートの中身
</script>

<--!  ###ここまでHTML###  -->


//  ###ここからjavascript###

<script>
  Vue.component('$component-id', {
    templete: '#$templete-id'
    //ほかのプロパティ
  })
</script>

//  ###ここまでjavascript###

テンプレートはコンポーネントのプロパティとしても書ける。ただ、HTML内に外出しで書いておくと、コンポーネントの宣言が肥大化を防ぐことができる。

コード

特にコンポーネントの宣言がかなりすっきりと書けた。コンポーネントに読み込むテンプレートを変えることでコンポーネントの修正が容易にできる。また、テンプレートに流し込むdataを変えるだけでコンポーネントの流用がしやすい。

感想

ページをコンポーネントに分解することでVue.jsの箇所がかなり見やすくなった。
一方でコンポーネントの設計を考える必要が出てきた。例えば今回calculate-templateとしてFormと計算結果の表示箇所を一つのコンポーネントとした。
最初は分けようとしたが、Vueの標準の機能だと親子関係にあるコンポーネント同士しかデータのやり取りができない。コードが複雑になってしまう可能性がありそうだった。
この辺りはVuexを使うと解決できるようだったので、引き続きよいコンポーネントの作り方を見ていきたい。