見出し画像
Photo by momoro66

PicTweet ツイートを表示

SyosenPS

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

この記事が気に入ったらサポートをしてみませんか？