【Ruby】フォームの実装(ヘルパーメソッド/form_withメソッド/link_toメソッド)

まずはフォームを実装する前に、

そのフォームが実装されている新規投稿ページを作成する前に、

新規投稿ページに”アクセスする”部分から実装します。

 

少し前にルーティングの説明をした時に、

トップページ(indexアクション)へのルーティングを行いましたので、

同じような感じでやっていきます。

 

●ルーティングの設定

routes.rbに記載します。

 

get 'posts', to: 'posts#index'   ←トップページのルーティング

get 'posts/new', to 'posts#new'  ←こちら新規投稿ページ(newアクション)のルーティングです。

 

通訳すると、

get :表示して!

posts/new : 新規投稿ページのパスやで!ここへ行って!

posts/new : postsコントローラーのnewアクションの処理を実行して!

というております。

 

●アクションの定義

次は覚えてますか?

コントローラーのところで出てきました。

newアクションの定義をします。

つまりどんな処理を行うか記載します。

 

def new

end

 

え、終わり?

はい、newアクションは新規投稿ページを表示させるだけなので。

 

●ビューを作成

ようやく表示させる新規投稿ページを作成します。

new.html.erbというファイルを用意しましょう。

viewsディレクトリのコントローラー名ディレクトリの中に作ります。

 

これでnewアクションが定義されているので、

このnew.html.erbの中身が表示されます。

今はもちろん真っ白なページが表示されます。

 

そしてこれからフォームを作成していく中で、

Railsではヘルパーメソッドというものを使います。

これは主にビューでHTMLタグを出現させたり、

テキストを加工するためのものです。

Rubyとして扱われるので、<%=     %>で囲んで使用します。

 

今回はその中でも、

form_withメソッドlink_toメソッドを学びましょう。

 

form_withメソッド

HTMLで使用したformタグの代わりに使用できます。

 

文法はこちら。

 

<%=  form_with  url :  "/posts" ,  method :  : post ,  local : true  do  | form |  %>

   <%=  form. text_field  : content %>

   <%=  form. submit  '投稿する'  %>

<%  end  %>

 

はい、通訳しましょう。

まずdoからendまでの間がフォームの記述です。

こんなフォームにしてねって指示します。

 

まず一行目。

<%=  form_with  url :  "/posts" method :  : post ,  local : true  do  | form |  %>

 

url :  "/posts" → リクエストを送るパスを示してます。ここに行けえ!っていうてます。

 

method :  : post → これは送信するHTTPメソッドを指定してます。

ルーティングの設定でで保存の処理はPOSTに設定するので、 : postを使ってます。

初期値でもあるので省略可能です。

 

local : true →  

 

| form |  → ブロック変数ですね。このブロック変数とヘルパーメソッドを組み合わせることで、フォームを追加できます

 

そして2−3行目

まずブロック変数がしっかり使われてますね。

このための変数ちゃんです。

<%=  form. text_field  : content %> :contentを入力する1行のフォームだよ!

<%=  form. submit  '投稿する'  %>    :投稿すると書かれた送信ボタンだよ!

って指示してます。

 

ちなみに他にもヘルパーメソッドには

password_field

check_box (複数選択可)

radio_button (一つしか選択できない)

などがあります。

 

 

さあ、これで新規投稿のフォームの完成です!

じゃあこのページへどうやっていくのか?

さすがにトップページからいきたいよね?

 

ということでトップページにこの新規投稿ページのリンクを用意してあげます。

そこで使うのがこちら。

 

■link_toメソッド

これもHTMLの<a>タグの代わりに使用します。

トップページにリンクを作りたいのでindex.html.erbに記載しましょう。

 

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

 

form_withの時と順序が逆やないかい。パスが後なんかい!

なんでかはわからないけど、このまま覚えました。

これは通訳せずともわかりますね!

 

こんな感じで新規投稿ページの作成と、

トップページにおけるリンクの作成が完了しました!

 

次回は実際にフォームに入力したものを保存・表示させましょう。