Rails ChatAppの開発から学んだこと

Posted at 2025-01-14

📌 はじめに

Ruby on Railsを使用してチャットアプリケーションを開発した際の学びを共有します。特にユーザー管理機能の実装やビューの作成など、Web開発の基礎的な部分での気づきを中心にまとめています。

🔧 使用した技術スタック

Ruby on Rails 7.0
Ruby 3.1
PostgreSQL
Devise（ユーザー認証）
Bootstrap 5（フロントエンド）
JavaScript / jQuery

💡 主要な実装ポイント

1. ユーザー認証システム（Devise）

# app/models/user.rb
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  
  has_many :messages
  validates :username, presence: true, uniqueness: true
end

Deviseの基本的な使い方

ユーザー登録機能の実装
ログイン・ログアウト機能の追加
バリデーションの設定

class ApplicationController < ActionController::Base
  before_action :authenticate_user!
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:username])
  end
end

2. メッセージ機能の実装

# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def index
    @messages = Message.includes(:user).order(created_at: :desc)
    @message = Message.new
  end

  def create
    @message = current_user.messages.build(message_params)
    
    if @message.save
      redirect_to messages_path, notice: 'メッセージを送信しました'
    else
      @messages = Message.includes(:user).order(created_at: :desc)
      render :index
    end
  end

  private

  def message_params
    params.require(:message).permit(:content)
  end
end

3. ビューの実装（Bootstrap活用）

<%# app/views/messages/index.html.erb %>
<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="message-container">
        <%= render @messages %>
      </div>
      
      <%= form_with(model: @message, local: true, class: "message-form") do |f| %>
        <div class="form-group">
          <%= f.text_area :content, class: "form-control" %>
        </div>
        <%= f.submit "送信", class: "btn btn-primary" %>
      <% end %>
    </div>
  </div>
</div>

// app/assets/stylesheets/messages.scss
.message-container {
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  
  .username {
    font-weight: bold;
    color: #007bff;
  }
}

🚨 遭遇した課題と解決方法

1. N+1問題への対応

# 修正前
@messages = Message.all

# 修正後
@messages = Message.includes(:user).order(created_at: :desc)

2. バリデーションの実装

# app/models/message.rb
class Message < ApplicationRecord
  belongs_to :user
  
  validates :content, presence: true, length: { maximum: 1000 }
  validates :user_id, presence: true
end

3. フラッシュメッセージの表示

<%# app/views/layouts/application.html.erb %>
<% flash.each do |name, msg| %>
  <div class="alert alert-<%= name == 'notice' ? 'success' : 'danger' %> alert-dismissible fade show">
    <%= msg %>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
<% end %>

📝 学んだこと

1. MVCの理解

モデル：データベース設計とバリデーション
コントローラ：ビジネスロジックの実装
ビュー：ユーザーインターフェースの作成

2. データベース設計の重要性

適切なテーブル設計
アソシエーションの活用
インデックスの追加

3. ユーザビリティの考慮

レスポンシブデザインの実装
エラーメッセージの適切な表示
UXを考慮したフォーム設計

🔍 今後の改善点

機能面

メッセージ検索機能の追加
画像アップロード機能の実装
メッセージの編集・削除機能

パフォーマンス面

クエリの最適化
ページネーションの実装
キャッシュの活用

UI/UX

JavaScriptを使用した動的な更新
よりモダンなデザインの適用
エラーハンドリングの改善

📚 参考資料

まとめ

ChatAppの開発を通じて、Railsの基本的な機能や設計パターンについて実践的に学ぶことができました。特に以下の点で大きな学びがありました：

MVCアーキテクチャの実践的な理解
データベース設計の重要性
ユーザー認証の実装方法
フロントエンド開発の基礎

これらの経験は、今後のWeb開発において非常に有用な基礎知識となりました。

執筆時のRailsのバージョン: 7.0.8

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up