らくだ🐫にもできるRailsチュートリアル|7.1

7章でやる事
ユーザー登録機能を追加する
→HTML フォームを使ってWebアプリケーションに登録情報を送信
→ユーザーを新規作成して情報をデータベースに保存
→作成されたユーザーの新しいプロフィールを表示できるようにする準備

7.1 ユーザーを表示する

ユーザーの名前とプロフィール写真を表示する為のページを作る。
Railsチュートリアル本文に見本があります
ブランチはこちら
→ $ git checkout -b sign-up

7.1.1 デバッグとRails環境

Webサイトのレイアウトにデバッグ情報を追加する

上記追加コード if Rails.env.development? があることで
開発環境(development)のみで表示される
→テストや本番環境では挿入されない
デバッグ情報は開発環境以外では表示させないべき!

Railsにはテスト環境 (test)、開発環境 (development)、そして本番環境 (production) の3つの環境がデフォルトで装備されています。Rails consoleのデフォルトの環境はdevelopmentです。
コラム 7.1. Railsの3つの環境

デバッグ出力を整形する

custom.scssにスタイルを追加する

@mixinとは

まとめておいたコードを複数個所で簡単に呼び出すことでが出来る便利な機能
@mixin mixin名で定義して@include mixin名で呼び出す
詳しくはSassを勉強しようね🐫!

デバッグ出力

本文と違うね🤔

controller: static_pages
action: home

ハッシュ形式で取り出されたページの状態
controller→static_pages_controller.rb
action→home

演習

  • ブラウザから /about にアクセスし、デバッグ情報が表示されていることを確認してください。このページを表示するとき、どのコントローラとアクションが使われていたでしょうか? paramsの内容から確認してみましょう。
  • Railsコンソールを開き、データベースから最初のユーザー情報を取得し、変数userに格納してください。その後、puts user.attributes.to_yamlを実行すると何が表示されますか? ここで表示された結果と、yメソッドを使ったy user.attributesの実行結果を比較してみましょう。

7.1.2 Usersリソース

ユーザー情報をwebapplication上に表示できるようにしていく
→id=1のユーザーにアクセスするためのページのURIは/users/1
現時点ではroutesが設定されていないため、このURLにアクセスしてもエラーになる

サンプルアプリケーションにこの1行を追加すると、ユーザーのURLを生成するための多数の名前付きルート (5.3.3) と共に、RESTfulなUsersリソースで必要となるすべてのアクションが利用できるようになるのです

viewを作る

ルーティングは有効になったけどviewが無いので表示されません
なのでviewを作ります

ユーザーのid読み出しにはparamsを使いました。Usersコントローラにリクエストが正常に送信されると、params[:id]の部分はユーザーidの1に置き換わります。つまり、この箇所は6.1.4で学んだfindメソッドの User.find(1)と同じになります。(技術的な補足: params[:id]は文字列型の “1” ですが、findメソッドでは自動的に整数型に変換されます)。

演習

  • 埋め込みRubyを使って、マジックカラム (created_atとupdated_at) の値をshowページに表示してみましょう (リスト 7.4)。
  • 埋め込みRubyを使って、Time.nowの結果をshowページに表示してみましょう。ページを更新すると、その結果はどう変わっていますか? 確認してみてください。

7.1.3 debuggerメソッド

byebug gemによるdebuggerメソッド

デバッグが終わったらdebugger部分を削除しておく

今後Railsアプリケーションの中でよく分からない挙動があったら、上のようにdebuggerを差し込んで調べてみましょう。トラブルが起こっていそうなコードの近くに差し込むのがコツです。byebug gemを使ってシステムの状態を調査することは、アプリケーション内のエラーを追跡したりデバッグするときに非常に強力なツールになります。

エラーログでいい気がするけどそういうものでもないのかな🤔
エラーを調べる以外にも色々出来るので、何が出来るか学んでゆきましょう🐫

演習

  • showアクションの中にdebuggerを差し込み (リスト 7.6)、ブラウザから /users/1 にアクセスしてみましょう。その後コンソールに移り、putsメソッドを使ってparamsハッシュの中身をYAML形式で表示してみましょう。ヒント: 7.1.1.1の演習を参考にしてください。その演習ではdebugメソッドで表示したデバッグ情報を、どのようにしてYAML形式で表示していたでしょうか?
  • newアクションの中にdebuggerを差し込み、/users/new にアクセスしてみましょう。@userの内容はどのようになっているでしょうか? 確認してみてください

7.1.4 Gravatar画像とサイドバー

無料の画像サービスGravatarを使ってユーザーページにプロフィール画像を表示させる

Gravatarは無料のサービスで、プロフィール写真をアップロードして、指定したメールアドレスと関連付けることができます。その結果、 Gravatarはプロフィール写真をアップロードするときの面倒な作業や写真が欠けるトラブル、また、画像の置き場所の悩みを解決します。というのも、ユーザーのメールアドレスを組み込んだGravatar専用の画像パスを構成するだけで、対応するGravatarの画像が自動的に表示されるからです

(ヘルパーに定義してからviewに組み込む方が自然な流れじゃなかろうか🤔とか思いつつ)

GravatarのURLはユーザーのメールアドレスをMD5という仕組みでハッシュ化しています。Rubyでは、Digestライブラリのhexdigestメソッドを使うと、MD5のハッシュ化が実現できます。
(中略)
メールアドレスは大文字と小文字を区別しませんが (6.2.4)、MD5ハッシュでは大文字と小文字が区別されるので、Rubyのdowncaseメソッドを使ってhexdigestの引数を小文字に変換しています。(本チュートリアルでは、リスト 6.32のコールバック処理で小文字変換されたメールアドレスを利用しているため、ここで小文字変換を入れなくても結果は同じです。ただし、将来gravatar_forメソッドが別の場所から呼びだされる可能性を考えると、ここで小文字変換を入れることには意義があります。)

現状DBのデータは架空のデータなので画像表示はされない
本文に則ってサンプルデータを入力すると表示されるようになる。

サイドバーの最初のバージョン

本文に従ってshow.html.erbとcssを編集する
classのrowとcol-md-4はBootstrapのクラス名

演習

  • (任意) Gravatar上にアカウントを作成し、あなたのメールアドレスと適当な画像を紐付けてみてください。メールアドレスをMD5ハッシュ化して、紐付けた画像がちゃんと表示されるかどうか試してみましょう。
  • 7.1.4で定義したgravatar_forヘルパーをリスト 7.12のように変更して、sizeをオプション引数として受け取れるようにしてみましょう。うまく変更できると、gravatar_for user, size: 50といった呼び出し方ができるようになります。重要: この改善したヘルパーは10.3.1で実際に使います。忘れずに実装しておきましょう。
  • オプション引数は今でもRubyコミュニティで一般的に使われていますが、Ruby 2.0から導入された新機能「キーワード引数 (Keyword Arguments)」でも実現することができます。先ほど変更したリスト 7.12を、リスト 7.13のように置き換えてもうまく動くことを確認してみましょう。この2つの実装方法はどういった違いがあるのでしょうか? 考えてみてください。

1.登録済みだったし表示された!

キーワード引数についてこちらなどを参考にしました↓


オプション引数よりキーワード引数の方がコードがすっきりする!

まとめとか感想

デバッグの方法を学ぶなど
viewのデバッグで表示されている内容がワケワカラン!!だったのだけど
頑張って調べたりコミュの仲間にヒントをもらったり解説してもらったりしました。
ありがたや。

らくだ🐫にもできるRailsチュートリアルとは

「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。
自分用に記録していますが、お役に立つことがあれば幸いです。

調べたとはいえらくだ🐫なりの解釈や説明が含まれます。間違っている部分もあるかと思います。そんな所は教えて頂けますと幸いなのですが、このブログにはコメント機能がありません💧お手数おかけしますがTwitterなどでご連絡いただければ幸いです