控えめなJavascript（rails-ujs）のおかげで、DELETEなどのHTTPリクエストができるみたい

こんにちは、たわらです。

本記事は、控えめなJavascriptについての情報をまとめました。

ことの発端

最近、開発者ツールを使うことを覚えてたので、ログアウト機能を実装するときに、HTML構造を確認しました。

<a class="nav-link" rel="nofollow" data-method="delete" href="/admin/logout">ログアウト</a>

できてますね。

で、挙動の確認をしようと思って、開発者ツールの/admin/logoutをクリックすると、

No route matches [GET] "/admin/logout"

とエラーが出てきます。ルーティングもあってるし、

<%= link_to "ログアウト", admin_logout_path, class: "nav-link", method: :delete %>

deleteもちゃんと指定できてるのに、なんで？？？　となってしまいました。

で、ブラウザのログアウトボタンを押すと、きちんとログアウトができました。なんで？？？

aタグの基本はGETリクエスト

で、講師の方に質問すると、「ざっくり説明すると、HTML上のルールとして、aタグはGETメソッドなんだよね」と教えてもらいました。だから、開発者ツールのリンクを踏むと、GETメソッドでHTTPリクエストが発行されるのですね。

ほえー、なるほど。じゃ、どうしてDELETEメソッドが使えるの？

講師「ブラウザ上のログアウトボタンを押したときには、rails-ujsというJavascriptが機能して、deleteやpostとしてリクエストができるようになっているよ」

なるほど。

マニフェストファイルのapplication.jsにあるこの行のことですね

//= require rails-ujs

控えめなJavascriptの登場

で、調べてみるとRailsガイドに、

Railsでは、JavaScriptをDOMに追加する際の手法を「UJS: Unobtrusive（控えめな）JavaScript」と呼んでいます。これは一般にフロントエンド開発者コミュニティでベストプラクティスであると見なされていますが、ここではもう少し違う角度から説明したいと思います。

と記載がありました。

この名称は、HTMLの中にJavaScriptを混入させないという意図に由来しています。JavaScriptを正しく分離できたので、今後の変更が楽になります。以後は、このdata-*属性をリンクタグに追加するだけでこの動作を簡単に追加できます。Railsでは、こうした「最小化」と「連結」によって、あらゆるJavaScriptを実行できます。

data-method="delete"とすると、よしなにやってくれるみたいです。

なので、マニフェストファイルに