Vue.jsのモジュール間のデータのやり取り

Silicon Valley Super Ware

2020年5月13日

Vue.jsのモジュール間のデータのやり取り

フレームワーク（ライブラリ）を利用する大きなメリットは「部品化」です。 良く利用する機能を部品として作成する事で、将来同じような機能が必要になった場合に 再利用するというわけです。
Webサービスの制作を繰り返す事で、よく使う部品の数が増えていきます。 それによって、毎回最初から作らなくても共通する部分は流用しながら作れるようになります。

制作するたびに「資産」が増えて効率アップできる！

今日はその例として、ログインフォームを取り上げます。
Webサービスを作る場合、限定した人のみがアクセスできるページを作る事はとても多くなります。 つまり、ログインフォームは使いまわしがきく「部品」の良い例です。

管理ページにログイン機能が必要！

お問合せ内容には、名前やE-Mailのアドレスなどの個人情報が含まれます。 従って、誰でも見られるという実装には問題がある場合が多くなります。 そこで、管理者のみが閲覧できるように、ログインしてお問合せのメッセージを 見る仕組みが必要になります。

そこで管理ページにアクセスするためのログインフォームを作ります！

ログインした後は、メッセージの一覧に画面を切り替えるような仕組みを実装します。
今日はその、ログイン部分を作ります。
ログインに必要な情報は今回は

• E-Mailアドレス
• パスワード

です。今回は、Firebaseの認証機能を利用してこのログインの機能を作ります。

共通化が出来そうな部分は、「E-Mailアドレス」と「パスワード」の入力を行うフォームです。

これを将来、再利用できるように、別のVUEファイルで記述して別のWebサービスの制作の際にも 再利用することを目指します。

部品化で注意する事！

部品化を進める上で注意する事が幾つかあります。
例えば、ログインフォームの場合、どのようにユーザーのログイン処理（認証）を 行うかは、制作するWebサービスによって違う場合が多くなります。

こうした、あるWebサービス特有の部分はなるべく部品の中には入れないようにする

これができないと、毎回ログイン処理の部分は書き換える必要が出てきてしまうからです。 なるべく部品は手を加えずにそのまま使える方が便利です。
もう一つは、「部品」が持っているデータを誰が使うかという事です。
今回の場合、ログインフォームが持っているデータは、

• 入力されたE-Mailアドレス
• 入力されたパスワード
• ログインの処理の要求（ボタンが押されたという情報）

になります。全ての情報はこのログインフォームにあるので、一番簡単なのはこのフォームで処理してしまう方法です。

実はこの制作だけを考えてしまえば、この方法が一番簡単でシンプルです！

しかし、将来の再利用を考えると分けて作っておいた方が便利です。そう考えると、実際の処理は 管理ページ側でやった方が良い事になります。 実際にログインしたかどうか知りたいのは「管理ページ」ですし、ログインの処理をログインフォームから 分ける事が出来た方が「部品化」という観点では都合が良いからです。

「管理ページ」と「ログインフォーム」のやり取り

今回の「管理ページ」と「ログインフォーム」の関係は、 管理ページに「ログインフォーム」を部品として張り付けるというイメージです。

階層は、「管理ページ側」が「親」、「ログインフォーム側」が子という関係になります。

今回は、親から子に渡すデータはありません。
必要なのは、ログインフォームの「ログインボタンが押されたという情報」と「入力されたデータ」です。
このデータのやり取りの作り方は、「React」と「Vue.js」では少し違ってきます。

Reactは子から親にデータを渡せない！

従って、Reactの場合は、親の管理ページで作った関数を子に渡して、ログインのボタンが押された場合は、 親の関数を呼び出すという方法をとります。呼び出された親の関数は、個のフォームから入力された情報を 読み取るという流れで処理されます。

Vue.jsの場合は、子から親にデータやイベントを渡す機能があるのでそれを使います。 「ボタンが押されたよ！」というイベントと一緒に読み取ったデータを親に送る事ができます。

管理ページがやる事

管理ページでは、ログインフォームから送られてきた「E-Mailアドレス」と「パスワード」を 使ってログイン処理を行います。

ログインが成功したら、表示のページを切り替えます！

今回の「お問合せフォーム」のWebサービスの場合は、お問合せメッセージの一覧を表示します。

一覧から見たいメッセージを選んで表示したり、不要になったお問合せを削除する機能を実装します。

画面を切り替えたり、選択したメッセージの中身を表示したり、削除したりする機能が必要になります。 今回のWebサービスでは中心的な「プログラム」になります。

明日は機能を完成させます！

ログインの後のメッセージの一覧表示をして、選択した個別のメッセージを表示する機能。 最後に不要になったメッセージの削除までを行います。
管理ページがそうした機能の統括をするようなイメージで作ります！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

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

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

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

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