Discord.jsでbotを作ってみよう！（環境準備からスラッシュコマンドであいさつを返すところまで）


Discord.pyを使ってbotを作っていたんですが、いつの間にか開発終了してしまっていたらしいです…[※詳しく](https://gist.github.com/Rapptz/4a2f62751b9600a31a0d3c78100287f1)
お世話になりました…！
引越し先として、Discord.jsさんにお世話になろうと思います。
今回は環境作成から、おはよう！といったたらおはよう！と返してくれるところまで実施したいです。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/aac3daf8-fff2-0c07-141b-7a762513515e.png)

discordのBOTはこれからスラッシュコマンドが主流になるという話を聞いたので、それも取り入れていこうと思います。（/と入れると実行できるコマンドの事です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/f8bd69d1-bcf6-6d54-745e-5069d04de6a5.png)


<details><summary>目次</summary>
・[Discord.jsとは何か](#discordjsとは何か)
・[環境](#環境)
・[フォルダの作成](#フォルダの作成)
・[package.jsonファイルの作成](#packagejsonファイルの作成)
・[discord.jsのインストール](#discordjsのインストール)
・[コードを書く環境整備](#コードを書く環境整備)
・[BOTの設定](#botの設定)
・[ボットをサーバーへ招待する](#ボットをサーバーへ招待する)
・[コマンドの登録](#コマンドの登録)
・[BOTの起動](#botの起動)
</details>
#Discord.jsとは何か
名前の通り、JavaScriptを使ってDiscordのbotが使えるものらしいです。
[Discord.js Guide](https://discordjs.guide/)さんを参考に環境準備から実施していきたいと思います。

#環境
Windows10
node v16.13.0（今からインストールします）
discord.js 13.3.1（今からインストールします）
##Node.jsのインストール
[Node.jsのWebサイト](https://nodejs.org/en/)からインストールします。
「Recommended For Most Users」=「推奨」という意味らしいのでそちらをインストールしてみます。
<font color="lightgray">npm( Node Package Manager)のインストールが必要らしいですが、上記のインストールで完了するらしいです。</font>
コマンドプロンプトで`node -v`を実行して`v1×.××.×`が返ってきたらOKです。

##フォルダの作成
PC上の好きな場所にフォルダを作成します。
このフォルダで開発していきます。

##package.jsonファイルの作成
- コマンドプロンプトを開きます
- 上記で作成した作成したフォルダに移動します（`cd`コマンドで）
- `npm init`を実行します
- 色々質問されますが全てEnterキーで進みます（公開する場合はlicenseは確認しておいた方がいいらしいです）
- 作成したフォルダ内にpackage.jsonファイルができていたらOKです

##discord.jsのインストール
先ほどと同じ要領で、[作成したフォルダ](##フォルダの作成)で`npm install discord.js`を実行します。
`npm install discord.js @discordjs/rest discord-api-types`これも実行します。

##コードを書く環境整備
メモ帳でも開発はできますが、コードエディタを使用したほうが便利です。
私は下記の通りインストールしました。

- [Visual Studio Code](https://code.visualstudio.com/)：コードエディタです。リンク先からダウンロードできます。
- [ESLint](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)：JavaScriptの静的検証ツールです。`npm install -g eslint`でインストールできます。(`eslint -v`でバージョンが返ってきたらOK）
- [Visual Studio Code : ESLint ](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint):Visual Studio Codeの拡張機能です。拡張ボタンからインストールします。

#BOTの設定
BOTを作成して名前と画像を登録します。

- [開発者ポータル](https://discord.com/developers/applications)を開きます
- 「New Application」ボタンを押します
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/ba694ebf-ca60-d4d4-90c2-d7eaa2826b2e.png)
- 名前を付けて「Create」を押します
- 名前と画像を設定します
![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/5d746fe9-7e6b-827b-dce2-3bfb9d6f4975.png)

- BOTタブからAdd Botを押します
![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/40da7d2b-7688-7d99-8865-d731ad220030.png)


- これでbotが追加できました！



#ボットをサーバーへ招待する
- client_idを取得します。
![画像10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/79e07319-294b-43e6-163d-89f10024755b.png)
- URLに上記で取得したclient_idを当てはめてページを呼び出します

```
https://discord.com/oauth2/authorize?client_id=<ここにclient_idを入れます>&scope=bot+applications.commands
```
- 追加したいサーバーを選んで認証します

　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/384e66bf-146b-05a0-b6dc-f4143342d377.png" width="50%">

- 追加したサーバーにbotが入ってくればOK！

　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/ea029355-8de1-f7c3-ae5d-e8d9c792f80f.png" width="40%">


#コマンドの登録
いよいよBOTの中身を書いていきます！

@discordjs/builders @discordjs/rest discord-api-typesをインストールします。
`npm install @discordjs/builders`
`npm install @discordjs/rest`
`npm install discord-api-types`

[さきほど](#フォルダの作成)作ったフォルダに「config.json」というファイルを作成します。
ここに設定を書き込んでいきます。
ここに書き込んだサーバーに対してスラッシュコマンドが使えるようになります。

```config.json
{
	"clientId": "開発者ポータルの　AppName> Oath2> ClientID",
	"guildId": "導入したいサーバーを右クリックして「IDをコピー」した値を入れます",
	"token": "ここにトークンを書きます"
}
```
※トークンは人に教えてはいけません！

[さきほど](#フォルダの作成)作ったフォルダに「deploy-commands.js」というファイルを作成します。
ここにコマンドを書き込んでいきます。
`/hello`というスラッシュコマンドを作成します。

```deploy-commands.js
const { SlashCommandBuilder } = require('@discordjs/builders');
const { REST } = require('@discordjs/rest');
const { Routes } = require('discord-api-types/v9');
const { clientId, guildId, token } = require('./config.json');
const commands = [
	new SlashCommandBuilder().setName('hello').setDescription('hello!と返事します！')
]
	.map(command => command.toJSON());
const rest = new REST({ version: '9' }).setToken(token);
rest.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands })
	.then(() => console.log('Successfully registered application commands.'))
	.catch(console.error);
```

ここでコマンドプロンプトに`node deploy-commands.js`と打ち込むと、サーバーでスラッシュコマンドが使えるようになります。
![画像12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/13648c40-5482-7267-5d47-65ae7f58f0bd.png)
ただ、これだとBOTがまだオフラインなので返事が返ってきません。

#BOTの起動
BOTを起動させます。
[さきほど](#フォルダの作成)作ったフォルダに「index.js」というファイルを作成します。


```index.js
const { Client, Intents } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS] });
const { token } = require('./config.json');
client.on('ready', () => {
  console.log(`${client.user.tag}がサーバーにログインしました！`);
});
client.on('interactionCreate', async interaction => {
  if (!interaction.isCommand()) return;
  if (interaction.commandName === 'hello') {
    await interaction.reply('hello!');
  }
});
client.login(token);
```

コマンドプロンプトから`node index.js`を打ち込むと`[BOTの名前]がサーバーにログインしました！`と返ってきます。
また、招待したサーバーでBOTがオンラインになります。
![画像13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251471/5ad3f2d0-1cf1-2e51-bad5-b75f27b851d9.png)
挨拶返してくれましたね！嬉しい！
詳しい中身については書けていない（良く分かっていない）ので、次回引き続き作成していこうと思っています！


#参考文献
[Discord.js Guide](https://discordjs.guide/)
[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)