Railsチュートリアルの続きです。前回は7〜10章まで進み、データベースのユーザーのモデルを作成を行いました。その後、ついに最終章の14章まで完走しました！ユーザー登録、ポスト投稿、フォローなどの機能を追加して、Sampleアプリケーションが完成しました！それではいきましょう！
【目次】
Ruby/Ruby on Railsを習得するためにやったこと まとめ
qiita.com
第11章 アカウントの有効化
認証メール送信の通知画面
アカウント有効化メール
アカウントリセットメール
- ユーザー有効化のために有効化トークン（ハッシュ化した文字列）を生成
- 有効化メールをユーザーに送信（有効化のurlにトークンが入る）
- プレビューメソッドでメールの内容をブラウザに表示し、確認
- 送信を実行するとサーバーログにも送信内容が表示される
- 有効化urlが開かれるとユーザーの有効化が成功したことを画面に表示
- 本番環境でのメール送信はMailgunというツールを使う（こちらはうまく動かなかった。。）
第12章 パスワードの再設定
パスワードの再設定リンクが追加された画面
パスワードの再設定の確認メールの送信画面
誤ったメールアドレスに送信した場合
確認メース送信成功画面
パスワード再設定の確認メール
パスワード再設定の確認メール（テキストメール）
パスワード再設定画面
パスワード再設定失敗
パスワード再設定成功
- パスワード再設定のために有効化トークン（ハッシュ化した文字列）を生成
- 再設定メールをユーザーに送信（再設定のurlにトークンが入る）
- プレビューメソッドでメールの内容をブラウザに表示し、確認
- 送信を実行するとサーバーログにも送信内容が表示される
- 再設定urlが開かれるとユーザーの再設定画面が表示される
- 再設定を実行すると結果を画面に表示
- 本番環境でのメール送信はMailgunというツールを使う（うまく動かず…）
ここからRenderのDB（postgreSql）の3ヶ月期間が切れてしまい、DBに接続できない旨のエラーになった。
下記のように新たなDBを作成してダッシュボードで設定しなおしたら再度デプロイできるようになった！
※参考：Renderの3ヶ月無料枠終了後の対応方針を考える #render - Qiita
第13章 ユーザーのマイクロポスト
別ユーザーの投稿一覧画面
フッターにはページングあり
トップ画面で投稿ができる
空欄で投稿実行→投稿失敗
テキスト入力
画像添付（画像以外はグレーアウト、画像サイズはリサイズ設定あり）
投稿済みの画面
削除実行（削除していいかのダイアログが表示される）
削除成功
- DBにマイクロポスト用のモデルを追加
- DBのマイクロポストとユーザーを紐づける
- ユーザー画面ユーザーごとのマイクロポスト一覧画面を追加（ページングも）
- トップ画面にマイクロポスト投稿フォームとマイクロポスト全体の一覧を追加（ページングも）
- マイクロポストの削除機能も追加
- 画像の投稿機能も追加（拡張子識別、画像リサイズも）
- 画像のアップロード先をAWSのS3に変更（こちらは後回しにした）
第14章 ユーザーをフォローする
トップ画面にフォロー&フォロワー数が表示される（投稿一覧がタイムラインに）
フォロー一覧画面
フォロワー一覧画面
フォローしていないユーザーの画面（フォローボタン）
フォロー中のユーザーの画面（フォロー解除ボタン）
- DBにフォロー状態のモデルを追加
- DBのフォロー状態とユーザーを紐づける
- フォロー数、フォロワー数と各一覧ページのリンクを追加
- ユーザーページにフォロー&フォロー解除ボタンを追加
- フォロー一覧画面、フォロワー一覧画面を作成
- フォロー機能をHotwireに置き換え（SPA機能）
- フォロー検索機能にSQLのサブセレクト機能で実行（N+1問題の解消）
SPA機能にはAjaxとWebSocketがある - Ajax：ブラウザからのリクエストにサーバがレスポンスを返す - WebSocket：ブラウザとサーバが常時通信し合うことができる
※参考：ノート：AjaxとWebSocket - 滴了庵日録
終わりに：まとめと今後の展望
ようやくRailsチュートリアルを完走できました！下記のようなことを体験できました
- Rubyのオブジェクト思考
- RailsによるMVC構成、ルーティング設定
- ActiveRecordによるDB操作 ※SQLのサブセレクト機能も
- ERBによるhtml生成 ※EJSと書き方が似ている！
- BootStrapによるCSS設定 ※Sassによる修正も
- HotwireによるJS設定 ※TurboでSPA機能も
今回は体験重視でとにかくゴールまで辿り着いたので、今後じっくり理解を深めていこうと思います。
今後やってみたいこと
- フロントエンドとバックエンドが別れたAPIモード（MVCのV無し）
- フロントエンドはReact、Nextなどで作る
- フロントエンドのCSSをTailwindにしてみる
- ローカル環境をDockerで構築してみる
- クラウド環境をRenderではなくAWSにデプロイしてみる
※参考：読み物ガイド - 完走者向け次のステップ - Railsチュートリアル
それではまた！
Ruby/Ruby on Railsを習得するためにやったこと まとめ
qiita.com
