SPA開発 8. ログイン周りのレイアウト設計 #03
2020年01月05日に更新

【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】

【2019/12/07追記】この記事の内容について訂正とお詫び

この記事内でバリデーションが不要なページがあると書きましたが、最低限のバリデーションは必要と判断しました。

最低限のバリデーションは具体的には以下のとおりです。

  • 入力必須
  • メールアドレスの書式に「@」、「.」があるか

理由は2つあります。

  1. 無駄なAPI通信を発生させないため。
  2. バリデーションを設定した方が、送信ボタンクリックの有効、無効を切り替えるdisabledフラグを簡単に切り替えられるため。(Vuetifyのv-formの仕組み)

実際、バリデーションが無いアプリも存在しますが、筆者に至っては上記のように判断いたしました。

既にこの記事を読まれた方には、大変申し訳ありませんでした。ここに訂正しお詫び申し上げます。

なお、記事の内容については打ち消し線により訂正済みです。

今回達成すること

今回はログイン周りで利用する、入力フォームのコンポーネント設計を行います。

会員登録ページを作成する前に設計をしておくことで、何がどこに必要か明確になり、スムーズな実装が行えます。

入力フォーム コンポーネント設計の全体像

2019-11-30 11-01-09

会員登録ページの入力フォームは切り分ける

会員登録ページには、メールフォーム、パスワードフォームを使用します。

これは他ページでも使い回しますので、コンポーネントとして切り分けます。

  • emaiForm.vue
  • passwordForm.vue

2019-11-30 14-32-57-1

それぞれの役割について整理する

それぞれの役割について整理しておきます。

2019-11-30 14-32-57

1. コンポーネントの役割

コンポーネントにはユーザーが入力するテキストフォームを用意します。

フロントサイドのバリデーションもここで実装します。

2. 会員登録ページの役割

会員登録ページ(signup.vue)でメール、パスワードの入力値をRailsに送信します。

つまりメール、パスワードのデータはここで持っておく必要があります。

3. Rails(サーバーサイド)

会員登録ページから送信されたメールとパスワードを使ってユーザーを作成し、データベースに保存します。

作成したユーザーはNuxt.js(フロントサイド)に返します。

ログイン周りで入力フォームを利用するページは4つ

メール、パスワードの2つのフォームは、ログイン周りの4つのページで使い回します。

  1. 会員登録ページ
  2. ログインページ
  3. パスワードリセットページ
  4. 新規パスワード登録ページ

それぞれのページには、バリデーションをかけるページ、かけないページが存在します。

最低限のバリデーションは必要と判断し、訂正いたしました。

ページ URL 必要なフォーム バリデーション
会員登録 /signup email, password 必要
ログイン /login email, password 不要 必要
パスワードリセット /password/reset email 不要 必要
新規パスワード登録 /password/new password 必要

そこで、コンポーネントにvalidationというフラグを用意してバリデーションの有無を切り替えます。

このvalidationフラグは、最低限のバリデーションと通常のバリデーションを切り替えるために今後の実装で必要とします。

まとめ

  • コンポーネントはメール、パスワードの2つを用意する
    1. emailForm.vue
    2. passwordForm.vue
  • フォームコンポーネント内でフロント側のバリデーションを実装する
  • Rails(サーバーサイド)に送信するページでemailpasswordのデータを持つ。
  • 作成したコンポーネントは4つのページで利用する
    1. 会員登録ページ
    2. ログインページ
    3. パスワードリセットページ
    4. 新規パスワード登録ページ
  • バリデーションを切り替えるvalidationフラグを用意する

以上がログイン周りのフォームコンポーネント設計となります。

さて、次回は?

次回は上記の設計にそって実装を行います。

まずは会員登録ページを完成させましょう。

それではまた。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
SPA開発
今日のTweet
スポンサー広告