ギークなエンジニアを目指す男

基幹系SIerがWeb系とかネイティブ系の知識を蓄えようとするブログ

MENU

ドットインストールで作るブログアプリその2(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
本日は7章からの部分です。

前回記事はこちら taxa-program.hatenablog.com

コントローラの作成

例のごとく下記コマンドで。

$ rails g controller Posts

コントローラでは複数のデータを扱うため、複数形にすることに注意です。

次に、どのURLにアクセスされた時に、コントローラのどのメソッドを実行するかを設定していきます。
(ちなみにこの設定はルーティンと呼ばれています)

myblog/config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :posts
end

設定できたら、下記コマンドでルートの確認をしてみましょう。

$ rails routes

するといくつかルートが設定されていることがわかります。

Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy

1行目はGETでアクセスしたらpostsコントローラのindexアクションを実行してね、というルートが設定されていることを意味しています。

次はコントローラにアクションを作成していきます。

Actionの作成

下記ファイルに定義していきます。

myblog/app/controller/posts_controller.rb

def index
    #全データを作成日の降順で取得
    @posts = Post.all.order(created_at: 'desc')
end

定義したら、indexアクションに対するビューを作成していきます。

ビューの作成

まずは、myblog/app/views/postsの中に下記ファイルを作成します。

index.html.erb

<h2>My Posts</h2>
<ul>
<!-- rubyの命令を埋め込む場合は<% %>で括る -->
<!-- <%= %>は中に記入したrubyの式を評価して表示してくれる -->
<!-- Actionで指定したインスタンス変数を使用することができる -->
<% @posts.each do |post| %>
<li><%= post.title %></li>
<% end %>
</ul>

今まで行った手順が基本となるので覚えておきましょう。

①コントローラに、モデルからデータを引っ張るためのアクションを実装する
②ビューにデータを埋め込む

rootパスの設定

今、上記で実装したページにアクセスするには
http://localhost:3000/posts
のURLを指定する必要がありましたが、
http://localhost:3000
でアクセスできるようにしていきます。

myblog/config/routes.rb

root 'posts#index'

この記述を加えてルーティングの確認をしてみると、

   Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy
     root GET    /                         posts#index

このように、rootパスにpostsのindexが設定されていることがわかります。

これでhttp://localhost:3000 にアクセスしてみると
記事の一覧が表示されると思います。

f:id:taxa_program:20171125144917p:plain

次回は画面のカスタマイズを行っていきます。