RYLSnmm/autoname.js

## autoname.js
export default ({
	auto_names_promise,
	local_names,
	disable_local_name_suffix,
	form_name,
	storage_key,
}) => {
	let auto_names = []
	auto_names_promise.then(data => {
		auto_names = data
	})

	return (form_data) => {
		let name = form_data.get(form_name)
		if (name === "") {
			if (storage_key && localStorage[storage_key]) {
				name = localStorage[storage_key]
			} else {
				if (auto_names.length) {
					name = random(auto_names)
				} else {
					name = random(local_names)
					if (!disable_local_name_suffix) {
						name += String(random(1000)).padStart(3, "0")
					}
				}
			}
		}
		form_data.set(form_name, name)
		if (storage_key) {
			localStorage[storage_key] = name
		}
	}
}

const random = (arr_or_num) => {
	const _random = (end) => Math.floor(Math.random() * end)
	if (typeof arr_or_num === "number") {
		return _random(arr_or_num)
	} else {
		const index = _random(arr_or_num.length)
		return arr_or_num[index]
	}
}

## page.html
<!doctype html>

<style>
	.container {
		margin: 10px;
		width: 400px;
	}

	.comment-form {
		:is(h1) {
			font-size: 1.2em;
		}
		:is(textarea) {
			resize: vertical;
			min-height: 3em;
		}
	}

	.flex-col {
		display: flex;
		flex-flow: column;
		gap: 8px;
	}
</style>

<div class="container">
	<section class="comment-form">
		<form id="comment-form">
			<div class="flex-col">
				<h1>コメント</h1>
				<input name="name" placeholder="なまえ">
				<textarea name="body"></textarea>
				<button>投稿</button>
			</div>
		</form>
	</section>
</div>

<script type="module">
	import autoname from "./autoname.js"

	const set = autoname({
		auto_names_promise: fetch("https://example.com").then(response => response.json()).then(data => data.names),
		local_names: ["さとう", "たなか", "すずき"],
		disable_local_name_suffix: false,
		form_name: "name",
		storage_key: "last_name",
	})

	document.getElementById("comment-form").onformdata = (event) => { set(event.formData) }
</script>
	export default ({
	auto_names_promise,
	local_names,
	disable_local_name_suffix,
	form_name,
	storage_key,
	}) => {
	let auto_names = []
	auto_names_promise.then(data => {
	auto_names = data
	})

	return (form_data) => {
	let name = form_data.get(form_name)
	if (name === "") {
	if (storage_key && localStorage[storage_key]) {
	name = localStorage[storage_key]
	} else {
	if (auto_names.length) {
	name = random(auto_names)
	} else {
	name = random(local_names)
	if (!disable_local_name_suffix) {
	name += String(random(1000)).padStart(3, "0")
	}
	}
	}
	}
	form_data.set(form_name, name)
	if (storage_key) {
	localStorage[storage_key] = name
	}
	}
	}

	const random = (arr_or_num) => {
	const _random = (end) => Math.floor(Math.random() * end)
	if (typeof arr_or_num === "number") {
	return _random(arr_or_num)
	} else {
	const index = _random(arr_or_num.length)
	return arr_or_num[index]
	}
	}
	<!doctype html>

	<style>
	.container {
	margin: 10px;
	width: 400px;
	}

	.comment-form {
	:is(h1) {
	font-size: 1.2em;
	}
	:is(textarea) {
	resize: vertical;
	min-height: 3em;
	}
	}

	.flex-col {
	display: flex;
	flex-flow: column;
	gap: 8px;
	}
	</style>

	<div class="container">
	<section class="comment-form">
	<form id="comment-form">
	<div class="flex-col">
	<h1>コメント</h1>
	<input name="name" placeholder="なまえ">
	<textarea name="body"></textarea>
	<button>投稿</button>
	</div>
	</form>
	</section>
	</div>

	<script type="module">
	import autoname from "./autoname.js"

	const set = autoname({
	auto_names_promise: fetch("https://example.com").then(response => response.json()).then(data => data.names),
	local_names: ["さとう", "たなか", "すずき"],
	disable_local_name_suffix: false,
	form_name: "name",
	storage_key: "last_name",
	})

	document.getElementById("comment-form").onformdata = (event) => { set(event.formData) }
	</script>