railsで掲示板作成

ソースコードはこちら
https://github.com/okuyama-code/rails-keijiban
教材はこちら
https://www.youtube.com/watch?v=CfdRXSrwLDo

コード説明

class PostsController < ApplicationController
  # `before_action` メソッドを使って、特定のアクションが実行される前に `set_post` メソッドを呼び出します。
  # `:edit`, `:update`, `:destroy` アクションに対してのみ適用されます。
  # これにより、コードの重複を防ぎ、共通の処理を実行できます。
  before_action :set_post, only: [:edit, :update, :destroy]

  # 記事一覧を表示するアクション
  def index
    # `Post` モデルから全ての記事を取得して、`@posts` 変数に代入します。
    @posts = Post.all
  end

  # 新しい記事を作成するフォームを表示するアクション
  def new
    # 空の `Post` オブジェクトを作成して、`@post` 変数に代入します。
    @post = Post.new
  end

  # 新しい記事を作成するアクション
  def create
    # フォームから送信されたデータを使って新しい `Post` オブジェクトを作成します。
    @post = Post.new(post_params)

    # 記事を保存できた場合
    if @post.save
      # 記事一覧ページにリダイレクトします。
      redirect_to posts_path
    else
      # 記事の保存に失敗した場合は、新規作成画面（new.html.erb）を再表示します。
      render :new
    end
  end

  # 記事の編集フォームを表示するアクション
  def edit
    # `before_action` メソッドにより、対象の記事が `@post` 変数にセットされています。
    # 編集画面では、この `@post` 変数を使ってフォームに記事の情報を表示します。
  end

  # 記事を更新するアクション
  def update
    # フォームから送信されたデータを使って、既存の記事を更新します。
    if @post.update(post_params)
      # 記事の更新が成功した場合は、記事一覧ページにリダイレクトします。
      redirect_to posts_path
    else
      # 記事の更新に失敗した場合は、編集画面（edit.html.erb）を再表示します。
      render :edit
    end
  end

  # 記事を削除するアクション
  def destroy
    # `before_action` メソッドにより、対象の記事が `@post` 変数にセットされています。
    # この変数を使って、記事を削除します。
    @post.destroy
    # 記事の削除が完了したら、記事一覧ページにリダイレクトします。
    redirect_to posts_path
  end

  private

  # Strong Parameters を使って、許可されたパラメータのみを取得します。
  def post_params
    params.require(:post).permit(:title, :content)
  end

  # `before_action` メソッドにより、特定のアクションが実行される前に呼び出されます。
  # `:edit`, `:update`, `:destroy` アクションに対して適用されています。
  # 対象の記事を取得して、`@post` 変数にセットします。
  def set_post
    @post = Post.find(params[:id])
  end
end

以下に、掲示板の表示と投稿の作成、編集、削除に関するビューファイル（index.html.erb）のコードを示します。それぞれのコード行には、コメントを追加しています。

<h1>Rails 入門 掲示板</h1>

<div class="button-container">
  <!-- "新しい投稿" ボタンを表示し、新規投稿ページへのリンクを作成します -->
  <%= link_to "新しい投稿", new_post_path, class: "link-button" %>
</div>

<ul>
  <!-- @posts 変数から取得した各記事に対してループ処理を行います -->
  <% @posts.each do |post| %>
    <li>
      <!-- 記事のタイトルを表示します -->
      <h2><%= post.title %></h2>
      <!-- 記事の内容を表示します -->
      <p><%= post.content %></p>
      <!-- 記事の作成日時を表示します -->
      <span>
        <small><%= post.created_at %></small>
      </span>
      <div class="edit-delete-wrapper" >
        <!-- 編集ボタンを表示し、対応する記事の編集ページへのリンクを作成します -->
        <%= link_to "編集", edit_post_path(post), class: "link-button" %>
        <!-- 削除ボタンを表示し、対応する記事を削除するためのフォームを作成します -->
        <%= button_to "削除", post_path(post), method: :delete, class: "link-delete-button" %>
      </div>
    </li>
  <% end %>
</ul>

このビューファイルでは、掲示板のタイトル、新規投稿ボタン、記事の一覧表示、編集ボタン、削除ボタンなどが含まれています。コメントを通じて、各コード行の目的や機能が詳細に説明されています。

このコードを参考にして、Railsアプリケーションのビューファイル（index.html.erb）を作成し、掲示板の表示や投稿の作成、編集、削除などの機能を実装することができます。もしご質問や疑問がありましたら、どうぞお気軽にお聞きください。

<h1>投稿編集</h1>

<%= form_with model: @post, html: { class: "form-container" } do |form| %>
  <!-- フォームの開始 -->
  <div class="form-input">
    <!-- タイトルのラベルとテキストフィールドを表示 -->
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>
  <div class="form-input">
    <!-- 内容のラベルとテキストエリアを表示 -->
    <%= form.label :content %>
    <%= form.text_area :content %>
  </div>
  <div class="button-container">
    <!-- 更新ボタンを表示 -->
    <%= form.submit "更新", class: "link-button" %>
  </div>
<% end %>

<h1>新しい投稿</h1>

<%= form_with model: @post, html: { class: "form-container" } do |form| %>
  <!-- フォームの開始 -->
  <div class="form-input">
    <!-- タイトルのラベルとテキストフィールドを表示 -->
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>
  <div class="form-input">
    <!-- 内容のラベルとテキストエリアを表示 -->
    <%= form.label :content %>
    <%= form.text_area :content %>
  </div>
  <div class="button-container">
    <!-- 投稿ボタンを表示 -->
    <%= form.submit "投稿", class: "link-button" %>
  </div>
<% end %>

Rails.application.routes.draw do
 Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  # locallhost:3000/posts
  # index: 一覧表示、new: 新規投稿フォーム表示、create: 投稿作成、edit: 編集フォーム表示、update: 投稿更新、destroy: 投稿削除
  resources :posts, only: [:index, :new, :create, :edit, :update, :destroy]
end

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}

small {
  color: gray;
}

h1 {
  color: #343a40;
  text-align: center;
  padding: 20px 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 30%;
  margin-top: 30px;
}

ul li {
  background-color: #fff;
  border: 1px solid #ced4da;
  margin-bottom: 10px;
  padding: 20px;
}

ul li h2 {
  margin: 0 0 10px 0;
  color: #495057;
}

ul li p {
  color: #212529;
  margin: 0;
}

.button-container {
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  margin: auto;
  margin-top: 50px;
}

.form-input {
  margin-bottom: 20px;
  width: 100%;
}

.form-input input,
.form-input textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.link-button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.link-delete-button {
  display: inline-block;
  background-color: #cc361f;
  font-size: 17px;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  margin-left: 10px;
  border: 1px solid;
  cursor: pointer;
}

.edit-delete-wrapper {
  display: flex;
  margin-top: 10px;
}