2. アプリケーションを用意しよう
railsでアプリケーションを作成するコマンドは rails new アプリケーション名 です。
サーバーを起動するためには、 rails server コマンドを実行してください。
rails new tweet_app
rails server
3. トップページを作ろう
railsで新規ページの作成を作成するときは
rails generate controller コントローラ名 アクション名 を実行します。
■ ターミナルで以下のコマンドを実行してください
rails g controller home top
4. URLを変更しよう
「localhost:3000」にアクセスしたときにトップページが表示されるようにしてください。
ヒント
ヒント
localhost:3000 にアクセスしたときにトップページが表示されるようにしたい場合は、ルーティングのURLの部分を/とします。
Rails.application.routes.draw do
get “/” => “home#top”
end
5. サービス紹介ページを作ろう
Rails.application.routes.draw do
get “/” => “home#top”
get “about” => “home#about”
end
class HomeController < ApplicationController def top end def about end end about.html.erb
TweetAppとは
SNSサービスです。
近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションできます。
6. ヘッダーを作ろう
ここでは、トップページとサービス紹介ページの両方にヘッダーを追加し、それぞれのページへのリンクを作成していきます。
まずは、ヘッダーを追加しましょう。
ヒント
共通部分を追加する場所は
views/layouts/application.html.erb
にあります
トップページとサービス紹介ページの両方で、
・「TweetApp」の部分をトップページへのリンクにしてください。
・「TweetAppとは」の部分をサービス紹介ページへのリンクにしてください。
ヒント
ヒント
link_to メソッドは以下のように記述します
<%= link_to("リンクタイトル", "URL") %>
application.html.erb
<%= yield %>
7. モデルとテーブルを作ろう
ここでは、投稿機能を追加するために、Postモデルとpostsテーブルを作成していきます。
コマンドを用いて、Postモデルとpostsテーブルを作成し、データベースに変更を反映してください。
※ ただし、postsテーブルには、text型のcontentカラムを持たせてください。
ヒント
以下のコマンドで、モデルとマイグレーションファイルを同時に作成することができます。
rails g model テーブル名（単数形） カラム名:データ型
マイグレーションファイルの内容をデータベースに反映させるためには、以下のコマンドを実行します。
rails db:migrate
Postモデルとpostsテーブルができたら、データベースに投稿データを保存してみましょう。
コンソールを用いて、好きな内容の投稿データをデータベースに保存してください。
ヒント
ターミナルで以下のコマンドを実行することで、コンソールを立ち上げることができます。
rails console
以下の方法で、テーブルにデータを保存することができます。
1. モデルのインスタンスを作成
2. saveメソッドを用いて、作成したインスタンスを保存
1. post = Post.new(引数)
2. post.save
データを追加し終わったら、 quit で終了しましょう。
データベースタブを開き、コンソールで入力した投稿データが保存されているか、確認してみましょう。
rails g model Post content:text
rails db:migrate
8. 投稿一覧ページを作ろう
https://prog-8.com/rails5/study/2/2#
「localhost:3000/posts/index」にアクセスした時に見本のような投稿一覧ページが表示されるようにしてください。
ヒント
データベースのデータを全て取得するためにはallメソッドを使います。
モデル名.all
例) Post.all
取得したデータの順番を設定するには、 order メソッドを追加します。
orderメソッドの引数はキーワード引数として指定します。
引数名には基準となるカラム名を指定し、値に :asc (昇順)または :desc (降順)を指定します。
order(カラム名: :値)
投稿一覧ページへのリンクを作成しましょう。
ヘッダーから投稿一覧ページにアクセスできるように、リンクを追加してください。
routes.rb
get “posts/index” => “posts#index”
posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all.order(created_at: :desc)
end
end
index.html.erb
<% end %>
application.html.erb
9. 投稿詳細ページを作ろう
https://prog-8.com/rails5/study/3/4#/9
https://prog-8.com/rails5/study/3/6#/14
https://prog-8.com/rails5/study/3/7#/16
・投稿詳細ページの中で、投稿の内容と投稿の作成時刻を表示してください。
※ 注意点
・ルーティングを書く順番に気をつけましょう。
ヒント
ヒント
「/posts/1」,「/posts/2」のように異なるURLを1つのルーティングで定義するためには、posts/:idのようにします。
カラム名を使って、データを取得するためにはfind_byメソッドを使います。引数は、newメソッドの引数のようにハッシュで指定します。
find_by(カラム名: 値)
変数paramsはハッシュと同じ形式をしており、キーで値を取得することができます。
params[:キー] => 値
最後に、投稿詳細ページへのリンクを作成しましょう。
投稿一覧に表示されている投稿の部分を、投稿詳細ページへのリンクにしてください。
routes.rb
Rails.application.routes.draw do
get “posts/index” => “posts#index”
get “posts/:id” => “posts#show”
posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all.order(created_at: :desc)
end
def show
@post = Post.find_by(id: params[:id])
end
end
show.html.erb
<%= @post.content %>
index.html.erb
<% end %>