なるべく<a>や<form>を使用すること

<a>タグや<form>タグのメリット

Hotwireではなるべく通常の<a>や<form>でナビゲーションをします。

• JavaScriptがオフでも<a>タグや<form>タグは動作しますので、プログレッシブエンハンスメントになります。つまりJavaScriptが読み込まれていなくてもウェブサイトが動作します
• Hotwireの便利な機能が利用できます
  • <a>タグのhrefはデフォルトでマウスホバー時にprefetchされます。つまりリンクをクリックする前に、Turboがフライングをしてリンク先のウェブページをロードします。このため、非常にレスポンスが速いUI/UXが得られます
  • <a>タグにdata-turbo-method属性を追加すると、GET以外のHTTPメソッドを使えます。HTMLの構造上、<form>が使いにくい時に便利です。（ただし非GETはなるべく<form>を使うことが推奨されています）
  • <a>タグおよび<form>にdata-turbo-frame属性を追加すると、サーバから返ってきたレスポンスを任意のTurbo Frameに転送できます
  • <form>に含まれる<button>や<input>にdata-turbo-submits-withを追加すると、送信中にボタンのテキストを自動的に変更できます。これだけでPending UI（待ちUI）が実現できます
  • <a>タグや<form>タグによってリクエストを送信すると、適切なHTML要素にaria-busy属性が付きます。アクセシビリティ的に有効な上に、これをCSS擬似セレクタで読み取れば待ちUIがCSSだけで作れます
  • <form>にdata-turbo-confirm属性をつけると、form送信時に最終確認用のモーダルダイアログを表示できます。これはデフォルトではブラウザネイティブのwindow.confirm()が使用されますが、カスタマイズして任意のダイアログを表示できます
  • <a>やGETの<form>にdata-turbo-stream属性をつけると、リクエストヘッダーにAccept: text/vnd.turbo-stream.html ...がつき、サーバに対してturbo streamを要求されます。Turbo Streamの機能そのものには関係ありませんが、サーバ側コードが書きやすくなります。

上記のように、Hotwireでは<a>タグや<form>タグを使えば数多くの便利機能がついてきます。onClickを使ってカスタムのイベントハンドラを書くのではなく、なるべくブラウザの標準機能で引っ張り、少しでもライブラリに多くの仕事をさせるのがHotwireを便利に使いこなすコツの一つだと思います。

基本的な指針

• サーバからデータを取得するような操作を作るときは、なるべく<a>タグや<form>タグを使います。fetch()でリクエストをサーバに投げると、Turboが管理できなくなるので、可能な限り避けます。
• <form>で通常のsubmitができない場合(例えば<input>のinputやchangeイベントで送信したい場合)は、なるべくJavaScriptからrequestSubmit()で送信をします。
• それ以外の場合は下記のJavaScriptから直接Turboを使うこともできます。

JavaScriptから直接Turboを使いたい場合: request.js

非同期通信をする場合、<a>タグや<form>タグが推奨されているのは上述した通りです。しかし<a>タグや<form>タグとは無関係に、JavaScriptからリクエストを送信したい場合もあります。

• Turbo.visit([url])でJavaScriptからTurboのリクエストを投げることができます。
  • ただしTurbo.visit()はGETメソッドしか送信できません。
• GET以外のリクエストを送信したい場合はrequest.jsを使います。request.jsはCSRFトークンの送信や返ってきたTurbo StreamをDOMに自動挿入する処理もしてくれます。

ただし繰り返しになりますが、なるべくならばrequest.jsを使わないのがお勧めです。敢えて非表示の<form>を作ってでも、<form>を使った方がプログレッシブエンハンスメントの考え方に沿っています。また<form>要素と<button>要素が親子関係にならない場合はform属性を使うと良いでしょう。