「Railsでブログ機能を作ってみたいけれど、どこから始めればいいのか分からない」
そのようにお悩みではありませんか?
本記事では、Rails初心者の方が基本からブログ機能を実装できるようになるための方法を、実例付きで7つご紹介いたします。
記事一覧の表示や新規投稿、コメント機能の追加まで、よく使われる機能を順番に解説しています。
「まずは簡単なブログを自分の手で作ってみたい」という方に、ぴったりの内容となっております。
ぜひ最後までお読みいただき、ご自身のRails学習にお役立てください。
目次
1. 記事の一覧を表示する
ブログにおいて、記事の一覧を見せる機能はとても重要です。
なぜなら、読者はどんな記事があるのかをまず確認したいからです。記事が並んでいなければ、興味のある内容を探すのが難しくなります。
Railsでは以下のような手順で実装できます。
- 記事(Post)モデルを作成する
- 投稿データをデータベースからすべて取り出す(
Post.all
) - 一覧ページ(
index.html.erb
)で取り出した記事を順番に表示する - 表示の際には、タイトルと投稿日を見せるとわかりやすい
たとえば、記事を新しい順で並べるには Post.order(created_at: :desc)
を使います。
コード例:
# posts_controller.rb
def index
@posts = Post.order(created_at: :desc)
end
<!-- index.html.erb -->
<h1>記事一覧</h1>
<% @posts.each do |post| %>
<div>
<h2><%= link_to post.title, post_path(post) %></h2>
<p><%= post.created_at.strftime('%Y年%m月%d日') %></p>
</div>
<% end %
画面イメージ:
画面の上には「記事一覧」と大きな文字があり、その下に
- 記事のタイトル(リンク付き)
- 投稿日
が、新しいものから順に並びます。
このように一覧表示を整えることで、読者が読みたい記事をすぐに見つけられるようになります。
2. 記事の詳細ページを作る
記事の中身を読めるようにするには、詳細ページが欠かせません。
一覧ページだけでは記事のタイトルしか分かりません。本文を読むには、1つの記事をきちんと表示する画面が必要になります。
Railsでは以下の流れで作成します。
- コントローラで
show
アクションを用意する - URLに記事の番号(ID)を含めてページにアクセスできるようにする
- ページ内でその記事のタイトルと本文を表示する
- 必要であれば、作成日や更新日、カテゴリーも表示する
たとえば、@post = Post.find(params[:id])
で特定の記事を探せます。
コード例:
# posts_controller.rb
def show
@post = Post.find(params[:id])
end
<!-- show.html.erb -->
<h1><%= @post.title %></h1>
<p><%= @post.created_at.strftime('%Y年%m月%d日') %></p>
<div>
<%= simple_format(@post.body) %>
</div>
画面イメージ:
画面の上に記事タイトル、その下に日付、そのさらに下に記事の本文が表示されます。読みやすく、ふりがな付きでも工夫できます。
このようにして、読者が記事をしっかり読めるようにしましょう。
3. 新しい記事を作成できるようにする
管理者が記事を追加できる機能があると、ブログは育っていきます。
記事を書けなければ、ブログの内容が古いままで止まってしまいます。新しい情報を発信できるようにすることはとても大切です。
Railsで記事の作成機能をつけるには、以下の作業が必要です。
- 投稿ページ(
new.html.erb
)を作る - 入力用のフォームを用意する(
form_with model: @post
など) - コントローラの
create
アクションで内容を保存する - 保存後、一覧や詳細ページに移動できるようにする
フォームでは、タイトルと本文を最低限入力できるようにすると良いでしょう。
コード例:
# posts_controller.rb
def new
@post = Post.new
end
def create
@post = Post.new(post_params)
if @post.save
redirect_to @post
else
render :new, status: :unprocessable_entity
end
end
private
def post_params
params.require(:post).permit(:title, :body)
end
<!-- new.html.erb -->
<h1>新しい記事を作る</h1>
<%= form_with model: @post do |form| %>
<p>タイトル:<br><%= form.text_field :title %></p>
<p>本文:<br><%= form.text_area :body %></p>
<%= f.submit '投稿する' %>
<% end %>
画面イメージ:
タイトルと本文を入力する枠があり、一番下に「投稿する」ボタンがあります。ボタンを押すと記事が保存されます。
このように記事作成機能をつければ、情報をどんどん増やすことができます。
4. 記事を編集・削除する機能をつける
投稿後の記事も、あとから直したり消したりできるようにしましょう。
記事を書いたあとに誤字に気づいたり、内容を変えたくなることはよくあります。また、もう公開したくない記事を削除する必要も出てきます。
Railsでこの機能を作るには次のような手順です。
- 編集ページ(
edit.html.erb
)と削除ボタンを用意する - 編集には
update
アクション、削除にはdestroy
アクションを使う - 入力された内容で記事を上書きする(
@post.update(post_params)
など) - 削除するときは
@post.destroy
を呼び出す
ボタンを押すときに確認のメッセージを表示すると、誤操作を防げます。
コード例:
# posts_controller.rb
def edit
@post = Post.find(params[:id])
end
def update
@post = Post.find(params[:id])
if @post.update(post_params)
redirect_to @post
else
render :edit, status: :unprocessable_entity
end
end
def destroy
@post = Post.find(params[:id])
@post.destroy
redirect_to posts_path
end
<!-- show.html.erb に追加 -->
<%= link_to '編集', edit_post_path(@post) %> |
<%= button_to '削除', @post, method: :delete, data: { turbo_confirm: '本当に削除しますか?' } %>
画面イメージ:
記事詳細ページの下に「編集」「削除」のリンクがあり、「削除」を押すと「本当に削除しますか?」という確認が出ます。
このような管理機能をつけると、使いやすいブログになります。
5. カテゴリーで記事を分ける
記事を種類ごとに分けると、読者が内容を探しやすくなります。
料理・旅行・日記など、テーマ別に記事を見たいと思う人は多いです。カテゴリーがあると、興味のある分野だけ読むことができます。
Railsでカテゴリー機能をつけるには以下のようにします。
- カテゴリ(Category)モデルを作る
- 記事とカテゴリをつなげる(
belongs_to
やhas_many
を使う) - 投稿時にカテゴリを選べるようにする
- カテゴリ別の一覧ページを用意する
たとえば、@category.posts
でそのカテゴリに属する記事を表示できます。
コード例:
# category.rb
has_many :posts
# post.rb
belongs_to :category
<!-- new.html.erb に追加 -->
<p>カテゴリー:<br>
<%= form.collection_select :category_id, Category.all, :id, :name %>
</p>
画面イメージ:
記事作成ページに「カテゴリー」の選択欄があり、たとえば「日記」「旅行」「学校」などから選べます。選んだ内容が一覧や詳細で表示されます。
こうしてカテゴリーを導入することで、読み手の満足度を高めることができます。
6. コメント機能をつける
読者が感想を書けるようにすると、ブログがにぎやかになります。
「おもしろかった」「参考になった」などの声があると、書き手のやる気にもつながります。また、読者どうしの交流も生まれるかもしれません。
Railsでコメント機能をつけるには次のようにします。
- コメント(Comment)モデルを作る
- 記事とコメントをつなげる(
belongs_to
を使う) - 詳細ページにコメントを表示する
- 下にコメントを書くフォームをつける
コメント送信には非ログインでもできるようにしたり、名前を入力してもらうなどの工夫もできます。
コード例:
# comment.rb
belongs_to :post
# post.rb
has_many :comments
<!-- show.html.erb の下部に追加 -->
<h2>コメント</h2>
<% @post.comments.each do |comment| %>
<div>
<strong><%= comment.name %></strong>:<%= comment.content %>
</div>
<% end %>
<h3>コメントを書く</h3>
<%= form_with model: [@post, @post.comments.build] do |form| %>
<p>お名前:<br><%= form.text_field :name %></p>
<p>内容:<br><%= form.text_area :content %></p>
<%= form.submit '送信' %>
<% end %>
画面イメージ:
記事の下に読者の感想が並びます。その下に「名前」と「コメント内容」を書ける欄があり、「送信」ボタンで追加されます。
コメントを通じて読者とつながることができるのは、ブログの大きな魅力です。
7. 公開・非公開の切り替え機能をつける
記事を人に見せるかどうかを自由に選べると便利です。
まだ途中の記事を下書きにしておいたり、特定の人だけに見せたい場合があります。公開・非公開を切り替えられれば、安心して記事を管理できます。
Railsでは次のように実装します。
is_published
などの列を記事テーブルに追加する- 投稿画面で「公開するかどうか」を選べるようにする
- 一覧ページや詳細ページでは、公開中の記事だけを表示する(
where(is_published: true)
)
また、非公開記事でも管理者だけが見られるページを作ると便利です。
コード例:
# migrationで追加
add_column :posts, :is_published, :boolean, default: false
# posts_controller.rb (一覧表示)
@posts = Post.where(is_published: true)
<!-- new/edit.html.erb に追加 -->
<p>
公開する?<br>
<%= form.check_box :is_published %> はい
</p>
画面イメージ:
記事作成画面で「公開する?」というチェックボックスがあり、チェックを入れた記事だけが他の人に見えるようになります。
このように公開・非公開を切り替えることで、より安心してブログ運営ができます。
まとめ:さらにステップアップするために
ここまで、Railsでブログ機能を作る基本的な方法を7つご紹介してきました。
この内容を一通り実装できれば、ブログアプリの基礎はしっかり身についているはずです。
ただし、実際の開発では「もっと使いやすく」「もっと安全に」するために、コードの整理や機能の強化が必要になる場面が出てきます。
ここからは、次のステップとしておすすめの内容を3つご紹介いたします。
1. before_action
でコードをすっきりさせる
コントローラーで何度も同じようなコードを書いていると、後から見たときに分かりづらくなってしまいます。
そこで使いたいのがbefore_action
です。
before_action :set_post, only: [:show, :edit, :update, :destroy]
def set_post
@post = Post.find(params[:id])
end
このように書いておけば、対象のアクションですべて共通の準備ができ、コードの重複を減らせます。
2. フォームを部分テンプレートで共通化する
新規作成ページと編集ページでは、同じフォームを使うことが多いです。
そんなときは、_form.html.erb
という共通ファイルを作って、次のように読み込むのが便利です。
<%= render 'form', post: @post %>
こうすることで、将来フォームを修正するときも1ヶ所を直せば済みます。
3. 管理者だけが記事を登録できるようにする(Deviseの導入)
ブログの編集や投稿を特定の人だけに許可したい場合は、ログイン機能を追加する必要があります。
Railsではdevise
という便利な仕組みを使えば、簡単にユーザー登録やログインを作ることができます。
ログインしている人のみ投稿できるようにするには、例えばこんな条件分岐を加えます:
before_action :authenticate_user!, except: [:index, :show]
このように設定すれば、ログインしていない人が投稿ページにアクセスしようとしても、自動的にログインページに戻されます。
スポンサーリンク