はじめに
前回は、ログイン状態に応じて表示を切り替えるヘッダーを作りました。
今回は、投稿機能に向けて以下の作業を行います。
- 投稿モデルの作成
- 投稿用ルーティングの設定
- 投稿フォームの作成
- 画像投稿機能の組み込み
これまでの記事はこちら👇
ポートフォリオ構築の振り返り（第1回：プロジェクト概要と設計）
ポートフォリオ構築の振り返り（第2回：Railsアプリ立ち上げ〜トップページ表示）
ポートフォリオ構築の振り返り（第3回：Deviseでログイン機能を実装）
ポートフォリオ構築の振り返り（第4回：ヘッダーの作成とログイン機能の実装）
1. 投稿モデル（Item）の作成
モデルとは？
モデルは、データの形を決める場所です。
「投稿」というデータをアプリに保存したい場合、タイトルや本文、画像などをどう保存するかをここで決めます。
作業手順
rails generate model Item title:string content:text user:references
rails db:migrate
-
title:string：投稿のタイトル -
content:text：投稿の本文 -
user:references：投稿とユーザーを紐付ける -
rails db:migrate：モデルで決めた内容をデータベースに反映
これで「投稿」というデータを保存する土台ができました。
2. 投稿用ルーティングの設定
ルーティングとは？
ルーティングは、URLとページの対応表です。
「このURLにアクセスしたらこのページを表示する」というルールを設定します。
resources :items, only: [:new, :create, :index, :show]
-
new→ 投稿フォーム -
create→ 投稿を保存 -
index→ 投稿一覧 -
show→ 投稿詳細
この設定で、投稿に必要な画面にアクセスできるようになります。
3. 投稿フォームの作成
app/views/items/new.html.erb に投稿フォームを作ります。
<h1>新しい投稿</h1>
<%= form_with model: @item, local: true do |f| %>
<div>
<%= f.label :title, "タイトル" %><br>
<%= f.text_field :title %>
</div>
<div>
<%= f.label :content, "本文" %><br>
<%= f.text_area :content %>
</div>
<div>
<%= f.submit "投稿する" %>
</div>
<% end %>
-
form_with model: @item：モデルに紐づいたフォーム -
f.label：入力欄のラベル -
f.text_field/f.text_area：入力欄（1行／複数行） -
f.submit：送信ボタン
このフォームで、タイトルと本文を入力して投稿できるようになりました。
4. 画像投稿フォームの作成（Active Storage）
Active Storageとは？
Active Storageは、Railsで画像やファイルを投稿に紐付けて保存・表示するための仕組みです。
導入手順
rails active_storage:install
rails db:migrate
モデルに画像を紐付け
app/models/item.rb に追記：
class Item < ApplicationRecord
belongs_to :user
has_one_attached :image
end
-
has_one_attached :imageで「Itemに1枚の画像を添付できる」設定
投稿フォームに画像欄を追加
<%= form_with model: @item, local: true do |f| %>
<div>
<%= f.label :title, "タイトル" %><br>
<%= f.text_field :title %>
</div>
<div>
<%= f.label :content, "本文" %><br>
<%= f.text_area :content %>
</div>
<div>
<%= f.label :image, "画像" %><br>
<%= f.file_field :image %>
</div>
<div>
<%= f.submit "投稿する" %>
</div>
<% end %>
-
f.file_field :imageを追加することで、画像ファイルをアップロード可能に - 投稿と一緒に画像が保存されるようになりました
まとめ
今回で、投稿機能の準備とフォーム作成、さらに画像投稿機能まで実装しました。
- 投稿モデル（Item）を作成してデータを保存する土台を準備
- 投稿用ルーティングを設定して各ページにアクセス可能に
- 投稿フォームを作り、タイトル・本文を入力できるように
- Active Storageを使って画像も添付できるフォームを作成
次回は、投稿一覧や詳細画面を作り、投稿機能を完成させる予定です。
ポートフォリオ構築の振り返り（第6回：投稿機能の作成）
用語説明
- モデル（Model）：データの形を決める場所。ここでは「投稿」というデータの構造を定義。
- ルーティング（Routing）：URLと画面を結びつける設定。どのURLにアクセスしたらどの画面を表示するかを決める。
- form_with：Railsのフォーム作成用ヘルパー。モデルに紐づけて入力内容を簡単にデータベースに保存できる。
- Active Storage：Rails標準の仕組みで、画像やファイルをモデルに紐付けて保存・表示できる。