こんにちは！まろんぼーいです。
今回は、「初心者がWebアプリを作ってみた」シリーズの第12回です。
このシリーズでは、過去に完全初心者の僕が作ったWebアプリを参考に、
初心者なりに試行錯誤しながらその改良版を一から作っていく過程をお見せしています。
このシリーズのモットーは、「同様の初心者が、アプリ作成の流れをつかみながら同様のアプリを作れるようになること」です。
ということで、基本的にアプリを作成していく過程を順を追って解説していますが、
「正確な内容」よりも、「わかりやすいなんとなくのイメージ」を重視して記事を書いています。
経験者の方からすると、「正確にはちがう！」と突っ込みたくなるような内容もあるかと思いますが、
難しい知識よりも、なんとなくでいいので流れをつかむ！
そんな内容となっていますので、同じ初心者の方の参考になればうれしいです！
それでは今回もはじめていきましょう！
〇前回までの進捗
前回は、Userのshow.html.erbと関連するController、Routerを作り、特定のユーザページを完成させました！
これでユーザ一覧ページであるindex.html.erbと特定のユーザページであるshow.html.erbを作成できたので、
今回はユーザを登録するページ（new.html.erb）を作成していきます。
〇Controller、Router、Viewの作成【new】
ユーザ登録ページはnew.html.erbで作成します。
index、show同様に、UserのModelは作成済みなので
残りをCRVの順に作っていきまっしょう！
・Controller
現在controllerは以下のようになっているかと思います。
|
1 2 |
def new end |
こちらについて、このように追記しましょう。
|
1 2 3 |
def new @user=User.new end |
追記の内容については、
「新しくユーザを作成し、インスタンス変数@userに代入する」
という意味になります。
User.newは、「新しいユーザを作成する」という意味になります。
もう少し詳しく書くと、User.newの時点ではユーザ情報は空とです。
実際にユーザに情報を登録するのは、
index、show、new、create、edit、update、destroyと7つあったメソッドの中の、
createで行います。
createはコチラのようになります。
|
1 2 3 4 5 6 7 8 9 |
def create @user = User.new(user_params) if @user.save redirect_to new_session_path else render :new end end |
イメージとしては、
ユーザ新規登録ページに移動した際に自動的に情報を入れるための新規ユーザが作成され、
そのページでユーザがname等の情報を入力後に「登録」ボタンを押した際に
createメソッドが発動し、情報を持った新規ユーザがModelに登録される
といった流れです。
ちなみにif文を使ってユーザが登録された場合とされなかった場合の条件分岐を行っていますが、
その下の「redirect_to」や「render」は、その動作の後に遷移するページを示しています。
例えばuser.save、つまりユーザ登録が正常にできた場合にはnew_session_pathに飛ぶようになっています。
new_session_pathは次回作成するログインページのパスとなります。
また、「def destroy」「end」のあとに以下の文を追記しましょう。
|
1 2 3 4 5 |
private def user_params params.require(:user).permit(:name, :email, :password, :password_confirmation) end |
ここでは、デフォルトであった7つのメソッド以外に「user_params」というメソッドを定義しています。
新規登録の際にデータはModelに登録されると同時に一時的にparamsにも格納されますが、
そのparamsに送られるデータを制限しているんですね。
セキュリティのため、フォームを作ったname、email、password、password_comfirmationのみ送られるようにしています。
これは、今回の新規登録のようにアプリのユーザがフォームからデータを送ったときそのデータが送られる場所、格納される場所のことです！
controllerはこれにて終了。
・Router
Routerについては、resourcesを用いて7つのメソッドすべてルーティングが完了しているので、
追記の必要はありません、やった。
・View
では、Viewページを作っていきます。
使うviewファイルは、userフォルダ内にあるnew.html.erbです。
今回は、このように記述しました！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="row"> <div class="col-sm-6 offset-sm-3"> <%= form_with(model: @user, local: true) do |f| %> <div class="form-group"> <%= f.label :name, 'ユーザ名' %> <%= f.text_field :name, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :email, 'Email' %> <%= f.email_field :email, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :password, 'パスワード' %> <%= f.password_field :password, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :password_confirmation, 'パスワード確認' %> <%= f.password_field :password_confirmation, class: 'form-control' %> </div> <%= f.submit '登録', class: 'btn btn-primary btn-block' %> <% end %> </div> </div> |
これまでと違うところは、
「ユーザが入力するフォームを設けている」ことです。
順位解説していきます。
|
1 |
<div class="col-sm-6 offset-sm-3"> |
こちらは、前回の記事でも説明したグリッドシステムを活用しています。
|
1 2 3 4 5 |
<%= form_with(model: @user, local: true) do |f| %> ～ ～ ～ <% end %> |
次にコチラ。これが今回の主役の「form_with文」です。
form_withは、「ユーザが特定の情報を入力するためのフォームを作る」機能です。
form_with文の説明については以下の記事で別にまとめてあります！
コチラの記事を読んでいただければ、form_withの文の意味が何となくでも分かるかと思います。
こちらのform_withで、name、email、password、password_confirmationの入力欄を設けました。
また、classでform-group、form-control、btn等を指定していますが、
これはレイアウトをきれいにするためのbootstrap機能です。
ググってみましょう。
これで、ユーザ登録のviewファイルができました！
〇作成したページの確認
上で作成したnew.html.erbがちゃんと動くか確認します。
viewの確認方法についての記事も一応載せておきます。
今回作成したのはUserのModelのnew.html.erbなので、パスの「users#new」を確認すると、
URLは「/users/new(.:format)」と記載されています。
なので、トップページ（root_path）に飛んだら、URLの末尾に「/users/new」をつけてnew.html.erbページに飛べます！
以下のようになっていれば成功です！
これまで作ったindexやshowに比べ随分まともなものができましたね（笑）。
これが、bootstrapの力です！（筆者の力ではない…（笑））
とにもかくにも、これでユーザ登録フォームの作成に成功です。
〇次回 ～ユーザログインページの作成～
ユーザ登録ができるようになったということで、次回はユーザログインページを作ります。
現在はまだパスを参考にそれぞれのURLに飛ばないとページが確認できませんでしたが、
ユーザ登録ページとログインページができればアプリのユーザとしてアプリ内のページに入っていくことができます！
それまでもう少し！
頑張っていきましょう！
それでは今回はここまでにします。
本シリーズでまろんぼーいが実際に作成中のアプリについては、以下のURLで公開しています。
各viewページを直接確認する場合は、本記事と同様のURLを末尾につければ飛ぶことができます。
ご参考までに！
今回もご覧いただきありがとうございました！
