投稿一覧ページを作成する
postsコントローラを作成する（目的に合わせてコントローラを作成する）
【書き方例】
《home画面のコントローラ》
class HomeController < Application Controller
def top
end
end
《投稿一覧ページのコントローラ》
class PostsController < Application Controller
end
一覧ページを作成する時は、indexというアクション名を使用することが一般的なので、ターミナルでindexアクションを用意する。
【書き方】
《ターミナル》
＄ rails generate controller posts index
- ：コントローラ名、 ：アクション名
- 「rails generate controller」は、「rails g controller」と省略可能
- indexアクションを用意することで、「get “posts/index” => “posts#index”」のように、posts/indexへのルーティングが生成される。
投稿一覧ページのビューを作成する
投稿内容を変数に代入する
index.html.erbのようなerbという形式のファイルでは、<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができる。
「erb」は「Embedded Ruby（埋め込みRuby）」の略。
【書き方例】
《html.erb》
<% post1 = “今日からProgateでRails” %> <% %>で囲んでRubyのコードを書く
<%= post1 %> 表示したい時は、<%= %>で囲む
<% post2 = “投稿一覧ページを作成中” %>
- <% %>の場合は何も表示されないので、変数の定義などに用いる
- <%= %>の場合では、Rubyコードの中身が表示されるため、変数の値などを実際にページ内に表示したい場合に使う
each文で表示する
配列を用意する
変数postsを用意し、それぞれの投稿データが入っている配列を代入する。
【書き方例】
<%
posts = [
“我が名はアシタカ”， 文字列を配列の中に入れる
“東の果てよりこの地へ来た”
]
%>
- 配列を書くときはコンマ（，）で区切るのを忘れない
each文
【書き方例】
<% posts.each do |post| %>
<div class=”posts-index-item”>
<%= post %>
</div>
<% end %>
- 配列postsから要素を1つずつ取り出して変数postに代入し、表示している
- こうすることで、postsの要素の数だけeach文の中身が実行されるので、投稿の数だけHTMLを書く必要がなくなる
- 非表示にするものは<% %>で囲み、表示するものは<%= %>で囲っている
アクションで変数を定義する
ここまでは変数をビューファイル内で定義してきたが、 Rails ではビューではなく、アクションで定義することが一般的。
そのため、ここからはコントローラのアクション内で変数を定義していく。
※アクションとは、コントローラ内のメソッドのこと
【書き方例】
《コントローラ》
class PostsController < Application Controller
def index
＠posts = [
”我が名はアシタカ”，
”東の果てよりこの地へ来た”
]
end
《ビューhtml》
<% @posts.each do |post| %>
<div class=”posts-index-item”>
<%= post %>
</div>
<% end %>
- 変数名を「@」から始めることでこの変数は特殊な変数となり、ビューファイルでも使用することができる
- アクションで定義したビュー用の変数には「@」をつけ忘れないように注意
データベースを用意する
カラムやレコード、テーブルなど仕組みはSQLと一緒。
投稿を保存するための「postsテーブル」を作成してみる
まずは、マイグレーションファイルと呼ばれる、データベースに変更を指示するためのファイルを作成する。
【マイグレーションファイルの作成方法】
《ターミナル》
$ rails g model Post content:text ：カラム名 ：データ名
- マイグレーションファイルは上記のコマンドで作成できる
- 「Postsテーブル」を作成するときは、「Post」と単数形にする
- 「text」は「長い文字列」を意味しており、contentカラムにどのようなデータが入るかを意味している
- 上記のコマンドを実行すると、db/migrateフォルダの下にマイグレーションファイルが作成される
STEP１で作成したマイグレーションファイルを使って、データベースに変更を反映していく。
方法は、ターミナルで以下のコマンドを実行するだけ。
《ターミナル》
$ rails db:migrate
- 上記のコマンドで自動生成されたテーブルには、指示した content 以外にも id, created_at, updated_atという3つのカラムが自動で追加される
Railsでは、データベースに反映されていないマイグレーションファイルが存在する状態で、どこかのページにアクセスすると以下のようなマイグレーションエラーが発生する。
そのため、マイグレーションファイルを作成した場合は必ず「rails db:migrate」を実行する必要がある。
データベースを使用する
テーブルを操作するためのモデルと呼ばれる特殊なクラス（設計図）を用いて、データベースを使う。
rails g model」コマンドでposts テーブルを操作するための Post モデルがすでに生成されている。
Postモデル
「rails g model」コマンドによって、Postモデルが定義されたファイル「post.rb」が、app/modelsフォルダの中に作成されている。
【post.rbの中身】
class Post < ApplicationRecords
end
- 「Post」は単数形 は継承するクラス
- ファイルの中には、上記のようにApplicationRecordクラスを継承するPostクラスが定義されている
- このようにApplicationRecordを継承したクラスをモデルと呼ぶ
rails g modelコマンドまとめ
【モデル・マイグレーションの作成】
《ターミナル》
＄ rails g model Post content:text
モデル名 カラム名 データ型
「Post」の部分にはモデル名を指定している
このコマンドによって、以下の2つのファイルが作成される
- app/modelsフォルダにモデルが定義されたファイル
- db/migrateフォルダにマイグレーションファイル
テーブルに投稿内容を保存する rails console
rails consoleの使い方
ターミナル上で「rails console」と入力し実行（Enter）することで、コンソールを起動することができる。
コンソールを起動した状態で、「1+1」を実行すると、その実行結果が表示される。
「quit」を実行すると、コンソールを終了できる
テーブルに投稿データを保存する
《ターミナル》
＄ rails console
post = Post.new(content: “NewWorld”)
- 上記のように書くと、contentが「Hello world」であるPostインスタンスを作成できる
- リスト
《ターミナル》
＄ rails console
post = Post.new(content: “NewWorld”)
post.save → Postインスタンスをテーブルに保存
- saveメソッドを使うことができるのはPostモデルがApplicationRecordを継承しているため
テーブルからデータを取得する
テーブルから1つのデータを取り出す
post = Post.firstでposts テーブルにある最初のデータを取得することができる。
contentカラムの値を取り出す
「post.content」とすることで「Post.first」で取得したデータから投稿内容を取得することができる
全ての投稿を取り出す
posts = Post.allを使う。
Post.all」では、テーブルにある全てのデータが配列で取得できる。
投稿の配列から１つのデータを取り出す
Post.all [0] のように、インデックス番号で1つの要素を取得できる
配列のデータから投稿内容を取り出す
Post.all[0].content とすることで、投稿内容を取得することができる。
データをビューに表示する
全てのデータを表示する
《コントローラ》
def index
@posts = Post.all ← 投稿の全てのデータを取得
end
《ビュー（html）》
<% @posts.each do |post| %> ← postsコントローラのindexアクション内の@postsに、
<div class=”posts-index-item”> Post.allで取得したデータを代入
<%= post.content %>
</div>
<% end %>
- ビューでは@postsに代入されている配列データをeach文で1つずつ変数postに代入し、投稿内容を繰り返し表示させる
ヘッダーに投稿一覧のリンクを追加する
共通のレイアウトをまとめる
Railsでは、「views/layouts/application.html.erb」に共通のHTMLを書いておくことができる。
初期状態でも、<head>タグや<body>タグなどの共通部分はここに書かれている。
ここの＜body＞の中にヘッダー＜header＞を追加し、どのページでも共通のヘッダーが表示されるようにする。
《views/layouts/application.html.erb》
<!DOCTYPE html>
<html>
<body>
<header> ← サイト全体に表示される共通レイアウト
</header>
<%= yield %>
</body>
- top.html.erbなどの各ビューファイルは、この<%= yield %>の部分に代入され、application.html.erbの一部としてブラウザに表示されている
投稿一覧ページへのリンクを追加する link_toメソッド
Rails ではlink_toというメソッドを使うと<a>タグを作成することができる
注意！！link_to メソッドは Ruby のコードなので、「<%=%>」で囲む
《application.html.erb》
<%. link_to(“About”,“/about”) %> 第一引数：表示する文字を書く 第二引数：URLを書く
↓ 以下のaタグへ変換される
《application.html》
<a helf=“/about”>About</a>
- 第二引数の入力時に、「/」を忘れない
- 第一引数と第二引数は「，」で区切る
コメント