ページネーション機能（kaminariの導入）

内容

コメント機能の前に、一覧ページでページネーション機能を実装する

ページネーション機能

1. kaminariの導入

railsでページネーションを実装するにはkaminariというgemが便利
gemfile

gem 'kaminari'

ターミナル

% bundle install
% rails s

2. ビューでページネーションを表示

コントローラーを以下のように編集
posts_controller.rb

def index
  # ページネーションをつけたいデータに.page(params[:page])を追加
  @posts = @q.result(distinct: true).includes(:user).page(params[:page])
end

続いてビューを以下のように編集
index.html.erb

# ページネーションを表示させたいところに<%= paginate @posts %>を追加
<%= paginate @posts %>

これで実装完了！簡単！
ページネーションが1ページに表示するレコード数はデフォルトで25件
よってレコード数が26件以上あれば、ページネーションが表示される

3. ページに表示するレコード数を変更したい時

1ページに表示するレコード数はデフォルトで25件のため、このレコード数を変更したい場合は以下のように記述
posts_controller.rb

  # # .page(params[:page])の後に.per(10)を追加→数値によってレコード数を変更できる
  @posts = @q.result(distinct: true).includes(:user).page(params[:page]).per(10)

4. ページネーションのCSSを編集

ここではまずbootstrapを導入してからCSSを編集する
gemfile

gem 'bootstrap', '~> 5.1.0'
# bootstrapはjQueryに依存するため以下も追加（既に導入してるので今回は飛ばす）
gem 'jquery-rails'

sprockets-railsがv2.3.2.以上であるか確認してからインストール

% bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.2)
% bundle install
% rails s

その後、application.scssやapplication.jsを編集し、rails g kaminari:views bootstrap4（bootstrap5はなぜかなかった）を実行することでビューは編集できたのだが、ページネーション以外のビューが崩れてしまったため断念
bootstrapによるビューの修正は後回しとする

次回

投稿詳細ページでコメントのやり取りができるコメント機能の実装

参考

スクロール機能

サイドバーとメインコンテンツをdisplay: flex;で分けていて、別々にスクロールしたい場合、以下のように記述する

# 親要素にheightを指定
.contents {
  display: flex;
  height: 100vh;
}

# 子要素それぞれにoverflow-yを指定
.side-bar {
  overflow-y: auto;
}
.main {
  overflow-y: auto;
}

これで別々にスクロールが可能となる