ページ遷移する新規登録機能にはJavascriptを採用した話

f:id:ryoutaku_jo:20190201205552p:plain

【結論】
・ページ遷移しながら入力フォームを埋めて、
 新規登録する機能を実装するには、いくつか方法がある。

・セッションによる実装は難易度が高い

・コントローラーを複数設ける方法は、
 中断したデータもDBに保存されるデメリットがある

・最も現時的な手法として、Javascriptよるページ遷移の表現を採用する


【目次】


【本題】

前回の続き

この投稿の続きです。
ryoutaku-jo.hatenablog.com

前回は、ページ遷移しながら新規登録する機能を、
セッションを用いて実装する事を考えましたが、上手く行きませんでした・・・

その理由と、代替案として何を採用したかをまとめました。

セッションを利用してデータを保持

前回も紹介したセッションによる実装案です。
セッションに関する詳しい説明は、前回の投稿に譲ります。

メリット

・データの検証が可能

 セッションはコントローラー側に処理を記述するので、
 条件式を記述することで、セッションに保存する前(ページ遷移前)に、
 入力データが不正で無いか?検証する事が可能だと考えられます。


・登録作業を中断すれば、入力データは残らない
 
 セッションはブラウザを閉じれば消える仕様なので、
 入力データが残り続けてしまう事はありません。


デメリット

・実装に時間が掛かる

 私個人の能力的な限界・・・
 セッションとは、そもそもユーザーのログイン状態を保持する為
 利用するのが一般的らしく、それ以外の目的で利用する方法が
 調べても出て来ない・・・

 理屈の上では不可能では無いと思われるので、
 何らか方法はあるのだろうが、そこに行き着くには、かなりの時間を要すると思われる。
 

早期にアプリを完成させるという当初の目的を達成するには、
あまりここに時間を掛けていられないので、
既知の技術を応用する方法で対処する事を考えました。


遷移するビュー毎にコントローラーを作成する

メルカリの新規登録ページは、「ユーザー情報」「電話番号認証」「住所」「クレカ情報」という
4段階の構成になっていますが、これら毎にコントローラーを作成し、
それぞれのnew/createアクションで、ページを切り替えて、データを登録する手法です。

メリット

・比較的簡単に実装できる
 コントローラーを用意して、createで次のコントローラーに
 飛ばす記述をそれぞれにするだけなので、
 既知の技術で実装が出来ると考えました。

・データ検証が可能
 DB設計やモデルにバリデーションを設定すれば、
 不正データかの検証が可能です。


デメリット

・登録作業を中断したとしても、DBに保存される
 コントローラー毎にcreateアクションが動くので、
 ユーザーが途中で登録作業を止めても、
 ページを遷移していれば、DBにデータが残ったままになります。
 

・データ取得の処理が煩雑になる
 複数のテーブルにユーザー情報が点在する事になるので、
 一つのテーブルであれば、まとめて簡単に取得出来たデータも
 アソシエーションで取得する必要が出てきます。


特に、DBに保存されたままになるというのは、
運用上かなり致命的なので、こちらの実装は見送りました。

Javascriptでページ遷移を表現する

一つのビューに各ページのフォームをまとめて、
不要なフォームはCSSで隠しておき、ボタンのクリックを発火点に、
Javascriptでクラス名を適宜追加・削除することで、
ページ遷移しているように見せ掛ける手法です。


メリット

・実装が簡単
 Javascriptでクラスを追加するだけなので
 記述が非常に簡単です。

・作業を中断しても、DBにデータが保存され続ける事は無い
 一見ページ遷移している様に見えますが、
 実際にはフォームが入れ替わって表示されているだけなので、
 登録を最後まで進めない限り、DBに保存される事はありません。


デメリット

・必須の入力情報を飛ばしても、最後のページまで遷移できる
 コントローラーやモデルにデータは送られていないので、
 そちらでバリデーションをかける事が出来ません。
 (Javascriptに条件式を追加すれば、対応できるかも・・・)
 
いずれも一長一短ですが、最も現時的なのが
Javascriptのパターンだったので、今回はそちらを採用しました。

総括

Javascriptでクラス名を追加するにあたり、
ここでもBEMの概念が非常に役に立ちました。
(Modifierによる表示・非表示の切り替え)

改めて、BEMの概念は重要だと感じた一日でした。


《今日の学習進捗》

チーム開発:7日目
ビューが概ね完成する。

学習開始からの期間 :56日
今日までの合計時間:565h
今日までに到達すべき目標時間:511h
目標との解離:54h
「10,000時間」まで、

残り・・・「9435時間!」