1週間かけてようやく非同期通信を攻略(Rails, Jquery)

ついに非同期通信化を攻略した。

お気に入り機能がスムーズに実行できる機能として生まれ変わった。

このままトップページにあるお気に入り機能の非同期通信化にも挑戦。

jsファイルや部分テンプレートを上記の画面と共有しているので、受け渡しするデータの調整が非常に難しかった。

だがここで気がかりな点がある。

それは部分テンプレートの更新が行われないエラーがあったときに、
それをルーティングの変更によって解決できたという点だ。

非同期通信を行う前は以下のコードを使用していた。

<% unless check_current_user_favorite.include?(job) %>
 # お気に入りの登録
 <%= link_to image_tag("star_outline.png", class:"w-6"), job_create_favorite_path(job, id:job), method: :post, remote: true  %>
<% else %>
 # お気に入りの解除
 <%= link_to image_tag("star.png", class:"w-6"), job_destroy_favorite_path(job, id:job), method: :delete, remote: true %>
<% end %>

お気に入り登録をするためのパス(job_favorites_path)と、
お気に入りを解除するためのパス(job_favorite_path)が共存していると、
部分テンプレートの更新ができなかった。
※登録や解除はできている

原因を特定するために上記にある条件分岐をなくしてみたり、パスの引数を数値で指定するなどコードの変更で様々な観察を行なった。

結局のところ、これらのパスが共存している地点でエラーが発生していることが確認された。

ここで見つけた記事がルーティングの変更を行なっていたので、一旦こちらも変更してみた。
この変更によってパスは

お気に入り登録をするためのパス→ job_create_favorite_path
お気に入りを解除するためのパス→ job_destroy_favorite_path

となる。

post 'favorite/:id' => 'favorites#create', as: 'create_favorite'
delete 'favorite/:id' => 'favorites#destroy', as: 'destroy_favorite'

<% unless check_current_user_favorite.include?(job) %>
　　# お気に入りの登録
 <%= link_to image_tag("star_outline.png", class:"w-6"), job_create_favorite_path(job, id:job), method: :post, remote: true  %>
<% else %>
　　# お気に入りの解除
 <%= link_to image_tag("star.png", class:"w-6"), job_destroy_favorite_path(job, id:job), method: :delete, remote: true %>
<% end %>

すると前述の共存の問題がなぜか解決し、
データの更新が正常に行われるようになった。

この後いろいろ調べてみたのだが、ルーティングの変更でなぜ問題が解決できたのか分からないままだ。

参照記事：
Ajax(非同期通信)で「いいね」機能を実装する(Ruby on Rails)

非同期通信の攻略の喜びと同時に、解決方法が腑に落ちないという複雑な感情が入り混じった日になった。

だが非同期通信を攻略したことの安心感は何ものにも変え難い。

非同期通信を適用したい機能を洗い出して今後の実装計画を更新した。

ストレスフリーなサービスを実現するために引き続き非同期通信の実装を行なっていきたい。