【Windows11】Discord BOTを開発するための開発環境を整える。

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

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

## 目次
1. [開発環境](#開発環境)
2. [環境構築もろもろ](#環境構築もろもろ)
3. [BOTを作成してみる](#BOTを作成してみる)
4. [BOTを動かしてみる](#BOTを動かしてみる)
5. [関連記事](#関連記事)


## 開発環境
OS (Windows11)
discord.js (14.7.1)
node.js (18.13.0)
npm (8.19.3)


## 環境構築もろもろ
* [nvm-windowsでNodejsをインストール](https://qiita.com/akipon0821/items/eaeffe79221cfcd4d258)
今回インストールしたバージョンは(18.13.0)です。

* [Gitの環境構築](https://prog-8.com/docs/git-env-win)

* [Visual Studio Codeをインストール](https://sukkiri.jp/technologies/devtools/vscode_win.html)、[日本語化](https://medium-company.com/visual-studio-code-%E6%97%A5%E6%9C%AC%E8%AA%9E/)

* VSCodeに開発の際、必須な拡張機能を追加。
今回は、npm Intellisense、ESLint、Prettier – Code formatter、GitHub Repositoriesを追加。



## BOTを作成してみる
* [DEVELOPER PORTAL](https://discord.com/developers/applications)にアクセス。

* New Applicationをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/fddf84c2-dc03-aacd-558f-ae35811e019a.png)

* Nameに作成するBOTの名前を入力。

* APP ICONをクリックし、画像を登録。

* DESCRIPTIONにBOTの説明を記述。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/c64e62bf-19ab-a065-48a0-e1e67133ea2d.png)

* 左のタブからOAuth2を選択し、CLIENT IDをコピーして控えておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/5bc24e1d-40a3-83a7-e122-75a008b41c70.png)

* 左のタブからBotを選択し、Add Botボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/58c135f3-9cc6-efdc-53d5-1ca5a6e1af0d.png)

* TOKENのReset Tokenを押し、生成されたTOKENをコピーし、控えておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/abdfd6c0-f32e-83fa-982c-7a19677cea62.png)

* BOTをサーバーへ招待する
下記のリンクの`client_id=`の後にCLIENT IDを当てはめて、リンクを開く。
```
https://discord.com/oauth2/authorize?client_id=ここにCLIENT IDを入れる&scope=bot+applications.commands
```

* BOTをサーバーに招待、CLIENT IDとTOKENをコピーしてメモ帳などに控えることができたら、OK。

* 最後に、BOTを招待したサーバーへ行き、左上のサーバー名を右クリックし、IDをコピー、保管する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/79deb425-a165-74d2-4be1-4eea664db0f1.png)
    ※ IDがコピーできない場合、左下のユーザー設定→詳細設定→開発者モードをON



## BOTを動かしてみる
* 作業用のフォルダを作成しVSCodeで開く。

* VSCodeでターミナルを開き、必要なものをnpmを使用してインストール
```
npm init -y
npm i discord.js --save
npm install -g eslint
```

* 一番上の階層にconfig.jsonを作成し、中身を記述。
※LISTENERの部分は、各自のBOTの名前など好きなものに変えることをお勧めします。
```
{
    "LISTENER": {
        "CLIENT_ID": "ここにBOTのCLIENT_IDを記述",
        "TOKEN": "ここにBOTのTOKENを記述"
    },
    "GUILD_ID": "ここにBOTを追加したサーバーのIDを記述"
}
```

* 同じ階層にindex.jsを作成し、中身を記述。
[公式ガイド](https://discordjs.guide/creating-your-bot/main-file.html#creating-the-main-file)の通りに記述。
```
const { Client, Events, GatewayIntentBits } = require('discord.js');
const { LISTENER } = require('./config.json');

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.once(Events.ClientReady, c => {
    console.log(`Ready! Logged in as ${c.user.tag}`);
});

client.login(LISTENER.TOKEN);
```

* VSCodeでターミナルを開き、`node index.js`を実行。
無事に動けば、ターミナルに`Ready! Logged...(以下略)`と出力される。
※写真は２つのBOTを動かした時のものであるため、１行出力されていれば問題なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/d91182bd-b94d-f98d-8085-b9f7e0ab841d.png)

* DiscordのBOTを招待したサーバーへ行くと、右側のBOTのステータスがオンラインになっている。
※今回作成したBOTがオンラインに表示されていれば問題なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3109638/9ae743ef-7396-ea46-231d-5b89b8517a57.png)

## 関連記事
* 【Windows11】Discord BOTを開発するための開発環境を整える。
* [【Discord.js V14】Discord BOTにスラッシュコマンドを実装してみる](https://qiita.com/Mori-chan/items/2e869c0e2060b78f0380)
* [【Discord.js V14】Discord BOTをVCに参加させてみる](https://qiita.com/Mori-chan/items/2df4ad15adc79cf2a167)
* [【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)