こんにちは！まろんぼーいです。
今回は、「初心者がWebアプリを作ってみた」シリーズの第12回です。
このシリーズでは、過去に完全初心者の僕が作ったWebアプリを参考に、
初心者なりに試行錯誤しながらその改良版を一から作っていく過程をお見せしています。
このシリーズのモットーは、「同様の初心者が、アプリ作成の流れをつかみながら同様のアプリを作れるようになること」です。
ということで、基本的にアプリを作成していく過程を順を追って解説していますが、
「正確な内容」よりも、「わかりやすいなんとなくのイメージ」を重視して記事を書いています。
経験者の方からすると、「正確にはちがう！」と突っ込みたくなるような内容もあるかと思いますが、
難しい知識よりも、なんとなくでいいので流れをつかむ！
そんな内容となっていますので、同じ初心者の方の参考になればうれしいです！
それでは今回もはじめていきましょう！
〇前回までの進捗
ここまで、トップページ、ユーザ一覧ページ、特定のユーザページ、ユーザ新規登録、ログインページと作成してきました。
ここで一呼吸おいて、今回はアプリのレイアウトを少し整えたいと思います。
具体的には、ナビバーとフラッシュメッセージ、エラーメッセージを実装します。
これが実装できれば、ちょっとずつですがアプリらしく見えるかと思いますので、頑張りましょう。
〇ナビバーの実装
では最初にナビバーを実装していきます。
ナビバーについてはナビバーだけでまとめた方がわかりやすいかなと思いましたので、
以下の記事でまとめました。
コチラの記事はまさに今回のナビバー作成の内容に沿って作った解説記事なので、
こちらの記事通りに進めていただければ実装できるかと思います。
実装すると、下のようにナビバーが出てきました！
今は新規登録とログインのメニューしかありませんが、
今後色々なページを実装していく中でナビバーも合わせて改良していきます！
〇フラッシュメッセージ、エラーメッセージ実装
続いて、「フラッシュメッセージ」と「エラーメッセージ」。
ユーザが投稿や登録などした場合や、逆にうまくいかなかった場合に
ポップアップしてくるメッセージの機能を持っています。
こちらについても別記事でまとめました！
フラッシュメッセージはアプリ全体に適用させたいのでapplication.html.erbに、
エラーメッセージはユーザ新規登録画面に適用させたいのでusersフォルダのnew.html.erbにrenderさせます。
フラッシュメッセージとエラーメッセージも確認しちゃいましょう。
せっかくなのでナビバーを使います。
ナビバーの「signup」をクリックし、ユーザ新規登録画面に移動します。
てきとーな名前とメールアドレスを入れます。
パスワードとパスワード確認を違うものにするなどわざとエラーが出るように入力したら、
登録ボタンを押してみましょう。
こんな感じで、フラッシュメッセージ（赤色）とエラーメッセージ（黄色）が出ました！
ふう、出て良かった（笑）。
これで、フラッシュメッセージとエラーメッセージが適用できました！
〇次回 ～ログイン後のページ設定～
今回はここまでです！
今回の作業で、アプリが何となくアプリらしくなってきたのではないでしょうか！（日本語下手）。
これでユーザ新規登録をし、ログインまでできるようになっています。
ただし、ログイン後のページを設定していないため、
ログインボタンを押してもエラーが出てしまう状態です。
次回は、ログイン後のページを作成します。
また、ログアウト機能も実装し、
「新規登録→ログイン→トップページ移動→ログアウト」という一連の動作を
エラーなくできるようにしたいと思います！！
本シリーズでまろんぼーいが実際に作成中のアプリについては、以下のURLで公開しています。
各viewページを直接確認する場合は、本記事と同様のURLを末尾につければ飛ぶことができます。
ご参考までに！
今回もご覧いただきありがとうございました！
