【学習記録】ユーザー新規登録画面の実装

今日はユーザー新規登録画面のコーディングを進めました。
フロントエンドは知見が浅くてコード書いてるといたるところで壁にぶつかりますが、なんとか実装してアプリが想定通りに動くとすごく楽しいです。

コミットは以下です。

github.com

おそらくコードの書き方に問題点は多々あると思いますが、ひとまず動くようになったのでmainブランチにプルリクエスト送って自分でマージしました。

なんとかユーザー登録機能の形はできあがったものの、まだ実装できていないことは残っているので以下に書き出してみます。

  • 新規登録画面で「パスワード」と「パスワード(確認用)」の二つの項目を用意していて、入力内容が一致しないとAPIを呼び出せないように実装したい
    たぶんこれは二つの項目の値を比較して結果をbooleanで返すようにすれば、そこまで時間かからず実装できそう。

  • 入力項目「パスワード」に文字数や使用する文字種別の制約をつけたい
    イメージとしては文字数は8文字以上でアルファベットと記号を含むこと、みたいな制約を実装して、条件を満たしていなければAPIを呼び出せないようにしたい。
    おそらく正規表現を使って条件を指定する必要があるかと思うので、正規表現を調べ直す必要がありそう。
    (現場で正規表現を書くタスクは何度か担当しているのですが、正規表現はなかなか覚えるのが難しい)

  • ユーザーアイコン画像も新規登録時に入力できるようにしたい
    画像データをS3に格納する処理は別のAPIですでに実装しているので、その処理を共通化すればおそらくそんなに時間かからず実装できるはず。

まずはコードが多少粗くても機能実装することを優先しつつ、Vue.jsのベストプラクティスなども勉強していって少しずつコード綺麗にしていきます。