【Ruby on Rails】簡単なメモアプリの作成｜検索機能をGemなしで実装

動画で解説を見る

1 開発環境
2 Ruby on Railsで検索機能の実装手順
3 おわりに

開発環境

Ruby:version 3.1.2
Ruby on Rails:version 7.0.4
Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on Railsで検索機能の実装手順

Ruby on Railsの検索機能は、ransackなどのgemなしでも比較的簡単に実装することができます。

今回はメモアプリの作成で使用したコードを用いて検索機能の作り方を解説していきます。

検索機能のルーティングを作成

まずは検索機能のルーティングを作成していきます。

Rails.application.routes.draw do
  root :to => 'memos#index'
  resources :memos, only: [:index, :update, :destroy, :create]
  post 'ajax_memos_create', to: 'memos#ajax_create', as: 'ajax_memos_create'
  get 'search', to: 'memos#search', as: 'search'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end

Rails.application.routes.draw do

root :to => 'memos#index'

resources :memos, only: [:index, :update, :destroy, :create]

post 'ajax_memos_create', to: 'memos#ajax_create', as: 'ajax_memos_create'

get 'search', to: 'memos#search', as: 'search'

今回はHTTPSメソッドはGETメソッドを指定していますが、POSTメソッドでも問題ありません。

GET通信かPOST通信にするかは、送信されるパラメータの機密性によって使い分けてください。

検索機能のフォームを作成

次に検索機能のフォームを作成します。

<div class="wrapper">
    <div class="container flex-start">
        <div class="col-box-1">
            <%= form_with url: search_path, local: false, method: :get do |f| %>
                <%= f.text_field :word, placeholder: "検索したいメモの内容を記入してください。", class: "search-box" %>
                <%= f.submit "検索", class: "btn" %>
            <% end %>
        </div>

        <div class="col-box-1">
            <h2>メモ一覧</h2>
        </div>

        <div class="col-box-3" id="memo-post">
            <%= render "memos/form", memo_new: @memo_new %>
        </div>

        <div class="col-box-2" id="errors">
            <%= render "layouts/errors", obj: @memo_new %>
        </div>
     </div>

    <div class="container flex-start" id="memo-list">
        <%= render "memos/list", memos: @memos %>
    </div>
</div>

<%= form_with url: search_path, local: false, method: :get do |f| %>

<%= f.text_field :word, placeholder: "検索したいメモの内容を記入してください。", class: "search-box" %>

<%= f.submit "検索", class: "btn" %>

<% end %>

</div>

今回は非同期通信にしたいためform_withのlocalはfalseにしています。

また、methodはルーティングで作成したHTTPSメソッドに合わせてGETメソッドを指定しています。

検索機能のコントローラーを作成

次にルーティングで指定したmemosコントローラー内にsearchメソッドを作成していきます。

class MemosController < ApplicationController
  def index
    @memo_new = Memo.new
    @memos = Memo.all
  end

  def create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all
    if @memo_new.save
      redirect_to root_path
    else
      render action: "index"
    end
  end

  def update
    @memo = Memo.find(params[:id])
    @memo.update(memos_params)
    redirect_to root_path
  end

  def destroy
    @memo = Memo.find(params[:id])
    @memo.destroy
    redirect_to root_path
  end

  def ajax_create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all

    if @memo_new.save
      flash.now[:notice] = "メモの保存に成功しました。"
    else
      flash.now[:alert] = "メモの保存に失敗しました。"
    end
  end

  def search
    seach_word = params[:word]
    @memos = Memo.where("title LIKE ? or description LIKE ?", "%#{seach_word}%", "%#{seach_word}%")
    if @memos.count > 0
      flash.now[:notice] = "#{@memos.count}件のメモが見つかりました。"
    else
      flash.now[:alert] = "#メモが見つかりませんでした。"
    end
  end

  private

  def memos_params
    params.require(:memo).permit(:title, :description)
  end

end

def ajax_create

@memo_new = Memo.new(memos_params)

@memos = Memo.all

if @memo_new.save

flash.now[:notice] = "メモの保存に成功しました。"

else

flash.now[:alert] = "メモの保存に失敗しました。"

end

def search

seach_word = params[:word]

@memos = Memo.where("title LIKE ? or description LIKE ?", "%#{seach_word}%", "%#{seach_word}%")

if @memos.count > 0

flash.now[:notice] = "#{@memos.count}件のメモが見つかりました。"

else

flash.now[:alert] = "#メモが見つかりませんでした。"

end

private

def memos_params

params.require(:memo).permit(:title, :description)

end

あいまい検索にするためにwhereメソッドで指定したカラムに対してLIKE句を使用します。

また、今回は複数カラムに対して条件を指定したいため、or条件で2つ目のカラムを指定し、第二引数と第三引数に条件を指定します。

今回は部分一致なので「%xxxx%」としていますが、完全一致は「xxxx」、前方一致は「xxxx%」、後方一致は「%xxxx」になりますので、処理した条件に合わせて変更してください。

上記一致させる条件のの書き方が分かっていれば、検索機能にプルダウンで検索する条件を選択してもらうように処理をすれば検索機能がさらに充実します。

検索機能の非同期通信（Ajax）を作成

最後に検索機能の非同期通信（Ajax）を作成します。

$('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>");
$('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);

1 2	$('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>"); $('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);

今回は投稿一覧にデータを渡して再表示したいため、リスト一覧のIDを指定して検索結果を表示させています。

また、検索結果の表示と併せてフラッシュメッセージで検索結果の件数を表示をしたいため、フラッシュメッセージのIDを指定して表示させています。

検索機能のフォームデザインを作成

上記で検索機能の処理は完成していますが、追加でデザインだけ整えておきます。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
    list-style-position: inside;
}

.header-color {
    background-color: #4169e1;
}

.green-color{
    background-color: green;
}

.red-color{
    background-color: red;
}

.notice-text {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

.search-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 30%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

.field_with_errors {
    display: contents;
}

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

.form-box {

background-color: transparent;

border: 1px solid #d3d3d3;

border-radius: 6px;

padding: 6px;

width: 100%;

}

.search-box {

background-color: transparent;

border: 1px solid #d3d3d3;

border-radius: 6px;

padding: 6px;

width: 30%;

}

フォームにはplaceholderであらかじめテキストの表示をしていますが、デザインによっては検索アイコンを表示させるデザインもあります。

このあたりはUI／UXになっていますので、全体のデザインに合わせて調整してください。

おわりに

Ruby on Railsで検索機能の実装について解説してきましたが、いかがだったでしょうか。

今回はメインコンテンツの中に検索機能を実装しましたが、検索機能はヘッダーに実装されることも多いため、WEBアプリケーションの仕様に合わせて実装してもらえてればと思います。

是非、ユーザーがWebアプリケーションを使いやすいようにするためにも、検索機能の実装にチャレンジにしてみてください。