【17日目】discord.jsでモーダルウィンドウを使って年齢確認をする

# はじめに
こんにちは、なりかくんです。
今回は、discord.jsでモーダルウィンドウを使って年齢確認を実装してみようと思います。まず、年齢確認を作る目的ですがR18サーバーの場合にチャンネルに年齢制限はかけられますがサーバー自体にかけることはできません。ですので、モーダルウィンドウで入力させて自作します。

# モーダルウィンドウについて
モーダルウィンドウについては、16日目の記事にまとめていますのでそちらをお読みください。

https://qiita.com/narikakun/items/868efb6640a66334a146

# プログラムを作る
では今回作ったコードは以下のようになります。入力された値が18歳以上かを確認して、18歳以上であればロールを付与するというものです。
```js
const { ModalBuilder, TextInputBuilder, ActionRowBuilder, TextInputStyle } = require('discord.js');

const modal = new ModalBuilder()
    .setCustomId('ageTest')
    .setTitle('年齢確認');

const ageInput = new TextInputBuilder()
    .setCustomId('ageInput')
    .setLabel("年齢を入力")
    .setStyle(TextInputStyle.Short);

modal.addComponents(new ActionRowBuilder().addComponents(ageInput));

await interaction.showModal(modal);
const filter = (mInteraction) => mInteraction.customId === 'ageTest';
interaction.awaitModalSubmit({ filter, time: 60000 })
    .then(async mInteraction => {
        const age = parseInt(mInteraction.fields.getTextInputValue('ageInput'));
        if (age >= 18) {
            await mInteraction.reply(`ようこそ！R18の世界へ。`);
            await mInteraction.member.roles.add(<roleId>);
        } else {
            await mInteraction.reply(`18歳未満の方はご利用いただけません。`);
        }
    })
    .catch(console.error);
```

実際に動かしてみます。まず最初に、/r18コマンドを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/dafd8038-05db-e9e7-9a91-cd4e8af71342.png)
すると、年齢入力フォームが表示されます。5歳と入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/28a10e00-e1af-bd20-f467-603c7c2013f9.png)
すると、ご利用いただけないと表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/c500a674-4da4-5a26-7940-35e633c206d9.png)

次に45歳と入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/9bda8de5-6126-7998-fdaf-9baf58518803.png)
すると、ようこそと送信されてロールが付与されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549951/c4ebbfca-3a07-7414-8e79-358527c3cc13.png)

これを利用して、チャンネルに権限設定をすればいい感じになりますね（笑）

以上です、最後までお読みいただきありがとうございました。

最後に今回作ったコード全体をおいておきます。是非参考にしてみてください。
```js:r18.js
const { SlashCommandBuilder, ModalBuilder, TextInputBuilder, ActionRowBuilder, TextInputStyle } = require('discord.js');

module.exports = {
	data: new SlashCommandBuilder()
		.setName('r18')
		.setDescription('年齢確認'),
	async execute(interaction) {
		const modal = new ModalBuilder()
			.setCustomId('ageTest')
			.setTitle('年齢確認');

		const ageInput = new TextInputBuilder()
			.setCustomId('ageInput')
			.setLabel("年齢を入力")
			.setStyle(TextInputStyle.Short);

		modal.addComponents(new ActionRowBuilder().addComponents(ageInput));

		await interaction.showModal(modal);
		const filter = (mInteraction) => mInteraction.customId === 'ageTest';
		interaction.awaitModalSubmit({ filter, time: 60000 })
			.then(async mInteraction => {
				const age = parseInt(mInteraction.fields.getTextInputValue('ageInput'));
				if (age >= 18) {
					await mInteraction.reply(`ようこそ！R18の世界へ。`);
					await mInteraction.member.roles.add(<roleId>);
				} else {
					await mInteraction.reply(`18歳未満の方はご利用いただけません。`);
				}
			})
			.catch(console.error);
	},
};
```