Rista Tech Blog

株式会社リスタの技術?ブログ

Rails5の勉強会をした話とrails-ujsでremote: trueなフォームをJSからサブミットさせようとしたらうまくいかなかった話

Ristaの4人目エンジニアを募集中! iOS Android Rails

おはようございます、辻(@dim0627)です。

夏休みはニーアオートマタをやってました。めちゃくちゃ良かったです。 やる前、「なんでこいつら目隠ししてんの?かっこつけてんの?」とか思っててすみません。HUDだったんですね。

今日はRails5のことを書きます。

社内で勉強会をやった

弊社はエンジニアが3人在籍しているのですが、それでも定期的に勉強会を開催したりしてます。

こないだの開催はちょっと間が空いてしまったのですが、こんな感じのものを話してくれました。

  • Rails5.1の新機能、弊社のform_forをどうしていくか(@mikeda
  • Rails5時代のフロントエンドと弊社のフロントエンドの今後(@c5meru

僕は聞いてただけです。写真とか取ってWantedlyに載せればよかった!Wantedly映え!

Hello rails-ujs.

Railsのリリースを追ってない人でも耳にするのがjQuery依存の除去ですね。

Drop jQuery as a dependency · Issue #25208 · rails/rails · GitHub

Railsで控えめ(Unobtrusive)なJavaScriptとして実装されているビルトイン系JavaScriptコードがjQueryを必要としてるので、それをやめて素のJavaScriptコードにしようという話ですね。 そしてjquery-ujsからrails-ujsという名前に変わりました。

というわけで@mikedaがざっとプルリクを作って実際のコードで新機能を見せてくれました。

f:id:mikeda:20170904131247p:plain

要件にもよりますが、コード見せた方が早いわってときはプルリクを作って方針を決めることもあります。

以下余談。

JSからsubmit()を呼ぶとremote: trueにならない(Ajaxにならない)

余談というかこれが本題・・・。これを書こうと思ったら導入文がめちゃくちゃ伸びてしまった。

@mikedaが作ってくれたプルリクは完成品というわけじゃなく、動かない部分もありました。 というわけで定時前でちょっと時間を持て余した僕(暇だったわけじゃない!)が勝手に調査を始めたら結構ハマったのでそれをメモっときます。

例えばこんなコードがあるでしょ。formの要素を変更したら勝手にsubmitしてくれる感じのやつ。(サンプルだから動くかわからんよ)

<form action="/awesome/path" data-remote="true" method="post">
  <select class="js-submitter">
    <option value="123">brabrabra</option>
    <option value="456">brabrabra</option>
  </select>
</form>
$(".js-submitter").on("change", function() {
  $(this).closest("form").submit();
});

このコードはこれまで動いてたんですが、rails-ujsにしたら動かなくなったっぽいんですね。submitはされるけど、remote: trueとして扱われていない。

リクエストを見てみるとたしかにxhrになってない。

f:id:dim0627:20170904095920p:plain

remote: trueなフォームはCSRF用のトークンがform内に生成されない(<head>から取られる)ので、普通にsubmitされるとInvalidAuthenticityTokenが発生しちゃうんですね。

最初はTurbolinksのせいかな?とか色々考えてみたけどどうやらsubmitの呼び方が悪かった模様。

Rails.fireとかいうかっこいい関数があるらしい

Rails.fire! Rails.fire!

とりあえず声に出して言いたくなるこの名前。センスいい。なんか調べたらjquery-rails時代からあったらしいですね。知らなかった。

JSからsubmitしたいしrails-ujsの処理もやってほしい、って場合はこんな感じにすればいいらしい!

$(".js-submitter").on("change", function() {
  Rails.fire($(this).closest("form")[0], 'submit');
});

これドキュメントあります??GitHubのコード読んでたんだけど、調べても出てこなくて・・・。

参考資料

jquery - With Rails UJS, how to submit a remote form from a function - Stack Overflow

4人目のエンジニアを募集してます

株式会社リスタではたらいてみませんか。

現在弊社ではCoffeeScriptをやめようとかjQueryをやめようとか、Vue.jsやらReact.jsやら検討してみようとか、色んな話が出ているのでジョインするなら今ですよ!(ジョインってかっこいいね!)

また、Web以外にもAndroidやiOSアプリもあります。出したばっかりなのでまだまだ裁量もってやれる範囲が大きいですよ。

気になったら気軽にお話を聞きに来てね!

株式会社リスタの採用/求人一覧 - Wantedly