【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
  • 2019.12.01に公開
  • 2020.01.05に更新
  • SPA開発
  • 8. ログイン周りのレイアウト設計
  • No.3 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

【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フラグを用意する

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

さて、次回は?

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

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

それではまた。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。