SvelteKit初心者がForm actionsで悩んでたら、HTMLの基本を思い出した話

TL;DR

<form>でsubmitイベントを発火させるときは<button>にtype="submit"が指定されていることを確認しよう

あるいはtypeになにも指定しなければ自動でsubmitになります。なにも指定しなければ。

この記事は何？

GitHub Copilot に頼りすぎた愚かな開発者（筆者）がHTMLの基本を忘れたことを戒めるための記事です。

起きたこと

それはSvelteKitのForm Actions学習中のことでした。
筆者はGitHub Copilot を使いながら、以下のコードを作成しました。

svelte +page.svelte //.html

<script lang="ts">
	import type { ActionData } from './$types';
	export let form: ActionData;
</script>

<h1>{form}</h1>

<form method="POST">
	<button type="button">
        Click
    </button>
</form>

typescript +page.server.ts

import { error } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions: Actions = {
	default: async () => 'Hello World!'
};

(.svelteもシンタックスハイライト対応しないかな...)

ここで詳しい話は割愛いたしますが、+page.svelteでformがsubmitされた場合、+page.server.tsで定義したForm Actionsが実行され、画面に"Hello World!"と出力されるのが期待される動作です。

しかし実際には{form}はnullのまま動きません。

解決方法

    <-- 下記コードを -->
	<button type="button">
        Click
    </button>
    
    <-- こうする -->
	<button>
        Click
    </button>

特に必要のない解説

あまり説明することもないのですが、<button type="button" />と、ボタンのtypeにbuttonが指定されている場合、submitする能力を失ってただのボタンになっています。
そのためイベントが発火せず、Formが送信されなかったということです。

ボタンのtypeが指定されていない場合の初期値はsubmitです。form 内の button 要素を押すと submit される理由
typeがbuttonの場合でも、イベントハンドラーを登録することで発火させることが可能

まとめ

GitHub Copilot は非常に頼れる開発ツールですが、盲目的になってはいけないと再確認しました。
少なくとも、出力された結果に対してしっかり理解する姿勢が必要です。

ちなみに原因特定はChatGPT にお願いしました。
便利な世の中になったものです。いや、ほんと。