投稿機能を作ってみよう

投稿機能は２段階に分けて解説していきます。
少し難しくなってきますが頑張ってください。
まずは投稿画面(new)の処理を作成していきましょう。

図1 遷移図

まずはルーティングを設定していきましょう

newアクションの行き先を指定します。

Rails.application.routes.draw do
  get 'posts', to: 'posts#index'
  get 'posts/new', to: 'posts#new' #newアクションのルーティング設定
end

rails routesコマンドを実行してルーティングを確認しましょう

newアクションのルーティングが設定されました。

次にコントローラーのアクションを定義しましょう。
ページを表示するだけなので中身は必要ありません。

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

  def new  #newアクションを定義
  end
end

次はビューファイルを作っていきましょう。

ヘルパーメソッド

Railsではフォームを作る時にヘルパーメソッドを使い作っていきます。
主にビューでHTMLタグを出現させたりテキストを加工するために使用するメソッドで複数あります。

ヘルパーメソッドを使う利点は主に以下の2つになります。
①パスの指定やRubyの埋め込みなどの記述がシンプルになる
②セキュリティ上の問題を解消するため

今回使う2つのメソッドについて紹介します。

form_withメソッド

フォームを実装するためのヘルパーメソッドでHTMLのformタグの代わりに使用できます。

<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <%= form.text_field :comment %>
  <%= form.submit '投稿する' %>
<% end %>

form_with~doまでの記述はオプションと呼ばれるもので設定が書かれています。

do~endまでの記述はビューファイルに表示されるものを表していて
記述することで部品を追加できます。

この中ではsubmitをのぞいて引数にはname属性に当たる名前が入ります。
name属性の値がデータを扱う時のキーになります。

エディタを開きapp/views/postsディレクトリにnew.html.erbファイルを作ってください。
そして以下のコードを貼り付けてください。

<h1>新規投稿ページ</h1>
<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <%= form.text_field :comment %>
  <%= form.submit '投稿する' %>
<% end %>

では次はトップページから投稿ページにアクセスする処理を作っていきます

link_toメソッド

リンクを作成するためのヘルパーメソッドでHTMLのaタグの代わりに使用できます。

<%= link_to 'リンクに表示する文字', 'パス', method: :HTTPメソッド %>

リンクに表示する文字は今回は新規投稿
今回表示したいのはnewの画面なので post#newの隣の/posts/newというパスを入力します。
そしてHTTPメソッドはVerbのところのgetになります。

<%= link_to '新規投稿', '/posts/new', method: :GET %>

このコードをトップページのビューであるapp/views/posts/index.html.erbに記入しましょう。

そしてhttp://localhost:3000/postsにアクセスし

新規投稿のリンクをクリックすると以下のページに遷移すれば成功です

次回はデータを作って保存する処理をやっていきましょう。