アプリを高速に構築できます。コンポーネントが使えるというメリットがあります。パーツをコンポーネントとして切り出すことで実装をシンプルにし、また再利用性を高めることができます。これまで、Nuxt.jsのPWAwithTypeScriptとして、ベースとなるアプリを作ってきました。コンポーネント」を使い実装をシンプルにしたいと思います。本記事の開発環境は以下となります。追加した絵文字ボタンに関連するコードです。絵文字に応じたtadaなどの文字列が異なるだけで、ほぼ同じコードの繰り返しとなっています。コンポーネント化して、再利用可能な絵文字ボタン・コンポーネントにします。ボタン1つとして表現される/components/EmojiButton.vueを作ります。ボタン1つ分なので<a>タグが1つ、汎用的なメソッド名、変数名にします。}として受け取るようにします。ハードコードしていた絵文字ボタンをコンポーネントの利用に変更します。v-forの繰り返しで作ります。古いハードコードしていた絵文字ボタンのコードは削除します。}})</script>これにより絵文字ボタンがコンポーネント化され、再利用可能なボタンとなりました。それぞれのボタンに絵文字が表示され、クリックするとクリックされたボタンのカウンターが増えます。似たようなコードがなくなりスッキリしました。子コンポーネントから、親コンポーネントにイベントを送る絵文字ボタンのコンポーネントはできましたが、トータルのカウンターは機能しなくなりました。コンポーネントを回転する機能がありましたが、現在は回転しません。すべての情報があったのでボタン・クリック数の合計をロゴ・コンポーネントに送れました。各カウンターが絵文字ボタン・コンポーネントへ移動してしまったため、カウンターの合計がページ側では作れなくなりました。そこで、絵文字ボタン・コンポーネント(子コンポーネント)はクリックされたことを、ページ(親コンポーネント)へ伝えるようにします。ページ側では、その各絵文字ボタン・コンポーネントから伝えられたクリックの回数をカウントして合計としてロゴ・コンポーネントへ送るようにします。そのクリックされたことを伝えるために「イベント」を使います。絵文字ボタン・コンポーネント(子コンポーネント)から、ページ(親コンポーネント)へ「イベント通知」をすることで、クリックされたことを伝えます。絵文字ボタン・コンポーネントのカウントアップ処理にイベント通知this.$emit('countup')を追加します。コンポーネント間でイベントを通知するための仕組みです。今回は絵文字ボタン・コンポーネントが子コンポーネントなので、親コンポーネントであるページへイベントを通知します。[...引数])の書式です。引数は可変長配列で、イベントの通知先へ渡されます。今回はcountupという名前のイベント名で引数無しの通知を行っています。親コンポーネントであるページ側で、子コンポーネントである絵文字ボタン・コンポーネントからのイベント通知を受け取ります。}})</script><emoji-button>タグにv-on:countup="add"属性を追加し、絵文字ボタン・コンポーネントのcountupイベントを受け取ります。属性値addは、メソッド呼出しでadd()メソッドを呼び出すという定義です。これにより子コンポーネントのイベントを受け取って、親コンポーネントで処理をするという形が作れます。上記定義で呼び出されるメソッドを<script>に追加します。これは通常のメソッド定義と同様です。}をインクリメントするメソッドとします。これにより各絵文字ボタン・コンポーネントがクリックされると、ページ側にcountupイベントが伝わります。そのイベントの回数をtotalにインクリメントしていくことで、全絵文字ボタン・コンポーネントのカウンター合計が作れます。}につなぐことで、これまで機能していたロゴの回転が復旧します。ボタンは絵文字ボタンと異なり1つだけですし、すべての絵文字ボタン・コンポーネントのカウンターをリセットする特別な役割があります。そのため親コンポーネントに残しました。ボタンの機能であるリセットですが、親コンポーネント内のtotalを0にリセットすることはできます。それによりロゴの回転を止めて、カウンターのリセットもできます。子コンポーネントのカウンターは直接リセットできません。こちらもイベント通知を使いリセットします。先ほどと逆なり、親コンポーネントから子コンポーネントへイベントを通知します。親コンポーネント「ページ」を修正ページ側はイベントを通知する先の子コンポーネントである、全絵文字ボタン・コンポーネントを特定してイベント通知します。今回は絵文字ボタン・コンポーネントしかないので(正確には、ロゴ・コンポーネントも子コンポーネントですが)、送り先を意識しにくいですが多数のコンポーネントを抱えている親コンポーネントであるからこそ、どのコンポーネントへイベント通知するか考える必要があります。}})</script><emoji-button>タグのref="EmojiButtons"属性は、EmojiButtonsの文字列でタグを参照されるための設定です。コンポーネント・タグのどちらにも使用できます。属性の値]で行います。今回はEmojiButtonsで登録したので$refs.EmojiButtonsでアクセスします。clear()メソッドではEmojiButtonsで登録された全絵文字ボタン・コンポーネントを取得し、$emit('clear')でclearというイベント名で引数無しの通知を送っています。$emit()の使い方は、子コンポーネントからイベントを送った時と同じです。clearイベントの通知を受けます。コンポーネントのライフサイクルcreatedで、$onを使い、イベント受け取りの登録をしておきます。今回は、イベント名clearで引数無しです。イベントを受けたらコンポーネント内のcounterをリセットします。これにより、各絵文字ボタン・コンポーネントのカウンターがクリアできます。ホスティングもしました。動作している状態を確認する場合は、こちらへアクセスしてください。(公開サイトは1つのため記事公開に合わせて変わり、本記事の内容とは異なることがあります)似たようなコードをコンポーネント化し再利用できるようにしました。コンポーネントを使うことで、画面内のコードもスッキリさせることができます。ソースはサンプル用とはいえ心苦しかった)一方でコンポーネント間の連携は意外と難しいところがあります。親子間のイベント通知が基本です。今回のサンプルは、スタータープロジェクトにボタンを付けたり、ロゴを回したりと地味な感じではありますが、2種類の子コンポーネント間を親コンポーネントがつなぐ形となっています。コンポーネント間連携の基本なので、実装を確認いただければと思います。2017Riotz.works投稿や発言は私的なものであり、所属する企業や組織には関係ありません。HomeSlides。