【Rails】remote: trueでサクッと画面切り替え

こんにちは。マリンです。

数ヶ月ぶりの更新となってしました。今まで何をしていたかと言いますと・・・

アルバイト先で修行しておりました。否。「おります」進行形です。

でもちょっとだけ余裕ができたので、これまでに学んだことを少しずつここで残せたらと思います。

まず最初は、「空気のごとく使えるようになること！」と言われたremote: trueについてです。

＊内容に間違いや補足などございましたら、是非ともご指摘ください！

remote: trueとは

そもそもremote: trueとは？

それはAjaxを使って画面を切り替えることができる機能です。

（Ajaxについてはこちらの記事でわかりやすく説明して下さっています。

初心者目線でAjaxの説明 - Qiita　）

つまり、通常ではまるっとページ全部を読み込んで画面遷移するところを、

その部分だけ差し替えて画面を切り替えてしまおうってことですね。

remote: trueの使い方

では本題の使い方です。

バイト先でよく使った登録フォームを例にとって説明します。

「新規登録」のリンクをクリックすると、登録フォームがremote: trueで表示されるようにします。

index.html.erb

Ajax切り替え用のremoteオプションと、

中身を差し替える部分にidを用意します。

remoteオプションは色んなところで使えますが、今回はlink_toにつけます。

app/views/users/index.html.erb

<%= link_to "新規登録", user_new_path, remote: true %>
<div id="samplRemote"></div>

Ajaxへの切り替え処理はこれだけです。

new.js.erb

お恥ずかしいことにコントローラが探しに行くテンプレート

（というかviewsに置けるファイル）って、

〜html.erbだけだと思っていました。

でも本当はjsとかもあるんですね・・・

remote: trueの場合はまずこちらを探してもらって、

このjsファイルの中でrenderを使って_new.html.erbを呼び出します。


app/views/users/new.js.erb

$('#samplRemote').html("<%= escape_javascript(render 'new') %>");

対象のidはindexの差し替える部分につけたid=samplRemoteです。

.htmlで_new.html.erbを読み込むよう、

要素を書き換えています。

_new.html.erb

ページの中身はパーシャルとして_new.html.erbの中に書きます。


app/views/users/_new.html.erb

<%= form_for @user do |f| %>

# フォームの中身

<% end %>

これでAjaxを使った画面の差し替えが完了です。

コントローラは通常通りのnewやcreateで大丈夫です。

remote: trueが使えるもの

最後に、このremoteオプションが使えるものです。

• form_for

• form_tag

• link_to

• button_to

他にもあったら是非教えてください。

まとめ

まだまだちゃんと学ぶと奥が深そうなremote: trueですが、

今はとりあえずこんな感じで使えるようになりました。

ロード時間の短縮にもなるし、サーバーへの負担も軽減されるし、

大変ありがたい機能ですね！