Progate Ruby on Rails学習(レッスン5まで)
内容
レッスン1
・アプリケーションの作成
$ rails new アプリケーション名
これを実行することで入力したアプリケーション名とそのフォルダが作成される。
アプリケーションには開発に必要なファイルやフォルダが用意されている。
・サーバーの立ち上げ
開発中のアプリケーションをブラウザで表示するためにはサーバーを起動する必要がある。
$ rails server で起動。
・トップページの自動生成
$ rails generate controller home top
このコマンドを実行すると新しいWebページが自動で作られ localhost:3000/home/top というURLにアクセスできるようになる。
〇コマンドだけでページができる理由
コマンドを実行すると、ページを表示するのに必要なファイルが作られていた。
railsでページを表示するためのファイル
ビュー、コントローラ、ルーディング
・ビュー べージの見た目をつくるためのHTMLファイル。
中身 $ rails generate controller home topのコマンドだと、後ろ二つのhomeフォルダとtop.html.erbというファイルが作成される。このファイルの中身は普通のHTMLのコードがある。よってページの見た目はここで変更できる。
・コントローラ
ページを表示するときの経由地点。
$ rails generate controller home top が実行されると、home_controller.rbというファイルのなかに topメソッドが追加される。このメソッドをアクションという。
アクションの役割
ブラウザに返すビュー(見た目)をviewsフォルダのなかから見つけだす。
コントローラと同じ名前のビューフォルダ(ここではhomeフォルダ)からアクションと同じ名前のHTMLファイル(ここではtop.html.erb)を探してブラウザに返す。
・ルーディング
ブラウザとコントローラをつなぐ。
送信されたURLに対して「どのコントローラのどのアクション」で処理するかを決める対応表。
ルーディング設定ファイルの中身
localhost:3000/home/topというURLが送信されたとき
Rails.application.routes.draw do
get ”home/top” => “home#top”
end
homeコントローラのtopアクションで処理。
getのあとの”home/top” を変更するとそれに応じてURLが変更される。
“home#top” がかわらない限りhomeフォルダのtopアクションに対応するファイル(top.html.erb)の内容がブラウザに返される。
まとめ
$ rails generate controller home top実行
→homeフォルダとtop.html.erbファイルを作成。
→home_controller.rbというファイルのなかにtopメソッドが追加される。
→ルーティングファイルがhomeフォルダのtopアクションで処理すると決める
→このアクションがhomeフォルダからtop.html.erbというファイルを探す。
→作成されたtop.html.erbをブラウザに返す。
・ルーティングとアクションの追加
ルーティング
Rails.application.routes.draw do
get ”home/top” => “home#top”
get ” home/about” => “home#about”
end
コントローラ
def about
end
これでabout.html.erbというファイルをつくってもOK
・CSSファイルはcss/assets/stylesheetsフォルダに入っている
このフォルダに保存されているCSSをファイルにコードを書けばすべてのビューにCSSが適応される。
・画像はpublic フォルダに配置しておくと、画像名を指定するだけで表示できる。
・リンクのつくり方
ビューファイル(HTML)のaタグのhref=” ” のURLとルーディングのURL部分を同じにする。
レッスン2
・データベース
データを保存しておく場所
・投稿一覧ページの作成
「投稿」に関するページをつくるためにpostコントローラをつくる。homeコントローラでもつくれるが目的に合わせて分けた方が良い。(homeコントローラはトップページなどに関したコントローラ)
・HTMLファイルのなかにRubyのコードを打ち込むときは<% %>で囲む。変数など。
今まででてきたerb Embedded Ruby(埋め込みRuby)の略。
埋め込むRubyコードをブラウザに表示したいときは<%= %>。変数の値など実際にページ内に表示したいときに使う。
・アクションのなかに変数定義する。
def アクション名 end のなかに@変数を定義することで、それをHTMLファイルでも使える。(コントローラがビューに変数を渡す)
変数の前に@をつけるのを忘れない。
・データベースはテーブルと呼ばれる表で管理されている。
表の縦(列)のことをカラム、横(行)のことをレコードと呼ぶ。
・postsテーブルの作成
データベースにデータを保存するためにテーブルをつくる。
Step1
マイグレーションファイルと呼ばれるデータベースに変更を指示するためのファイルを作成。
$ rails g model Post content:text
Postsという名前のテーブル(コマンドは単数形)のcontentという名前のカラムに長い文字列(text)のようなデータが入る。
Step2
データベースに変更を更新
$ ralis db:migrate
このコマンドを入力すると、id, criated_at, updated_atというカラムも自動生成される。
・テーブルを操作するためには、モデルと呼ばれるクラスを用いる。
rails g modelというコマンドですでにPostモデルというクラスが定義された post.rbが生成されている。
$ rails g model Post content:text
このコマンドでは、テーブルを操作するpostモデルの定義されたルビーファイルと、データベースに変更を指示するマイグレーションファイルふたつが生成される。
・rails console
ターミナルで実行することによってコンソールを起動することができる。quitで終了。
変数の定義もできる。
・postテーブルにデータを追加
Post.newとnewメソッドでPostモデルのインスタンスを作成
→post.saveとsaveメソッドでpostインスタンスをpostsテーブルに保存
・postテーブルのデータを利用
post = Post.first postテーブルにある最初のデータを取得しpostに代入
post.content 取得したデータから投稿内容を取得
posts = Post.all postテーブルにあるすべてのデータを取得。
配列で取得できるので、最初のデータを取得するときは、Post.all[0]
・取得したデータをビューに表示
コントローラのアクション内に取得したデータを変数に代入。
@posts = Post.all
ビュー(HTML)でその変数を表示。
Post.content
・views/layouts/application.html.erb に共通のHTMLを書いておくことができる。
ここに指定した変数に、各ファイルで違った値を代入すると、各ページごとに値は違うがレイアウトは揃えることができる。
・link_to aタグを生成するメソッド
<%= link_to(“表示する文字”, “/URL”) %>
→<a href=”URL”>表示する文字</a>
レッスン3
・idカラム データベースに保存されるときに数字が1から自動で入る。
・created_atカラム、updated_atカラム
保存された時刻が自動で入る。updated_atカラムはデータ更新時にも時刻が更新される。
・find_by 特定の条件に合致するデータを取得するためのメソッド。
モデル名.find_by(カラム名:値)
post = Post.find_by(id:3)
post.content
idが3のデータを取得し、表示
・ルーディングのURL部分にpost/:〇〇 と書くと「/posts/〇〇」のようなすべてのURLが該当する。
・params
ルーディングで設定したURL「:id」の値を取得することができる。その値がこの変数にハッシュ(複数の要素をまとめて管理)としてはいっている。コントローラのアクション内で実行。
def show
@id = params[:id] params(ハッシュ)のなかのidの値
end
・idカラムの値がprams[:id]と等しい投稿をデータベースから取得し、表示。
def show
@post = Post.find_by(id:params[:id])
end
<%=@post.content %>
・投稿一覧ページに各投稿の詳細ページへのリンクを作成
<%=link_to(post.content, “/post/#{post.id}”)%>
post.contentの内容で表示されたリンクをクリックすると、そのid番号へと飛ぶ。
index(一覧ページの名前)→post(詳細ページの名前)
・新規投稿ページの作成
ルーディングでURLを作成。コントローラにアクションを作成。ビューファイルを作成。
get “posts.new” => “posts#new”
def new
end
・投稿ボタンが押されrails側に送信されたデータをデータベースに保存
createアクションを用紙してその処理を行う。
フォームの値を受け取るときは、ルーディングを「get」でなく「post」にする。
・form_tag
フォームに入力されたデータを送信するメソッド。
form_tag(送信先のURL) do
・redirect_to ほかのURLに転送(リダイレクト)するメソッド
Redirect_to(転送先のURL)
・投稿内容の保存
<textarea>タグにname属性を指定すると入力データを送信できるようになり、name属性の値をキーとしたハッシュがrails側に送られる。
<textarea name=”content”>入力内容</textarea>
{content:”入力内容”}というハッシュがcreateアクションへ送られる。
def create
params[:content] paramsの中身が{content:”入力内容”}なので、入力内容を取得
end
実際の保存
def create
@post = Post.new(content:params[:content])
@post.save
end
Postクラスにcontentが入力内容のインスタンス変数をいれ、@postに代入し保存。
つまり、入力内容が@postに代入されそれが保存される。
・paramsのまとめ
get “post/:〇〇”
<textarea name =”〇〇”>
このふたつをparams[:〇〇]で取得できる。
・order
投稿一覧を並び替えるメソッド。asc:昇順、desc:降順
@post = Post.all.order(created_at: :desc)
レッスン4
・投稿データを編集して保存するとupdated_atカラムの時刻が更新される。
・destroy データベースから削除するメソッド
・投稿編集ページの作成
ルーディング どの投稿の編集かわかるようにURLにidを入れる
get “posts/:id/edit” => “posts#edit”
コントローラ
def edit end
ビュー
edit.html.erbの作成
・フォームに初期値を用意する
<textarea>タグに初期値を入れることで設定できる
・編集内容を保存
updateアクションを用意。そのなかに、フォーム内容の保存、投稿一覧画面への転送機能をつける。
このアクションはフォーム値を受け取るので、ルーディングはpostにする。
・投稿内容の更新
URLに含まれるidを用いてデータベースから投稿データを取得。
→フォームから編集内容を受け取り、投稿データを更新。
ビュー
<%=form_tag(“/posts/#{@post.id}/update)do%> updateアクションにidを飛ばす
<textarea name=”content”>入力内容</textarea> 入力内容をハッシュにする
コントローラ
def update
@post = Post.find_by(id:params[:id]) URLからidを取り出す
@post.content = params[:content] 入力内容を上書き
@post.save 保存
・削除機能
destoryアクション。機能:投稿を削除。投稿一覧画面への転送
ルーディングはpost。
・ルーディング
get データベースを変更しないアクション
post データベースを変更するアクション
・ルーディングpost用のリンク
第三引数に{method:”post”}を追加。
レッスン5
・バリテーション
不正なデータがデータベースに保存されないようにデータをチェックする仕組み。
モデルで設定。
class Post < ApplicationRecord
validates :検証するカラム名, {検証する内容}
validates :content, {presence:true} contentカラムの空の投稿を防ぐ
validates :content, {length:{maximum:140}} contentカラムの長さ制限を140文字に
検証内容の複数設定 validates :content,{検証内容1, 検証内容2, …}
・saveメソッドは保存に成功した場合はtrue、失敗した場合はfalseを戻り値として返すようになっている。
・render
別のアクションを経由せずに、直接ビューを表示できる。
Render(“フォルダ名/ファイル名”)のように表示したいビューを設定。
redirect_toと違いそのアクションの中で定義した@定数をそのままビューで表示できる。
・エラーメッセージ
saveメソッドを呼び出した際にバリデーションに失敗すると、railsでは自動的にエラーメッセージが生成されるようになっている。
@post.errors.full_messagesの中にエラー内容が配列で入る。
・フラッシュ
ページ上に一度だけ表示されるメッセージ。ページを更新したり、別のページを移動すると表示されなくなる。
Flash[:notice] = “表示したい文字列”
感想
レッスン1
今までの言語とは違い、サーバーやブラウザなどインターネットの構造を知っていないといけない。
コマンドによって動く仕組みを学習した。
レッスン2
所要時間2時間
Rubyで学習する内容が出てくるのでそちらを先にやらないとできない。
中間は作業というか、新しいことを学んで実際にそうなっているかの確認が続く。
たくさんのファイルにそれぞれの操作をするので、正直なにをするためにどのファイルでなにをすればいいのかを把握しきれいていない。
ひとつひとつの説明を理解するのに時間がかかる。まだ完全な理解には及んでいない。
レッスン3
所要時間 2時間20分
ハッシュとかキーとかをしっかり覚えておかないと説明の意味がわからなくなる。
ちょくちょくRubyで学習したことがでてくる(newメソッドとか)ので、この辺をしっかり理解しておくと、さらに全体像が見えやすくなる。
ここにきてようやくビューとコントローラとルーディングの役割がわかった。
レッスン4
所要時間1時間30分
railsの仕組みに慣れてきた感じがある。積み重ね学習ゆえ適度にレッスン3の復習にもなってよい。
ただ、転送が増えたので、インターネットのなかでどういう振る舞いをしているのか気になる。これはこのレッスンからではわからない気がする。なにかいい書籍はないか。
レッスン5
所要時間 1時間20分
暗記事項(新しく学ぶこと)は少な目。
今までことが理解できているとスムーズに進むかんじ。
アクションを経由したり、素通りしたりすることで、アクションが変化するので、その流れを抑えることが重要。クリックするボタンによって流れが変わり、それによって表示されることも異なってくるのでひとつひとつのボタンの意味をはっきりさせておく必要がある。