![見出し画像](https://assets.st-note.com/production/uploads/images/142298459/rectangle_large_type_2_bbf35d6aaa13f8c07cadd0c8e70e5269.png?width=1200)
PicTweet ツイートを表示
PicTweetのツイート表示機能を実装!
いよいよ実装です
データを読み込む機能を実装すること
indexアクションを使用した、ページの新設を復習すること
遷移先に使用するrootパスを理解すること
モデルを作成
ターミナル
% rails g model tweet
→tweet.rbというモデルのファイルが作成された
テーブルを作成
マイグレーションを編集
db/migrate/20XXXXXXXXXXXX_create_tweets.rbファイルの
class CreateTweets < ActiveRecord::Migration[7.0]
def change
create_table :tweets do |t|
t.string :name ←ここ
t.string :text ←ここ
t.text :image ←ここ
t.timestamps
end
end
end
作成するカラムとその型を、changeというメソッドの中で指定します。
t.に続くのが「型」
:に続くのが「カラム名」
マイグレーションを実行
マイグレーションはテーブルの設計図を表すもの
ターミナル
% rails db:migrate
コンソールでデータを保存
コンソールを起動
ターミナル
% rails c
続けてターミナルのコンソール
[1] pry(main)> Tweet.create(name: "takashi", text: "Nice to meet you!")
[2] pry(main)> Tweet.create(name: "ishi", text: "Hello world!")
[3] pry(main)> Tweet.create(name: "yabe", text: "railsへようこそ!")
[4] pry(main)> exit
一行ずつ入力する
データが追加されたか確認
Sequel Pro起動して
投稿一覧表示機能の実装
次に、ルーティングの設定
このあと作成するコントローラーにはindexアクションを定義するため、routes.rbにtweetsコントローラーのindexアクションを実行するルーティングを設定
indexアクションのルーティングを設定
CRUDクラッド
アプリケーションのデータ取り扱いに関して、基本的な処理の頭文字を並べたも
アプリケーションの機能は、この4つの処理を組み合わせながら実装する
C(Create)生成
R(Read)読み取り
U(Update)更新
D(Delete)削除
CRUDを実現するためには、それぞれの処理を記述する
index一覧表示
show詳細表示
new生成
create保存
edit編集
update更新
destroy削除
resourcesリソーシーズメソッド
resourcesは、7つのアクションへのルーティングを自動生成するメソッド
resourcesの引数に、:tweets というシンボルを指定すると
/tweetsのパスに対応するルーティングが生成
onlyオンリーオプション
resourcesにオプションとしてonlyを加えると、指定したアクションのみのルーティングを自動生成
routes.rbを編集する
config/routes.rbファイルの
Rails.application.routes.draw do
resources :tweets, only: :index ←ここ
end
緑色のコメントは消しておくと見やすくなる
tweetsコントローラーを作成
ターミナル
% rails g controller tweets
間違った場合は、rails d controllerコマンド で削除
indexアクションをコントローラーに定義
tweets_controller.rbを編集
allメソッドを使用して、tweetsテーブルすべてのレコードをインスタンス変数に代入し、ビューに受け渡し
app/controllers/tweets_controller.rb ファイルで
class TweetsController < ApplicationController
def index ←ここ
@tweets = Tweet.all ←ここ
end ←ここ
end
@tweetsというインスタンス変数に、tweetsテーブルのレコードをすべて代入 ok
投稿一覧のビューを作成
以下のディレクトリ内にindex.html.erbを作成
app/views/tweets/index.html.erb ファイルに
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);"> <p>
<%= tweet.text %></p>
<span class="name">
<%= tweet.name %> </span>
</div>
<% end %>
</div>
pplication.html.erb
アプリケーション エイチティーエムエル イーアールビーファイル
Railsのレイアウトテンプレートに該当するファイル。レイアウトファイルとも呼ばれる。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Pictweet</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<header class="header">
<div class="header__bar row">
<h1 class="grid-6"><a href="/">PicTweet</a></h1> <div class="user_nav grid-6">
<a class="post" href="/tweets/new">投稿する</a>
</div>
</div>
</header>
<%= yield %>
<footer>
<p> Copyright PicTweet 2023.
</p>
</footer>
</body>
</html>
yieldイールドメソッド
レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッド
application.html.erbでは、body要素内に<%= yield %>の記述がありました。この記述があることで、「body要素内に各ビューファイルの記述が集約される」という仕組みができている
stylesheet_link_tagスタイルシート リンク タグメソッド
読み込むCSSファイルを指定できるヘルパーメソッド
読み込みたいCSSファイルをapp/assets/stylesheets/というディレクトリに配置し、stylesheet_link_tagメソッドの引数に読み込みたいCSSファイル名を記述
application.cssアプリケーション シーエスエスファイル
require_treeリクワイア ツリー
require_treeは、引数として与えられたディレクトリ以下のCSSファイルをアルファベット順にすべて読み込むという機能
app/assets/stylesheets/ディレクトリへstyle.cssへ配置
画像ファイルを配置
app
assets
images
arrow_top.png
のディレクトリに画像を保存する。
ルートパスの設定
config/routes.rb ファイルの
Rails.application.routes.draw do
root to: 'tweets#index' ←ここ
resources :tweets, only: :index
end
以下のURLにアクセスして確認!http://localhost:3000
この記事が気に入ったらサポートをしてみませんか?