【Discord.js V14】Discord BOTをVCに参加させてみる

皆さん初めまして。Morichanと申します。
下記の※の記述を理解したうえで、記事を読んでください。

※DiscordBot開発初心者の書いた記事です。
（また、プログラミング自体、２年ほどのブランクあり）

BOTにスラッシュコマンドを実装・登録するまでの流れに関しては、[別の記事](https://qiita.com/Mori-chan/items/2e869c0e2060b78f0380)にまとめてあります。

関連記事：
* [【Windows11】Discord BOTを開発するための開発環境を整える。](https://qiita.com/Mori-chan/items/add6f63b04f70ff53732)
* [【Discord.js V14】Discord BOTにスラッシュコマンドを実装してみる](https://qiita.com/Mori-chan/items/2e869c0e2060b78f0380)

## 目次
1. [開発環境](#開発環境)
2. [BOTをVCに参加させてみる](#botをvcに参加させてみる)
3. [スラッシュコマンドに引数を追加して、コマンド呼び出し時に参加するVCを指定できるようにする。](#スラッシュコマンドに引数を追加してコマンド呼び出し時に参加するvcを指定できるようにする)
4. [関連記事](#関連記事)


## 開発環境
OS (Windows11)
discord.js (14.7.1)
node.js (18.13.0)
npm (8.19.3)
@discordjs/voice (^0.14.0)



## BOTをVCに参加させてみる

* VSCodeでターミナルを開き、必要なものをnpmを使用してインストール
```
npm i @discordjs/voice --save
```

* 参加させたいVCを右クリック、IDをコピーし保管する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/5a381494-d436-dec9-7ed7-e7dec3310f92.png)

* config.jsonのLISTENERの中に記述。
```
    "LISTENER": {
        "CLIENT_ID": "ここにBOTのCLIENT_IDを記述",
        "TOKEN": "ここにBOTのTOKENを記述",
        "VC_ID": "ここにBOTを参加させるVCのIDを記述"
    },
    "GUILD_ID": "ここにBOTを追加したサーバーのIDを記述"
```

* `commands`フォルダ直下に`join.js`を作成。中身を記述。
一応、[公式ドキュメント](https://discordjs.guide/voice/voice-connections.html#cheat-sheet)。

```
const { SlashCommandBuilder } = require('discord.js');

// BOTをVCに参加させるために必要。
const { joinVoiceChannel } = require('@discordjs/voice');

const { LISTENER } = require('../config.json');

module.exports = {
	data: new SlashCommandBuilder()
        // コマンドの名前
		.setName('join')
        // コマンドの説明文
		.setDescription('VCに参加。'),
	async execute(interaction) {
        // VCに参加する処理
		const connection = joinVoiceChannel({
			guildId: interaction.guildId,
			channelId: LISTENER.VC_ID,
			adapterCreator: interaction.guild.voiceAdapterCreator,
		});
		await interaction.reply('参加しました！');
	},
};
```

* VSCodeでターミナルを開き、`node deploy-commands.js`、`node index.js`を行い、Discordでコマンドを入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/6d038f59-1e16-f079-e37e-48505f2605a3.png)
無事、BOTがVCに参加してくれました！



## スラッシュコマンドに引数を追加して、コマンド呼び出し時に参加するVCを指定できるようにする。

* SlashCommandBuilderに対して、Optionを追加する。
[公式ドキュメント](https://discordjs.guide/slash-commands/advanced-creation.html#adding-options)

```
const { SlashCommandBuilder, ChannelType } = require('discord.js');
const { joinVoiceChannel } = require('@discordjs/voice');
module.exports = {
	data: new SlashCommandBuilder()
        // コマンドの名前
		.setName('join')
        // コマンドの説明文
		.setDescription('VCに参加。')
		// コマンドのオプションを追加
        // 今回はチャンネルを選ばせたいので、addChannelOptionを使用
		.addChannelOption((option) =>
			option
                // optionの名前
				.setName('channel')
                // optionの説明
				.setDescription('The channel to join')
               // optionが必須かどうか
				.setRequired(true)
               // チャンネルのタイプをVCに指定
				.addChannelTypes(ChannelType.GuildVoice),
		),
	async execute(interaction) {
		const voiceChannel = interaction.options.getChannel('channel');
        // VCに参加する処理
		const connection = joinVoiceChannel({
			guildId: interaction.guildId,
			channelId: voiceChannel.id,
			adapterCreator: interaction.guild.voiceAdapterCreator,
		});
		await interaction.reply('参加しました！');
	},
};
```

* 再び`node deploy-commands.js`、`node index.js`を行い、Discordでコマンドを入力。
VCを選択できるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/22029b49-13a7-ed20-3476-ac0a21a9b0c9.png)
先ほどと変わらずにListener-botがVCに参加してくれました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/b31596b9-06e8-3359-f2cb-2feaf2142d91.png)
（VC2を選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/5f0e8295-2b71-d0ed-d08e-941789cb3b0e.png)

## 関連記事
* [【Windows11】Discord BOTを開発するための開発環境を整える。](https://qiita.com/Mori-chan/items/add6f63b04f70ff53732)
* [【Discord.js V14】Discord BOTにスラッシュコマンドを実装してみる](https://qiita.com/Mori-chan/items/2e869c0e2060b78f0380)
* 【Discord.js V14】Discord BOTをVCに参加させてみる
* [【Discord.js V14】２つのBOTを別々のVCに参加させてみる](https://qiita.com/Mori-chan/items/7d598933753d0abe1b91)
* [【Discord.js V14】スラッシュコマンドのオプションで、既に選択済みの選択肢を２つ目の引数のリストから消す。](https://qiita.com/Mori-chan/items/89ad3245443f1e8ace07)
* [【Discord.js V14】Discord BOTにVCに音楽を流す機能を実装してみる](https://qiita.com/Mori-chan/items/84622c733dc43c419dc5)
* [【Discord.js V14】Discord BOTにVCから１人分の音声を取得して、録音する機能を実装してみる](https://qiita.com/Mori-chan/items/8fcb1770c4d0020a8284)
* [【Discord.js V14】VC１からVC２に音声をStreaming（中継）するBOTを作成する。](https://qiita.com/Mori-chan/items/e9ced87c0d68a9eb2a9a)
* [【Discord.js V14】取得するVCの音声をロールによって判別する](https://qiita.com/Mori-chan/items/41cd914bb9a93d930bff)