データの流れを事前にチェック！
Silicon Valley Super Ware
2020年5月26日
データの流れを事前にチェック！
今日も、Vue.jsを使った「お問合せフォーム」のWebサービスのまとめの続きです。良く使う機能の部品化を進めるためには、UI（ユーザーインターフェース）と データ処理を出来るだけきれいに分ける事が大切です。
今日はUIとデータ処理の「分離」のコツをまとめてみました
「データマップ」の作成がポイントです！
効果的な方法は、「ページマップ」と「データマップ」を最初に作る事です！ページマップとは？
最初に作るのがページマップです。これは、Webサービスのページ構成がどうなっているかを 図式化した物です。Webサービスと言っても、作り方はWebサイトのデザインに近いものがあります。 Webサイトの作成で良く行わえるように、実際にサイトのコーディングをする前に サイトのレイアウトの概要を作るのが普通ですが、Webサービスでも同じ作業が必要です。
実際に仕事でWebサービスを作る場合、Webサイトのデザインと一緒でその構成やイメージを お客様に提示して方向性を決めるのが普通なので、特別な作業というわけではありません。 今回の「お問合せフォーム」のWebサービスのように、「練習」で作る場合は、自分がわかれば よいので、手書きのラフなスケッチでも良いと思いますが、将来仕事で使う場合の練習だと 考えれば、お客様に見せられる形で作った方が練習になります。
良く使われているのがアドビのXDとかフォトショップで提供する場合が多いようです。
Webサービスの場合は画面がどのように切り替わるかを図式化します。
Webサービスは、基本的にアプリですから、利用者の操作、「ボタンのクリック」「メニューなどの選択」 などで、画面が切り替わっていきます。画面やデータの表示が切り替わるための操作や条件を 「イベント」と良く呼びますが、このイベントを決めて画面の移り変わりを矢印で結んでいきます。お問合せフォームのWebサービスの場合は余り複雑ではないので簡単です。
- 利用者がメニューからページを選択する（メニューのクリック）
- お問合せ内容の送信（送信ボタンのクリック）
- 管理者のページの選択（URLの入力）
- 管理者のログイン操作（ログインボタンのクリック）
- メッセージ一覧の表示（ログイン成功後、戻るボタンのクリックの後）
- メッセージの選択（メッセージのクリック）
- 個別メッセージの表示（メッセージの選択後）
- 個別メッセ―区から一覧に戻る（戻るボタンのクリック）
- メッセージの削除（削除ボタンのクリック）
もう一つは、各ページは幾つかの部品から構成されるので、 どのページ（表示）で使われている部品はなにかもこのページ表示の中に きちんと入れる事です。
データマップとは？
データマップは各ページ、各部品でデータをどのように使うかと どのようなデータ受け渡しがあるかを先ほどのページマップに追加したものです。ポイントは、そのページ、部品で使うデータと、データの流れです。 どのページがどのページにデータを渡すかという流れです。
例えば、お問合せフォームのページは、入力されたデータがページの フォームにあります。送信ボタンが押されたら、このデータを取り込んで データベースに送るという処理になります。
ここで考えるのが「どの部品」がデータベースに送るかです！
例えばフォームが送る場合、別のWebサービスで使う場合はこの 送る部分は多くの場合書き換える必要があります一方で、フォームを部品として使って、フォームを使っている部品（ページ）が 送るようにした場合、フォーム自体は「親」に取り込んだデータを渡すという 機能にすれば、フォームを変更しないで別のWebサービスに使えます。
この場合、フォームの部品がする事は、ボタンが押されたイベントの通知と、 取り込んだデータを渡す事です。このイベントとデータを受け取ったページ（部品）が データをデータベースに送る処理をすると、部品化が効率よくできます。 今回はお問合せフォームの処理は非常に少ないため敢えて処理は分けませんでした。
ログインのフォームにも同じような事が言えます。 ログインのフォームでログインの処理をしないで、親のページ（部品）に ログインのイベントと取り込んだデータを送れば、ログインのフォームは いろいろなWebサービスで変更なしで使えます。 特に今回は管理ページのデータ処理を管理ページにまとめる事で、 他のページの作りを簡単にしてみました。
データマップがあると作業がやりやすくなる！
このデータマップが出来ると、どれくらい複雑なデータの処理や データの受け渡しがあるかがわかります。また、どの部品を部品化できるかも分かり易くなります。
データの流れが複雑な場合はデータは一元管理する！
同じデータを複数のいろいろなページや部品で使う場合は データを受け渡すのが面倒になりますし、各部品やページで 独自にデータを取得したりすると、データの一貫性が取れなくなったりします。一元管理しないで、実現する事は殆どの場合で可能だと思いますが、 プログラムが複雑になって、実装に時間もかかりますし「バグ」を 作りやすくなります。その場合は最初から一元管理する方針で作る方が 開発も早いですし、分かり易く管理しやすいプログラムにする事ができます。 今回は一元管理をしていませんが、主な処理を管理ページに集約する事で データの流れをシンプルにしました。
今回は利用しませんでしたが「VUEX」など、データを一元管理するための プラグインなどは上手く使うとこのUIとデータ処理の分離に大きく役立てる 事ができます。 大切なのはいかにバランス良い構成を作れるかがカギです！
はまならいコツは？
データマップを最初に作ると、開発で「はまる」可能性を小さくできます。単純に見えるお問合せフォームでも意外にデータの受け渡しはあるものです。 最初に全体像をつかめるとWebサービスの設計は簡単にできるものです。
すぐに、開発にかかりたいという所もあると思いますが、最初にこの ページマップとデータマップを作るとWebサービスの制作効率も 品質も大きくアップします！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿