jqueryで1クリック2機能導入を試みた際につまづいてしまった話

プログラミングを本格的にスタートして5ヶ月目に入りましたさかもとです。

今回は以前railsjqueryを導入し他のですが、今回満を辞してフルにjqueryを使ったクイズアプリのフロントを作成していた時にハマってしまったので復習の意味も込めてアウトプットしたいと思います。

 

今回実装しようと思っている機能はこんな感じ

質問に対して3つの選択肢がありクリックすると現在の質問と選択肢が消え、次の質問が表示されるというものです。

 

gyazo.com

 

今回この機能を実装しようと色々調べたのですが意外と調べるのに苦労したこと、そして似たような実装をしている記事があったのですが機能しなかったので記事にしました。

 

環境

 

rails 6.0.3

ruby 2.6.5

jqueryはwebpackerで導入しています。

 

view

 

https://i.gyazo.com/c14f990387d27bb8cf6f79f876758f5a.png

 dbにあらかじめseed_fuを利用して初期データを導入しそれをコントローラーから引っ張ってきてます。

これはわかりやすいようにと1問分で記述していますがリファクタリングをすればおそらく10行ぐらいで10問ほど表示できるのではと思っています。

 

score.js

 

webpackerでインストールしているのでapp/javascript/score.jsファイルを作成し、packs/application.jsで読み込んでいます。

今回のjqueryでの実装はこのようになりました。

 

https://i.gyazo.com/29b54e68803b4481c891ca523e0168c8.png

 

1行づつ説明していこうと思います。

1行目:turbolinks : loadこれは「初回ページ読み込み&リロードで動くが、ページ遷移し

    て該当ページに戻ってくるとjqueryが動かない!」という状況を回避するために

    使用しています。turbolinks自体はページの遷移を早くする。みたいな認識だと 

    思うのですがgemを入れている場合、$(document).ready()では動きません。

2行目 : これはフロント<a></a>の中にあるclassとリンクしています。何が行われた時  

     にどうするのかの何かを明示しています。

4行目 : これは2行目の何がどうするかのどうするかの部分に当たります。今回の場合は

     質問と選択肢を全て消すことから始まるのでdiv要素を指定しています。

6行目 : 4行目の後に次の質問と回答を出力しなくてはなりません。そこで次のdiv要素

    の中にあるidを明示してあげることで引っ張ってきています。

 

ポイント

 

3,5行目 : $.when() と .done()

ここで詰まってしまいました。

おそらくjqueryのボタン関係の記事をみてもこの記述のあるものは少ないのではと思います。

これは何かというと処理を行う順番を表しています。

$.when() は初期動作の後に初めに実行するもの

. done() はその後に行う動作を明示しています。

.fail()というものもあり、エラーが起きた際にどう言った処理を行うかを明示的に示すものもあります。)

 

Ajaxなどの非同期通信を行う場合、データベースからデータを読み込む場合に利用します。

今回の場合は後者が原因だったように思います。

 

最後に

 

jqueryは今まで一度だけ触ったことがあったのですが今回のようにガッツリ開発の中で使ったことがないのでわからないことが多々あります。

今後もつまづいたことをそのままにせずアウトプットしていこうと思います。

 

参考記事

 

$.when() | jQuery 1.9 日本語リファレンス | js STUDIO

Rails5でjqueryを動かす方法 - Qiita

$.when() | jQuery 1.9 日本語リファレンス | js STUDIO