読者です 読者をやめる 読者になる 読者になる

10000hの技術メモ

この先生きのこるための勉強内容&時間記録

Ruby on Rails Ⅳ 4章 プロフィール画像を表示しよう

Progate Ruby on Rails

20170305@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

画像を表示しよう

ゴールは、ユーザがプロフィール画像を登録して、ユーザのページで表示できるようになること。

image_tag

画像を表示するにはimage_tagヘルパーを使う。画像ファイル名を指定すると、app/assets/imagesの中にある画像を表示しれくれる。

→さらにフォルダを分けたりしたら、どうなる?

画像を保存する準備をしよう

ユーザごとにプロフィール画像を登録できるよう、userテーブルにimageカラムを追加する。

画像はpublicフォルダを作ってそちらに保存する。

画像をアップロードするしくみ

file_fieldヘルパーを使う。よく見る「ファイルを選択」ボタンの付いているアレが実現できる。

画像を保存しよう

スライドが「コードはこうです。」でさらっと流れてしまった。。

インスタンスメソッドを定義しよう

画像を保存するコードを、createでもupdateでも使いたいので、インスタンスメソッドとして定義する。

ここで「あれ?コードを使いまわしたいときに使うのはパーシャルじゃなかったの?」という疑問が出そう。

  • パーシャル:ビューファイルのコードの一部分を抜き出したもの
  • インスタンスメソッド:そのインスタンスに対していろんな場所で使いたい共通処理だから、モデルの中でメソッドとして定義すればいい

かと。

(こういう点を頭でわかったつもりで放置しないで、後輩に説明できるレベルで理解するのが大事な気がした)

プロフィール画像を表示しよう

ユーザ一覧で、画像を登録しているユーザはその画像を、登録していないユーザはデフォルト画像を表示する。

ヘルパーを作る

ユーザが画像を登録しているかどうかで出し分ける部分のコード、毎回書くのは面倒。

画像表示は複数箇所で行いたいので、ビューで使う画像表示部分のコードをヘルパーにまとめる。

※「何度も使うコードは一つにまとめる」という目的を果たすために、パーシャルなのかインスタンスメソッドなのかヘルパーなのか、説明が欲しいところ。 端折ってるけど、多分説明必要。

今回作ったimage_forが受け取るのはユーザーオブジェクト。途中まで間違えてimageを受け取ろうとしていた。

今回の勉強時間:43分 累計勉強時間:11時間27分

Ruby on Rails Ⅳ 3章 renderを使いこなそう

Progate Ruby on Rails

20170305@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

パーシャルにオブジェクトを渡そう

まず「パーシャルってなんだっけ?」を思い出す。

Ruby on Rails Ⅲ 2章 scaffoldのコードに近付けよう(2) - 10000hの技術メモ

共通するコードをパーシャルにまとめておいて、別の場所から呼び出せる。そうなると当然、パラメータを渡したくなる。

パーシャルへのオブジェクトの渡し方

<% @notes.each do |note| %>
  <%= render 'notes/note', note: note %>
<%end %>

noteという単語がたくさん出てくるので、どのnoteが何を表しているのか意識しましょう。

↑確かに初見だからかものすごく困ってます(もっとわかりやすく名前変えるというのはできないんでしょうか・・・)

renderの特殊な使い方

  • 配列のrender

※これ要復習。

今回の勉強時間:15分 累計勉強時間:10時間44分

Ruby on Rails Ⅳ 2章 ユーザーと投稿を結びつけよう

Progate Ruby on Rails

20170305@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

migration

ユーザーと投稿を結びつけたい。ユーザーはidを持っているので、notesテーブルにuser_idカラムがあれば判別できるはず。

migrationとは

データベースのテーブルやカラムなどの構造を変更できる仕組み

rails g migration add_user_id_to_notes user_id:integer

を実行すると、migrationファイルが生成される。 上の例だと、user_idカラムをnotesテーブルに追加する、というmigrationファイルが自動生成される。

ファイル名自体は任意なので、このフォーマットに従わずに作ることも可能。

rake db:migrate

rake db:migrate

を実行すると、migrationファイルの中身をDBに反映できる。

いままで実行していたのは、rails g modelrails g scaffolrで自動生成されたmigrationファイルをDBに反映するためだった。

user_idを保存しよう

フォームでnoteを作成する際に、user_idも一緒に入力・送信できるようにする。

note作成時にuser_idを必須にするよう、コントロールを変更。ストロングパラメータを思い出す。バリデーションも。

ユーザーの投稿一覧を表示しよう

userのshowページに、そのuserの投稿一覧を表示する。

whereメソッド

@notes = Note.where(user_id: @user.id)

一対多

has_manybelongs_to

(※これ便利だけどちゃんと理解しないといけないやつだ。他のも読んで理解)

一対多もそうだし、ファイル間のデータの受け渡しがまだまだ難しい。@付け忘れたりする。

今回の勉強時間:35分 累計勉強時間:10時間29分 (10時間突破!)

Ruby on Rails Ⅳ 1章 ユーザーをscaffoldしよう

Progate Ruby on Rails

20170304@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

ユーザーをscaffoldしよう

(scafflodする、は動詞なんだ・・・。)

ユーザを作成する

$ rails g scaffold User name:string email:string

$ rake db:migrate

ユーザを作ったら、あとはユーザーページを作ったりログイン機能つけたりログイン時のバリデーションとかするんだろうな、とこの時点で想像。

これだけでユーザの追加・編集・削除が出来るように。確かにscaffold便利。

ユーザーのバリデーション

name, emailの値が存在する場合に保存するようにする。

また、uniquenessを使って、同じメールアドレスのユーザが登録されないようにする。

validates :name, presence: true
validates :email, presence: true, uniqueness: true

短いけどキリが良いのでここまで。

今回の勉強時間:10分 累計勉強時間:9時間54分

Ruby on Rails Ⅲ 2章 scaffoldのコードに近付けよう(2)

Progate Ruby on Rails

20170303@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

form_for

form_forヘルパーを使うと、form_tagヘルパーを使うときと比べてより簡単に作ることができる・・・?

form_forの書き方は

<%= form_for(インスタンス) do |f| %>

<% end %>

fのところは、こう書く。

form_forの中身を書こう

`form_forの中身のフォームも、ヘルパーで簡単に書けるらしい。

例えば

<%= form_for(@note) do |f| %>
  タイトル
  <%= f.text_field :title, class: "form-control" %>
  内容
  <%= f.text_area :content, class: "form-control" %>
  <%= f.submit "保存", class: "btn" %>
<% end %>

パーシャルを作ろう

小林製薬 パーシャルデント108錠感謝価格品

小林製薬 パーシャルデント108錠感謝価格品

↑ではなく。

new.html.erbでは@noteがデータベースに保存されていなかった。(これから新規に作るので)

→じゃあedit.html.erbだったら?既存の@noteのタイトルとコンテンツを引っ張ってこないといけない。

form_forの引数オブジェクトが既にDBに保存されている場合、createアクションではなくupdateアクションへのパスが自動的に設定される。

つまり、editのほうでは何か違った書き方をしなければいけないわけではない。

そのため、new.html.erbedit.html.erbのコードのうち、form_forの部分が全く一緒になる。それならまとめたい。

そこでパーシャル

ビューファイルのコードの重複を取り除いたり、見やすくしたりするために、コードの一部分を抜き出したファイルのことを「パーシャル」と呼びます。

なるほど。

  • パーシャルのファイル名はアンダーバーから始まる。
  • パーシャルはrenderメソッドでrender 'フォルダ名/パーシャル名'で。

updateメソッド

フォームの送信先のupdateアクション、scaffoldで生成されたほうはupdateメソッドを使っている。

updateメソッドは

update(title: 値, content: 値)

のように、引数にハッシュをとることができる。

クリアー。

今回の勉強時間:45分 累計勉強時間:9時間44分

Ruby on Rails Ⅲ 2章 scaffoldのコードに近付けよう(1)〜サクセスメッセージを表示しよう

Progate Ruby on Rails

20170302@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

サクセスメッセージを表示しよう

投稿が成功したらメッセージを出す。

やり方は、redirect_toの第二引数にnoticeを指定する。

ということは、notice以外にも色々あるんだろうなーと思い、さらっとググる。

まだやれるけど、章が終わってキリがいいのでココまで。

今回の勉強時間:7分 累計勉強時間:8時間59分(おしい!!)

Ruby on Rails Ⅲ 2章 scaffoldのコードに近付けよう(1)〜フォームに初期値を入れよう - エラーメッセージを表示しよう

Progate Ruby on Rails

20170301@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

フォームに初期値を入れよう

前にやった気もするけれども、今回は「バリデーションチェックを通らなかったときに、さっき入力していた値をフォームに入れておこう」という趣旨。

saveに失敗した時の初期値

createアクションで@noteに値がセットされているので、@note.titleで初期値を表示できる。

newアクションを経由した場合の初期値

newアクションで中身が空の@noteを定義する

・・・演習がコピペで終わった

エラーメッセージを表示しよう

何がダメでやり直しさせられてるのか、ユーザにお知らせしたい。

バリデーション失敗時、エラーメッセージは同時に作られる。(!)

内容は @note.errors.full_messagesに入っている。

取得の仕方

<% @note.errors.full_messages.each do |message | %>
<%= message %>

こんな感じ。

full_messages以外のメソッドはどんなのがあるの?という疑問が出て少し調べたのでメモ。

参考:Active Record バリデーション | Rails ガイド

「エラーが一つでもあれば表示する」の書き方

<% if @note.errors.any? %>

<% end %>

エラーメッセージを出すと、「なんかそれっぽいものが出来てきた」という気になれるので良い感じ。 見た目もbootstrapで綺麗だし。

今回の勉強時間:16分 累計勉強時間:8時間52分