(cache)フォームを追加する【Ruby on Rails13】 - さらなる高みへ -higher ground -

ここでは、ユーザーがデータを投稿するためのビューの作成方法を学習する

投稿画面作成の流れ
フォームの作成方法

投稿画面作成の概要

これから投稿画面を追加するにあたって、作業の全体像を確認しておく。

7つのアクション（復習）

Railsを使ってウェブアプリを作る際は、機能を追加する時にコントローラーのどのアクションに追加するべきか、という考え方大事である。

もともと想定されている7つのアクションには、それぞれ実装すべき機能が決まっている。

アクション名	役割
index	リソースの一覧表示を行う
show	リソースの詳細表示を行う
new	リソースの新規登録画面を表示する
create	リソースの追加を行う
edit	リソースの編集画面を表示する
update	リソースの更新を行う
destroy	リソースの削除を行う

また、tweetsに関する投稿画面になるため、「tweetsコントローラーのnewアクション」を追加すればいいということになる。
この7つの中で、今回追加する投稿画面はどのアクションに当たるだろうか？

「リソースの新規登録画面を表示する」機能を足したいので、「new」アクションになる。

機能の追加時に行うこと

1つの機能を追加する時は、基本的に以下の手順が必要になる。

ルーティングを追加する
コントローラーのアクションを追加する
ビューを追加する

今回もこの順に作業を進めていきましょう。

ルーティングを追加する

前で見た通り、ユーザーが入力をした後にtweetsコントローラーのnewアクションが呼ばれるようにする必要がある。

そのためのルーティングを設定する。

ルーティングを編集する

config/routes.rb

Rails.application.routes.draw do
 get   'tweets'      =>  'tweets#index'     #ツイート一覧画面 
 get   'tweets/new'  =>  'tweets#new'       #ツイート投稿画面
end

続いてtweetsコントローラーにnewアクションを追加しましょう。

ルーティングの設定はシンプル。３行目の記述を追加すれば、ユーザーがブラウザのURL欄に「（アプリ名）/tweets/new」と入力した時に、tweetsコントローラーのnewアクションが呼び出されるようになる。

コントローラーのアクションを追加する

続いてtweetsコントローラーにnewアクションを追加する。

tweetsコントローラーを編集する

app/controllers/tweets_controller.rb

class TweetsController < ApplicationController

  def index
    @tweets = Tweet.all
  end

  def new
  end

end

7,8行目でnewアクションを追加しているが、中身は何もない。
これから新規投稿を行うので、newアクションが呼ばれた段階では特に処理が必要ないためである。

処理が必要ない場合、実はアクション自体を追加しなくても機能的には動く。
しかし、newアクションがないと新規登録画面を作成する機能が実装されているのかわかりにくいため、中身が空でもアクションを追加する。

投稿画面のビューを追加する

最後に、ユーザーが投稿できるようにビューを作成する。ここは少し複雑だが、Railsアプリでは大事な部分になるためしっかりと押さえておきたい。

フォームとは

Railsに限らず、HTMLでユーザーからの入力を受け取る仕組みとして「フォーム」がある。
Railsを使ってフォームを作成する際は、元のフォームをより使いやすく、またセキュリティに配慮されているヘルパーメソッドを使用する。

まず、HTMLのフォームとは何か確認する。

フォームは、ユーザーが入力したデータをサーバーに送信するための仕組みで、HTMLのタグの一種である。

HTMLを使ってフォームを作成する方法を見る。

大きく分けて2つの設定を行う。

上の図の青い部分で使用しているのがformタグである。
これは、フォーム全体の設定を行うタグで、入力されたデータをどこに送るかを設定する。

オレンジの部分は、<form>から</form>で囲まれている。
ユーザーからの入力を、どんな種類のパーツで受け取るかを指定するためのものである。
例えば<input type="text>はテキストボックスを表示できるし、<input type="submit">は送信ボタンになる。

また、textareaはタグの書き方が少し違うが、複数行の入力ができるテキストボックスを作成するためのタグである。

なお、フォームはあくまでも入力を受け取るための仕組みで、送信されたデータを保存するのはまた別になる。

form_tagとは

ここまでHTMLのフォームについて見てきた。
しかし、上で述べた通りRailsでは直接フォームは使わず、ヘルパーメソッドを利用する。
Railsにヘルパーメソッドがあらかじめ用意されており、それを使うことでよりシンプルに、またセキュリティの高いアプリにすることができる。

そのようなヘルパーメソッドはたくさんあるが、form_tagもその一つである。
これはHTMLのフォームに対応している。

実際に使ってみる。

投稿用のビューを追加する

app/views/tweetsフォルダに、「new.html.erb」という名前でファイルを追加する。

もしファイルの追加方法を忘れてしまった場合は以前の投稿で確認する。
これから何度もファイルの追加を行うため、操作方法を覚えてしまう。

form_tagを使ってみる

新規投稿の画面を、form_tagを使って書いてみる。

app/views/tweets/new.html.erb

<div class="contents row">
  <%= form_tag('/tweets', method: :post) do %>
    <h3>
      投稿する
    </h3>
    <input type="text" name="name" placeholder="Nickname">
    <input type="text" name="image" placeholder="Image Url">
    <textarea name="text" placeholder="text" rows="10" cols="30"></textarea>
    <input type="submit" value="SEND">
  <% end %>
</div>

基本的には、HTMLとform_tagでコードの書き方はほとんど一緒である。
２行目でformの代わりにform_tagを使っている。
また、10行目で</form>で閉じる代わりにendになっている。

他のinputなどのタグは同じ。

投稿画面を確認する

ここまでできたら、投稿画面が正しく作られているか確認してみる。
アプリを確認しているブラウザのURL欄に「（アプリ名）/tweets/new」を入力する。

このように表示されればうまくいっている。
次の章では、投稿された時にきちんと保存されるようコードを追加していく。

要点チェック

投稿画面の表示に使うのはnewアクション。form_tagはフォームを作成するためのヘルパーメソッド。