投稿一覧ページ
データベースをHTMLに直接書く
投稿に関するページ
postsコントローラ
indexアクション名
コマンド
「rails generate controller posts index」は「rails g controller posts index」と省略可
作成された「views/posts/index.html.erb」に投稿一覧ページ用のHTMLを書いていく
「config/routes.rb」を開いて、
get "posts/index" => "posts#index"
というルーティング
「app/controllers/posts_controller.rb」を開いて、
indexアクションを持ったpostsコントローラ
「app/views/posts/index.html.erb」を開いて、ビューファイルが作成されている
HTMLファイルを張り付け
「app/assets/stylesheets/posts.scss」
CSS
/* posts/index ================================ */
.posts-index-item {
padding: 20px 30px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
}
.post-left img {
width: 50px;
height: 50px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
object-fit: cover;
}
.post-user-name a {
font-weight: 600;
}
.post-user-name a:hover {
color: #3ecdc6;
}
.post-left {
float: left;
width: 10%;
}
.post-right {
float: left;
width: 90%;
padding-left: 25px;
text-align: left;
}
/* posts/show ================================ */
.posts-show form {
display: inline;
}
.posts-show-item {
padding: 30px;
background-color: white;
box-shadow: 0 2px 6px #c1ced7;
overflow: hidden;
}
.posts-show-item img {
width: 60px;
height: 60px;
border-radius: 40%;
box-shadow: 0 2px 6px #c1ced7;
vertical-align: middle;
object-fit: cover;
}
.posts-show-item .post-user-name a {
vertical-align: middle;
font-size: 24px;
margin-left: 15px;
}
.posts-show-item p {
font-size: 24px;
margin: 20px 0;
}
.post-time {
color: #8899a6;
margin-bottom: 10px;
}
.post-menus {
float: right;
}
.post-menus a, .post-menus input {
color: #8899a6;
text-decoration: underline;
font-size: 14px;
}
/* posts/new ================================ */
.posts-new textarea {
font-size: 20px;
padding: 10px;
min-height: 140px;
border: 1px solid rgb(216, 218, 223);
resize: none;
}
.posts-new textarea::-webkit-input-placeholder {
font-size: 24px;
opacity: 0.5;
}
viewファイル内で変数を定義
index.html.erbのようなerbという形式のファイルでは、以下の図のように<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができます。
「erb」とは「Embedded Ruby（埋め込みRuby）」の略
埋め込むRubyコードをブラウザに表示したい場合には、以下の図のように
<% %>ではなく、<%= %>を用いま
<% %> 変数
<%= %> 表示
<% post1 = "今日からProgateでRailsの勉強するよー！" %>
<!-- ここに変数post2を定義して、指定された投稿内容を代入してください -->
<% post2 = "投稿一覧ページ作成中！" %>
each文で表示
<%
posts = [
"今日からProgateでRailsの勉強するよー！",
"投稿一覧ページ作成中！"
]
%>
アクションで変数を定義
Rails ではビューではなく、アクションで定義することが一般的
@変数
変数名を「@」から始めることでこの変数は特殊な変数となり、ビューファイルでも使用することができる
.rb ビューで使える変数
def index
@post1 = "にんじゃわんこ"
end
.erb アクションで定義した変数の呼び出し
<%= @post1 %>
データベースを用意
マイグレーションファイルと呼ばれる、データベースに変更を指示するためのファイルを作成
「rails g model Post content:text」というコマンドで作成する
generate Postsテーブル カラム名 データ型
db/migrateフォルダの下にマイグレーションファイルが作成
テーブルを用意
「rails db:migrate」を実行
マイグレーションファイルを作成した場合は必ず「rails db:migrate」を実行する必要がある
モデルを確認
テーブルを操作するためのモデルと呼ばれる特殊なクラス
「rails g model」コマンドでposts テーブルを操作するための Post モデルがすでに生成
「post.rb」が、app/modelsフォルダの中に作成されていま
・app/modelsフォルダにモデルが定義されたファイル
・db/migrateフォルダにマイグレーションファイル
rails consoleを使ってみよう
ターミナル上で「rails console」と入力し実行（Enter）することで、コンソールを起動することができます。コンソールを起動した状態で、「1+1」を実行すると、その実行結果が表示されます。
また、「quit」を実行すると、コンソールを終了することができる
テーブルに投稿データを保存しよう
posts テーブルにデータを追加するには右の図のように、
① new メソッドで Post モデルのインスタンスを作成
② posts テーブルに保存
newメソッド
saveメソッド
post1 = Post.new(content: " ")
post1.save
テーブルからデータを取り出そう
# テーブルから1つのデータを取り出す
「Post.first」とすることで、 posts テーブルにある最初のデータを取得する
contentカラムの値を取り出そう
「post.content」とすることで「Post.first」で取得したデータから投稿内容を取得することができる
テーブルから全てのデータを取り出そう
全ての投稿を取り出す posts = Post.all
投稿の配列から１つのデータを取り出す Post.all [0]
配列のデータから投稿内容を取り出す Post.all[0].content
データベースのデータを表示しよう
rails consoleのまとめ
データの作成 (new,save)
データの取得 (Post.all,post.content)
# 全ての投稿を表示する
class PostsController < ApplicationController
def index
@posts = Post.all
end
end
共通のレイアウトをまとめよう
Railsでは、「views/layouts/application.html.erb」に共通のHTMLを書いておくことができる
link_toメソッド
Rails ではlink_toというメソッドを使うと<a>タグを作成することができるぞ。 link_to メソッドは Ruby のコードなので、「<%=%>」で囲む
第一引数に表示する文字を、第二引数に URLを書くことでリンクが作成される
<!-- 以下のリンクをlink_toメソッドを用いて変更してください -->
<%= link_to("TweetApp","/") %>
-
<!-- 以下のリンクをlink_toメソッドを用いて変更してください -->
<%= link_to("TweetAppとは","/about") %>
-
<!-- ここにlink_toメソッドを用いて投稿一覧ページへのリンクを作成してください -->
<%= link_to("投稿一覧","/posts/index") %>
<%= yield %>