要領がわかれば簡単！同じ要領で量産！

Silicon Valley Super Ware

2020年5月13日

要領がわかれば簡単！同じ要領で量産！

前回は、「ログインフォーム」と「管理ページ」のデータのやり取りを作って 管理ページの一部を作りました。今日は一気に管理ページを終わらせてしまいましょう！
ログインフォームの場合、管理ページからログインフォームの部品に渡すデータはありません。 ログインのボタンが押された時に、「押されたよ！」というイベントと一緒に入力された E-Mailアドレスとパスワードを管理ページに渡すだけで済みます。
前回は、書き損ねましたが「子」から「親」にデータを渡すには

「this.$emit("EventName", payload)」で渡します！

「EventName」は好きな名前でよくて、この名前を使って親側で受け取ります。 受け取る方は

「@EventName="eventHandler(payload)"」で受け取れます。

「EventName」が子が送る時の名前で、「eventHandler(payload)」がその処理を行うMethodです。 この名前も自由につける事ができます。「payload」が渡すデータです。複数のデータを渡したいときは、 連想配列（JavaScriptオブジェクト）で渡します。

メッセージ一覧の部品

以前の投稿で「メッセージ一覧」を表示する部分は、管理ページに残そうと思いましたが、 管理ページを見やすくするため別の部品に分ける事にしました。
やり取るするデータは、

• 管理ページからメッセージ一覧の部品は、「メッセージの一覧」の配列（array）
• メッセージ一覧から管理ページ（１）：メッセージが選択されたイベントと、選択されたデータ
• メッセージ一覧から管理ページ（２）：削除ボタンがされたイベントと、選択されたデータ

以上の3種類で今回は親から子に送るデータがあります。

親から子に送る場合は「v-bind:messages="messages"」で渡します。

「v-bind:」のすぐ後ろの「messages」がデータに着けるラベルで、実際の値（変数）が サイトの「"」で囲まれた「messages」です。同じ名前を使っていますが、違っていても問題ありません。 受け取る方は「ラベル」に使った名前で受け取ります。
受け取り側は、「props」に受け取った、値を並べて受け取ります。

「props: ["messages"],」という感じです。

お問合せ一覧の方は、この「messages」を受け取って表示します。
「messages」には複数のデータが含まれている場合もあれば、 データが無い場合もあります。データが無い場合には、「データがありません」の ような表示を行うようにします。 これは、「v-if」を使うとできます。

複数のデータの表示はVue.jsの場合「v-for」という機能を使うと簡単にできます。

これに、メッセージを選択できる仕組みと、削除の為のボタンを追加すれば完成です。
メッセージ選択は、「v-on:click="eventHandler(payload)"」で行います。

今回は表を利用しているので、表の「td」要素に、「on:click="messageSelectionEvent(entry.data())"」で行います

お問合せリストのソースコードはこんな感じになります（CSS部分は含まず）

<tempalate>
   <div class="message_list">
      <div v-if="messages.length === 0" class="no_message">
         <h3>お問合せはありません</h3>
      </div>
      <div v-if="messages.length !== 0" class="query_list">
         <h2 class="bullet">お問合せ一覧</h2>
         <table class="table table-sm">
            <thead class="thead-dark">
               <tr>
                   <th>E-Mail</th>
                   <th>氏名</th>
                   <th>日時</th>
                   <th></th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="entry in messages" :key="entry.data().email">
                  <td
                     class="msg"
                     v-on:click="messageSelectionEvent(entry.data())"
                     >{{ entry.data().email }}</td>
                  <td class="msg" v-on:click="messageSelectionEvent(entry.data())">{{ entry.data().name }}</td>
                  <td
                     class="msg"
                     v-on:click="messageSelectionEvent(entry.data())"
                     >{{ entry.data().timestamp.toDate() }}</td>
                  <td>
                     <button
                        v-on:click="messageDeleteEvent(entry.id)"
                        type="button"
                        class="btn btn-danger btn-sm"
                     >削除</button&gt
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
</div>
</template>
<script>
export default {
   name: "MessageList",
   props: ["messages"],
   methods: {
      messageSelectionEvent(entry) {
         this.$emit("MessageSelectionEvent", entry);
      },
      messageDeleteEvent(entryId) {
         this.$emit("MessageDeleteEvent", entryId);
      }
   }
};
</script>

管理ページ側は？

管理ページ側は、この部品を呼び出すだけです。 ただし、イベントの実際の処理は、メッセージページからのイベント情報を受け取って管理ページ側で行うので JavaScriptは少し複雑になります。

<div v-if="login && !selected">
   <MessageList
      @MessageSelectionEvent="messageSelectedEventHandler"
      @MessageDeleteEvent="messageDeleteEventHandler"
      v-bind:messages="messages"
   />
</div>

イベント処理で「messageSelectEventHandler(message)」と「messageDeleteEventHandler(messageId)」を実装する必要があります。
やる事はシンプルで、メッセージが選択された場合は、そのメッセージの内容をメッセージを表示する部品に渡すだけです。
メッセージ一覧と同じで「v-bind」を使って渡します。

もう一つ、表示を切り替えるために「selected」という変数を「data」の部分に作って、「v-if」で表示をコントロールします。
メッセージ一覧を呼び出すところでも使っているので参考にしてください！

削除のイベントは、メッセージを消すだけなので簡単ですよね！
個別のメッセージの表示には、「戻る」ボタンをつけて、これが押されたイベントを管理ページに送ります
このイベント処理で、「selected」の値を基に戻すと、一覧表示に戻るという仕組みです。
これが管理ページの全容です！

全部のソースコードは連載の終了時に、ニュースレター登録者には無料で提供します！

まずは、「ご自分で作る」のがこの連載のポリシーですので、ブログの記事と Google検索でやってみてください。作りながら「課題を解決する」のは 将来のWebサービス制作時のよい練習になります。

来週は？

基本の機能はほぼ出来ましたが、いろいろ最後にやる事があります。
来週はその辺を特集します！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

興味のある方は今すぐお問合せください！

またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

• お問合せ
• Webサイト
• ニュースレターのお申込み

Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.