1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Ruby on Rails 新規登録機能を実装する

Posted at

#一覧画面に新規登録リンクを追加する

一覧画面(app/views/tasks/index.html.slim)に、新規画面に移動するためのリンクを設置する

リンクの書き方
<%= link_to "表示したい文字列", root_path名 %>
<%= link_to ("表示したい文字列", "URL") %>
app/views/tasks/index.html.slim
h1 タスク一覧
#btnとbtn-primaryという2つのcssクラスを与えることでbootstrapがリンクをボタンのような外見にしてくれる。
#新規画面に移動するためのリンク
= link_to '新規登録', new_task_path, class: 'btn btn-primary'
              ↑                          ↑                                             ↑
                            ①                         ②                                           ③

①view上で表示されるリンクボタン(キャプション)
②リンク先のURL
③a要素につける属性などの指定(ここではcssクラスを指定)

・Slimテンプレートにおいて、イコールで始まる行は、Rubyのコードを実行してその結果を出力するという意味になる。
・「new_task_path」というのはURLヘルパーメソッドで、これを呼び出すことで”/tasks/new”というURL文字列が得られる。

#モデルの翻訳情報を追加する

・モデルの名前 ーーーTaskというモデルをアプリケーションでは「タスク」と呼ぶ。
・属性の名前 ———Taskのnameという属性をアプリケーションでは「名称」と呼ぶ。
・モデルの名前はactiverecordのmodelsの下に、属性の名前はactiverecordのattributesの下に定義する。

config/locales/ja.yml
ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
#ここから追加
    models:
      task: タスク
    attributes:
      task:
       id: ID
       name: 名称
       description: 詳しい説明
       created_at: 登録日時
       update_at: 更新日時
#ここまで

#新規登録画面のためのアクションを実装する

・app/controllers/tasks_controller.rbのnewアクションで新規登録画面の表示に必要な準備を行う。

app/controllers/tasks_controller.rb

def new
 #画面(登録フォーム)をスムーズに描画するために、新しいTaskオブジェクトを生成して、インスタンス変数@taskに代入する
   @task = Task.new
  end

・コントローラのインスタンス変数は、ビューからも見ることができる。アクションからビューに受け渡したいデータをインスタンス変数に入れることが、アクションの基本的な役割。

#アクティベータを送る「リクエストパラメータ」

・Webアプリケーションでは、リクエストにデータを添えることができる。このデータを「リクエストパラメータ」と呼ぶ。

・リクエストパラメータの送り方は、HTTPの仕組みの上で、2通りに別れる
①POSTで送る。基本的にはHTMLのform要素をsubmitすることで送られる。
②GETで送る。基本的にはURLの?以降に情報を含めることで送る。普通に?の付いたURLにブラウザからアクセスするほか、form要素のmethod属性にgetを指定して、form要素のsubmitを通じてそのようなリクエストを送ることもできる。

#新規登録画面のビューを実装する

・newアクションに対応するnewという画面に対応するファイルは、app/views/tasks/new.html.slim。このファイルはジェネレータによって作成されるのでそれを編集する。
・(@task)を利用して、登録フォームを表示する。

app/views/tasks/new.html.slim

h1 タスクの新規登録

.nav.justify-content-end 
  #一覧へのリンク
  = link_to '一覧', tasks_path, class: 'nav-link'

#form_withは、モデルオブジェクトを使ってHTMLの要素を作成するためのメソッド
= form_with model: @task, local: true do |f|
  #bootstrapで用意しているデザイン用の要素を配置
  .form-group
    #入力欄の名前を表示とラベル部分のクリックで対応する入力欄にフォーカスしてくれる役割がある。
    = f.label :name
    #入力欄を出力
    = f.text_field :name, class: 'form-control', id: 'task_name'
  .form-group
    #詳しい説明の入力欄の名前を出力
    = f.label :description
    #詳しい説明の入力欄を出力
    = f.text_area :description, rows: 5, class: 'form-control', id: 'task_description'
  #submitヘルパーを呼びだし、以下のようなsubmitボタンを表すHTMLが出力される。
  #<input type=“submit” name=“comit” value=“登録” class=“btn btn-primary” data-disable-with=“登録する”>
  = f.submit nil, class: 'btn btn-primary'

・モデルとフォームは、モデル属性がフォーム内のフィールドに対応するという面で構造が似ているため、form_withメソッドを使うと品質の良いコードを簡潔に描くことができる。
・モデルとフォームは、form_withにmodel: @taskという引数を渡すことで対応づける。

#登録アクションを実装する

app/controllers/tasks_controller.rb
  def create
    #taskパラメーターをtask_paramsメソッドで取得して、Taskオブジェクトを作成
    task = Tasks.new(task_params)
    #save!メソッドでデータベースに保存する
    task.save!
      #redirect_toメソッドで一覧画面(tasks_urlで指定している)に移動させる
      redirect_to tasks_url, notice: "タスク 「#{task.name}」を登録しました。"
  end

・ファイル後方に、task_paramsというプライベートメソッドを追加する

app/controllers/tasks_controller.rb
  private

  def task_params
    params.require(:task).permit(:name, :description)
  end
end

・requireメソッドはデータのオブジェクト名を定める
・permitメソッドで変更を加えられる(保存の処理ができる)キー(情報)を指定するという役割をする。
*ここでの変更を加えられるキーは「name(名前)」、「description(詳しい説明)」

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?