Ruby on Railsのアプリケーション内で、javascriptを活かす方法

先ほどスターバックスの店員さんからサラダラップを注文した時に、「フォークもいるかな？いらないと思うんだけど・・・。」と呟かれながらサラダラップとドリンクを受け取ったのですが、確かに、フォークは要らないと思いました。しかし、ストローが無かったのでストローは欲しかった・・・。

前置きはさておき、今回はアプリケーションフレームワークのRuby on RailsにJavascriptを活かす方法について(部分的に)書いていきます。

例えばこんなチャットアプリの画面があったとして

チャットメンバーを追加という入力フォームに、「u」という文字を入れます。

すると、「u」という文字を含む検索結果が表示されます。

この仕組みについて書いていきます。

users_controllerのindexアクションはこうなってます(少し見た目が崩れていますがご了承ください)。

　def index
　　return nil if params[:keyword] == ""
　　@users = User.where(['name LIKE ?', "%#{params[:keyword]}%"] )
　　　　　　　.where.not(id: current_user.id).limit(10)
 　respond_to do |format|
　　　format.html
　　　format.json
　　end
　end

入力フォームに入力された文字が何もない場合、nilを返します。

@usersというインスタンス変数には、idが今ログインしているユーザー以外、上限が10、入力された文字を含む・・・という条件でUserモデルから検索されたユーザーが代入されています。

僕はあまり理解していませんが、返す形式は、htmlとjsonの2つで場合分けしています。

jsonのための翻訳機であるindex.json.jbuilderはこうです。

@usersから、userという形でユーザーの情報を一つ一つ取り出します。

そして翻訳を実行しています。

今回は、右も左も変わりませんが、Userモデルのidとnameをjsonのidとnameに変換しています。

userのjavascriptはこうなっています。

最初に入力フォームのIDを取得しています。

このIDはどこにあるかというと、

ブラウザで要素の検証を行った結果を見れば分かります。

f:id:khirok:20191128140655p:plain

入力フォームのIDはuser-serch-fieldであることが分かりました。

その後は、キーが持ち上がったというイベントで、関数を発火させます。

関数の中では、まず入力値をinputという変数に代入しています。

33~38行目ではajax通信を行っています。ここで、inputを受け取っています(多分)。あまり理解していないので、それ以外の説明は割愛させていただきます。

39~51行目では、おそらく入力フォームのIDの取得が成功した場合の処理を書いています。done関数とでも呼んでおきます。

「u」という文字を入力した後はこうなっています。

f:id:khirok:20191128142209p:plain

新たにuser-serch-resultというIDが出現しました。

これは、_form.html.hamlで定義しています。

f:id:khirok:20191128143249p:plain

done関数では、まず検索結果を空にしています。そして、検索結果が0ではない時、入力された文字がない時、それ以外で場合分けしています。

検索結果が0ではない時は、userという形で一人一人のユーザーを取り出した上で、addUser関数に引数userを渡したものを呼び出しています。

addUser関数はこちらです。

 function addUser(user){
 var html = `
 <div class="chat-group-user clearfix">
 <p class="chat-group-user__name">${user.name}</p>
 <div class="user-search-add chat-group-user__btn chat-group-user__btn--add" 
 data-user-id=${user.id} data-user-name=${user.name}>追加</div>
 </div>
 `
 $("#user-search-result").append(html);
 }

IDがuser-serch-resultである、検索結果を表示する空間に、var htmlで定義したhtmlを繋げています。

入力された文字がない時は、falseを返します(何も起きないということでしょう)。

それ以外の場合は、addNoUser関数が呼び出されます。

addNoUser関数はこちらです。

function addNoUser(){
var html = `
 <div class="chat-group-user clearfix">
 <p class="chat-group-user__name">ユーザーが見つかりません</p>
 </div>`
$("#user-search-result").append(html);
 }