LoginSignup
2
2

More than 5 years have passed since last update.

Ruby on Rails Twitterライクなアプリ作成の流れ(其の一)

Posted at

初めての投稿なので分かりにくい部分も多いと思いますが自分用のに
こういう書き方をした方が良いという書き方あったら教えてもらえると助かります。
Progateで学んだツイッターライクなアプリ作成方法をメモっています。

1.コマンドプロンプト(以降コマプロ)にてrails new tweet_app(tweet_appのところは自分の作りたいアプリの名前でOK)

2.トップページの作成
コマプロにて rails generate controller home top(rails g controller コントローラー名 アクション名)
config/routes.rbにget "home/top" => "home#top"が追加されていることを確認
controller/home_controller.rbにtopアクションが追加されていることを確認
views/home/top.html.erbにトップページのHTMLを記述
assets/stylesheetsフォルダ→home.scssにhomeで使うCSSを記述

3.localhost:3000にアクセスしたときにトップページが表示されるようにルーティングを変更
routes.rbのget "home/top" => "home#top"をget "/" => "home#top"に変更

4.サービス紹介ページなどhome内での別ページの作成
a).routes.rbにルーティングの追加 get "/about" => "home#about"
get "URL" => "コントローラー名#アクション名
b).home_controller.rbにアクション追加
def about
end
c).app/views/homeフォルダで右クリック
about(←アクション名).html.erbというファイル名で新規ファイルを作成
HTMLを記述する

5.ヘッダーなどの作成
どのページでも表示したい共通のものは「views/layouts/application.html.erb」内の <%= yield %>の上に記述
リンクはlink_toメソッドを使用
<%= link_to("リンクタイトル", "URL") %>


<%= link_to("MotioApp", "/") %>

6.投稿機能のために、Postモデルとpostsテーブルを作成
a).コマプロにてrails generate model Post content:text
rails g model テーブル名(単数形) カラム名:データ型
b).データベースに変更を反映
コマプロにてrails db:migrate
注意点
テーブル名は単数形にすることに注意しましょう!
データベースに反映していないマイグレーションファイルが存在するとブラウ ザでエラーとなってしまいます!
ブラウザでエラーが出ている場合はrails db:migrateを実行してみましょう!
c).rails consoleにてデーブルにデータが保存できるか確認
テーブルにデータを保存する
コマプロにてrails new(Enter)
post = Post.new(content="Ruby on Railsの勉強頑張るぞ")(Enter)
post.save(Enter)
以下の2ステップで、テーブルにデータを保存することができる
モデルのインスタンスを作成
saveメソッドを用いて、作成したインスタンスを保存
# newメソッドでインスタンスを作成する
post = Post.new(引数)

# saveメソッドで作成したインスタンスを保存
post.save

7.投稿一覧ページの作成
a).投稿に関することなので新たにpostsコントローラーを作成する
コマプロにてrails generate controller posts index
一覧ページを作成する時は、indexというアクション名を使用することが一般的 なの で、indexアクションを用意。
b).app/controllers/posts_controller.rbのindexアクション内にて
データベースのデータを全て取得する
データベースのデータを全て取得するためにはallメソッドを使う。
モデル名.all
例) Post.all
投稿日時が新しい投稿データを上から順に表示する
orderメソッド
orderメソッドの引数はキーワード引数として指定します。 引数名には基準と な るカラム名を指定し、値に:asc(昇順)または:desc(降順)を指定します。
order(カラム名: :値)

# メソッドは繋げて実行することができます
Post.all.order(カラム名: :値)
以下の例ではcreated_atが新しい順に並ぶようになります。
Post.all.order(created_at: :desc)

c).app/views/posts/index.html.erbに投稿一覧ページのHTMLを記述
例)



<% @posts.each do |post| %>

<%= post.content %>

<% end %>


d).app/stylesheets/posts.scssの中にCSSを記述
e).views/layouts/application.html.erbに投稿詳細ページへのリンクを記述
<%= link_to("投稿一覧", "/posts/index") %>

8.投稿詳細ページの作成
a).ルーティングの追加
投稿詳細ページのルーティング
「/posts/1」,「/posts/2」のように異なるURLを1つのルーティングで定義するため には、posts/:idのようにします。
コロン( : )を忘れないようにしましょう!
コロン( : )を忘れてしまうと、通常のルーティングとして、「localhost:3000/posts/id」でしかアクセスできなくなってしまいます!
投稿詳細ページへのルーティングはget "posts/index" => "posts#index"よりも下に書くことに注意しましょう!
b).アクションの追加
def show(←アクション名)
end
find_byメソッド
find_byメソッドの引数は、newメソッドの引数のようにハッシュで指定します。
find_by(カラム名: 値)
変数params
変数paramsはハッシュと同じ形式をしており、キーで値を取得することができます。
params[:キー]
=> 値

def show
@post = Post.find_by(id: params[:id])
end
c).ビューファイルの作成
app/views/postsフォルダで右クリック
アクション名.html.erbというファイル名で新規ファイルを作成
HTMLを記述
@postをshow.html.erbで表示することで、各URLに対応した投稿のデータが表示されるようにする。





<%= @post.content %>



<%= @post.created_at %>




d).投稿一覧ページから投稿詳細ページへのリンクを記述


<% @posts.each do |post| %>

<%= link_to(post.content, "/posts/#{post.id}") %>

<% end %>

---其の一終了---

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2