HTMLフォームには主にPOSTのリクエストを投稿する機能があります。
onSubmitイベントにハンドラを設定すると、Javascriptから任意のAPIコールなどを実行できます。
このハンドラの書き方は似たようなパターンをとることが多く、以下のようなイディオムになります。
// イベントハンドラにはasyncを指定できる
document.querySelector('form').addEventListener('submit', async (e) =>{
document.querySelector('#submit').disabled = true; // 二重クリックの防止
e.preventDefault(); // フォームの投稿処理を実行しない
await some_api_call(e.target.item.value); // フォーム要素の値を用いてAPIコール
window.location = 'http://example.com/redirected'; // リダイレクトなど任意の処理を実行
return false;
});
ハンドラを非同期関数とすることで、APIコールの前後処理も適切な順序で実行できます。
また、onSubmitはHTMLバリデーション通過後に実行されるため、フォームに設定したrequired属性のチェックがAPIコール前に機能します。
Chuma Takahiro
関連記事
denoのテスティング機能は、ツールを追加インストールせずに動作するテストランナーを提供しています。deno testサブコマンドで、ファイルやディレクトリ単位のテストスイートを一括実行できます。
denoはブラウザ環境との互換性が高く、ブラウザ向けのコードをテストできます。WebWorkersやWebAssemblyを含む高度な構成もそのまま動作します。ただしDOMは別モジュールとなっており、標準的なdenoテスティングのスコープには含まれていません。
……
TypescriptやJavascriptの言語仕様には条件つきコンパイルを含むマクロがありませんが、esbuildにはその機能があります。
……
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。
APIクライアントの実装パターン
APIクライアント用途の典型的な実装パターンは以下のような例になります。
import { html, LitElement } from "lit";
import { customElement、 state } from "lit/decorators.js";
@customElement("sample-app")
class SampleApp extends LitElement {
@state()
_person = {};
async connectedCallback() {
super.connectedCallback();
this._person = await call_api();
}
render() {
return html`<div> ${this._person.name} </div>`;
}
}
APIクライアントの多くのケースで、コンポーネント呼び出し時にAPIレスポンスをセットアップします。
……
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。
ブラウザをスクリプト操作することで、実機の利用環境に近いテストを実装できます。Javascriptのみのインテグレーションテストについては、
deno testがWebAssemblyやWeb Workersなどを含む高度なブラウザ標準もサポートして選択肢が増えましたが、Seleniumは適切なレンダリングをテストできる希少な手段と言えます。