非同期処理の実装（シンプルバージョン）

5185 ワード
非同期処理 Rails Rails テキストリンク

背景

以下画面から検索を行った時、リストが表示される仕組みについて、非同期処理を実装したい。

環境

項目 内容
OS.Catalina v10.15.4
Ruby v2.5.1
Ruby On Rails v5.2.4.3

内容

対応１）検索ボタン押下時に呼び出されるアクションと紐つくビューをhtml→jsに変更する
以下、index.html画面から呼び出されるアクションについて、１行目の「remote: :true」を記述。

index.html.erb(一部抜粋)
1        <%= form_tag(wordsearch_krowns_path, method: :get ,remote: :true) do %>
2          <input class="search-box__query" name="keyword" placeholder="作品名で検索" type="text" value="">
3            <button class="search-box__btn" title="検索" type="submit">
4              <i class="fas fa-search"></i>
5            </button>
6          </input>
7        <% end %>

こうすることで、「wordsearch」アクション=同名のアクションが呼ばれたのち、ビュー展開が「wordsearch.html.erb」→「wordsearch.js.erb」となる。

元々の画面描写は以下の通りレンダリングしている。13行目で検索結果リストをテーブルにて表示。ここを非同期で再描写する。

wordseach.html.erb（非同期する前のerbファイル）
 1 <!-- 詳細画面 -->
 2 <title>subaco トップページ</title>
 3 
 4 <div class="contents">
 5   <!-- サイドコンテンツ(左側)表示 -->
 6   <%= render "./shared/sidecontents" %>
 7 
 8 <div class="main-contents">
 9   <!-- メインコンテンツヘッダ部表示 -->
10   <%= render "mainheader"%>
11 
12   <!-- メインテーブル定義 -->
13   <%= render "maintable" %>
14 
15   <!-- クラウン表示 -->
16   <%= render "mainknowledge" %>
17 
18   <!-- クラウンイメージ表示 -->
19   <%= render "mainimage" %>
20 
21   <!-- main-contents 終了タグ -->
22   </div>
23 
24 <!-- contents 終了タグ -->
25 </div>



対応２）非同期処理を実装する
以下の1行のみで完了。非常にカンタン。作法は、対象となるhtmlのクラスと、レンダリングするための記述のみ。

wordseach.js.erb（非同期を行う処理）
$('.main-tab').html("<%= escape_javascript(render 'maintable' ) %>");

これだけの改修で、非同期処理を実装出来るようになります。