【コア機能】app/views/deliveries/new.html.erb作成・コース選択画面

Posted at 2025-11-06

前章でログイン画面のビュー作成まで行いました。
従業員コードを入力し、ログインボタンを押しても
次の画面がまだ存在していないため、特に何の変化も起こりませんでした。
今回はその”次の画面”であるapp/views/deliveries/new.html.erbを作成します。

1.ファイル作成

app/views/deliveriesに直接ファイルを新規作成し、
new.html.erbと命名する。

2.app/views/deliveries/new.html.erb編集

まずはログインが成功したか確認用

<h1>Course</h1>
<p>ログイン成功！コース選択ページです。</p>

<%= link_to "ログアウト", logout_path, data: { turbo_method: :delete } %>

<%= link_to "ログアウト", logout_path, data: { turbo_method: :delete } %>
→ログアウト機能でいつも使用される一文。覚えてしまう。
Rails 7 以降では Hotwire / Turbo という仕組みがあり、
内部的にJavaScriptがDELETEリクエストに変換して送ってくれる。

3.ルーティング設定

routes.rbに以下の一文を追加。

  resources :deliveries, only: [:new] #コース選択画面のルーティング

これをRailsが読んで自動で以下の様にメソッドとパスを作成してくれます。

HTTPメソッド	パス	コントローラー#アクション	ヘルパー名
GET	/deliveries/new	deliveries#new	new_delivery_path

routes.rb完成系

Rails.application.routes.draw do
  root to: 'sessions#new' #ホーム画面をログイン画面に設定

  get 'login', to: 'sessions#new'  #ログイン画面（表示）
  post 'login', to: 'sessions#create'  #ログイン処理（フォーム送信）
  delete 'logout', to: 'sessions#destroy'  #ログアウト処理

  resources :deliveries, only: [:new] #コース選択画面のルーティング
end

resource :session, only: [:new, :create, :destroy]

4.動作確認

↓

成功しました♪
次はここにコース選択を増やします。

5.ビューにコース選択追加

コースを選択するプルダウンの実装箇所

<%= form_with url: deliveries_path, method: :post, local: true do |form| %>
  <div>
    <%= form.collection_select :course_id, Course.all, :id, :name, prompt: "コースを選択" %>
  </div>
<% end %>

<%= form_with url: deliveries_path, method: :post, local: true do |form| %>
→フォームを作成して、入力内容を /deliveries に POST送信する。
form_with url: deliveries_path,
→送信先URLを /deliveries に設定
method: :post,
→HTTPメソッドを POST に指定（DBへ新しいデータを送る時に使用）
local: true
→JavaScript（Turbo/Hotwire）を使わずに普通のフォーム送信。
Rails7のHTMLをTurbo Frameで差し替えようとする挙動が難しく一旦無視したいので、無効化しています。

collection_select
→プルダウン作成

6.routes.rb編集

[3.ルーティング設定]で追記した一文に[:create]を追加

  resources :deliveries, only: [:new, :create] #コース選択画面のルーティング

newは画面を表示させるだけの機能で、処理が行えない。
今回はDBに新しく登録をし、配達登録を開始させたいので[:create]を追加しています。

アクション	何をする？	なぜ必要？
`new`	フォームを見せるだけ	画面を表示するため（DB操作はない）
`create`	フォーム送信後に処理を行う	DBに新しいデータを登録するため