【基本】discord.js v13 でボット作成 #1 ～ボットの作成と初起動～

## 前書き
皆さんは「Discord」で**ボット**を見たことはりますでしょうか？！？！（唐突）
**ボット**とは、一定のタスクや処理を自動化するためのアプリケーションやプログラムのことを指します。

今回は、その**ボット**をイチからココからニニから開発をしていきます。
また、投稿主は「**Windows10**」を使用しているため、記事の内容も**Windows10を使用している方向け**になっています。
ご了承ください。

## 開発する環境を整える
今回、ボットを開発するのにあたって、次のものが必要になっていきます。
要するに、物を作るのに必要な「**道具**」というイメージです。

* パソコン (スマホでもできますがこのシリーズではすべてパソコンで行います)
* Node.js (最低要件[^1]:16.6.0)
* npm (Node.jsをインストールするとセットでついてくるため手順不要)
* discord.js v13
* コードエディタ or IDE

## ダウンロード・インストール
細かいことなんですが、「ダウンロード」と「インストール」は違う意味らしいです。
しかし、使い分けるのがとてもとてもとても**面倒くさい**のでこの記事では **「インストール」に統一します。**

**ダウンロード**
ダウンロードとは、ネット上にあるファイルを手元の端末にコピーすることを意味します。

**インストール**
アプリなどのソフトウェアをスマホやパソコンの中で使用できる状態にすること

さっそくやっていきます。
### Node.js のインストール
まず、以下のリンクをクリックし、サイトへ進んでください。

https://nodejs.org/ja/download/

今回、「**discord v13**」を使用するにあたって最低でも **「Node.js」のバージョンは16.6.0以上である必要**があります。
そのため、「最新版」をクリックし、その中で任意(ファイル名が「node-16.6.0.xxx」以上)のものを選び、インストールしてください。
今回は「`node-v17.5.0-x64.msi`」をインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/16e0e983-efac-016c-e7dd-fea0e384fc36.png)
先ほどインストールしたものを開くと次のようなインストーラーが出てきます。
基本的にインストーラーの指示に従えば良いです。特にいじらず「Next」をクリックしていけばよいと思われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/f36c0b04-c1c6-1475-c393-9d2cca83a468.png)
インストールが完了すれば次の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/0828c449-63be-2c02-20bf-c7f9f4ed7546.png)
#### インストールできたか確認
**コマンドプロンプト**[^2]を開きます。
コマンドプロンプトの使用方法は次をご覧ください > https://eng-entrance.com/cmd-usage
<details><summary> コマンドプロンプトの開き方
</summary>［Windows］＋［R］キーを押し、［名前］入力ボックスに「cmd」と入力し[Enter]または[OK]をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/b0491389-eb98-2348-ad70-4663d4e1bdda.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/f7fb1f5f-50be-f5ab-2f6f-3d7456184ffe.png)
</details>

そしたら黒い画面に以下のコマンドを入力してください。

```shell:cmd
node --version
```

以下のような文が表示されたらインストールは成功です。

```shell:cmd
v17.5.0
```

必要な物という中に「npm」というものが入っていたと思います。
しかしこちらは「Node.js」をインストールした際にセットで入っているため **「npm」自体はインストールする必要はありません。**

一応npmも入っているのか確認してみましょう、先ほどのコマンドプロンプト（黒い画面）にて、今度は以下のコマンドを入力してください。

```shell:cmd
npm --version
```

そうしたら、次のような文が表示されるはずです。

```shell:cmd
7.6.3
```

これで、必要な物のうち、二つがインストールできました。

- [x]  Node.js
- [x]  npm
- [ ]  discord.js v13
- [ ]  コードエディタ or IDE

### discord.js v13 のインストール
「discord.js v13」のインストールの方法はかなり簡単です。
しかし、**まだインストールはしなくて大丈夫です。今は、方法だけを紹介しますが、**実際にインストールするのは後程紹介**いたします。
先ほどと同じくコマンドプロンプトを開いたら、今度は以下のコマンドを入力します。

```shell:cmd
npm install discord.js
```

## ボットのアカウント作成
以下のリンクをクリックし、DEVELOPER PORTALにアクセスしてください。

https://discord.com/developers/applications

上記のリンクをクリックすると、以下のような画面に移ると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/d573086e-491f-4c5b-f784-e4a65299b9f6.png)

右上の「New Applications」というボタンをクリックし、「NAME」のところに任意の名前を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/8136181c-e951-2eab-97cf-e7b34249ad91.png)

名前を入力（今回は「ｱﾋｬの助侍」）したら、「Create」ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/e402bd56-2a8b-5aae-73dd-57ef83fd72ef.png)

左の「SETTINGS」の列にある「Bot」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/401540d9-696d-2053-6dba-361c70811fcd.png)

右にある「Add Bot」をクリックし、ボットを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/8cd53e4a-3354-f1a7-37a0-38e63ffb9946.png)

作成に成功していれば、以下のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/7f64357e-3b6c-57a5-f78c-83150b9aae11.png)

### サーバーに招待
今度は「Setting」列から「OAuth2」を選択し、「URL Generator」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/ed640219-b6e0-2fdc-bf38-89437773a4dc.png)

「SCOPES」ボックスの中から「bot」にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/be5a3112-572e-baf6-a75a-3b13cded46cf.png)

すると、下に何やらなにやらレトロ感を感じるラーメン屋のメニューくらいずらっと選択項目があるボックスが出てきました。「ニンニクﾏｼﾏｼｰｯ!!!(‘Д‘ｎ）(‘Д‘ｎ）(‘Д‘ｎ）」
これは招待する際にボットに付与される権限を選択する項目です。ほかの人に宣伝するときなどはここから任意の権限を選択しましょう。
今回は「Administrator（管理者）」のところにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/33b3291a-51d5-343c-c141-c2f36bfcb070.png)

そしたら「**ふわっふわもちもちプリンが完成！**」なんてことはありませんのでご安心を。
下にURLが生成されました。これをコピーし、開きましょう。
（ちなみに今回管理者の権限を選択したため「`permissions=`」の後の数字が「`8`」になっています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/e1662e4e-05aa-3685-ec04-89c438ce5f54.png)

そしたら、真ん中の「Select a server」のところをクリックし、ボットを入れたいサーバーを選択し、「Continue」をクリックしてボットを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/0c3aac25-8b40-a06b-59c6-8e22297e759d.png)


### インテンツ(Intents)
そしたら少し下にスクロールし、「Privileged Gateway Intents」の設定に移ります。
「Intents」って何？って思った方は以下の記事が本当と書いてマジわかりやすいので見てみてください。

https://zenn.dev/disneyresidents/articles/discordintents

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/38e7514e-16db-47bc-c2bd-335d3eb4807f.png)

「**PRESENCE INTENT**」「**SERVER MEMBERS INTENT**」「**MESSAGE CONTENT INTENT**」の三つにチェックを入れ、下に出てきた「Save Changes」をクリックし変更を保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/83127f97-f571-5b6c-38e8-d8f58cb3c4f8.png)

:::note warn
注意
「MESSAGE CONTENT INTENT」は2022年4月30日まで施行されません。
:::

### トークン(TOKEN)
先ほどの画面から一番上にスライドし、現在のアイコンやボットの名前が表示されている部分に行きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/aa3086f8-2ff8-8a3b-a5e9-ddbbd69bfabf.png)

「TOKEN」と小さく書いてある部分の「Copy」をクリックし、トークンをコピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/13fcce8a-e8ed-0160-726f-3bf5d15b41d4.png)

:::note alert
トークンの扱い
今コピーしたトークンは漏洩しないよう厳重に管理してください。
このトークンが第三者に不正利用されるとボットが乗っ取られる可能性があります。
::: 

**これでボットのアカウント作成等は完了です。早速開発をしましょう！**

## 早速開発をしていく（コーディング[^3]）
コーディングをする環境には、大きく分けて**二つの方法**があります。
### オンライン上で開発
GlitchやRepl.itのようにオンライン上で開発し、実行することができるものがあります。

### 自分のPCで開発
その名の通り自分のPC上で開発をし、実行します。（実行の際にはサーバーにファイルを送信して、実行することもあります）

このシリーズでは主に**自分のPCでの開発**を行います。
今回は初心者向けということなので、オンライン上で開発する方法も紹介していきます。

### オンライン上で開発
今回は、「Glitch」を使用して開発をしていきます。
以下のリンクをクリックして、私が作成したテンプレートに進みます。

:::note warn
注意ﾀﾞｿﾞ❕
編集時点では、「Glitch」にて使用できるNode.jsのバージョンは「16.12」までとなっていて、最低要件の「16.6」を満たしておりません。
そのためv13の新しい機能などが使えない場合があります。ご了承ください。
:::

https://glitch.com/edit/#!/discordjs-v13-templete

右上の「Remix」を押すと、自分が編集できる状態になります。
もし、ログイン・新規登録されていない場合で、分からない際は、サイトの指示または他の人の記事を見ていただくことを推奨します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/4d508ffa-8dea-505e-3cd2-cc8d03ed00d9.png)

左の「Files」列から「`.env`」をクリックして開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/d90a21fe-8c0b-ef74-dd7e-a23bb62c9331.png)

そしたら真ん中らへんにある「DISCORD_BOT_TOKEN」の右にある「Variable Value」に先ほどコピーしたトークンを貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/c006757d-0e3c-a066-e71f-c9b126222cff.png)

そしたら完了です！
Discordを見てみましょう。トークンを入力したボットがオンラインになっていれば成功です！
そのボットにメンションをしてみて、返信が返ってくることも確認しましょう。

### 自分のPCで開発
先ほども書きましたが、編集主はWindows10を使用しているため、紹介するのもWindows10を使用している方向けになっています。予めご了承ください。
また、コードエディタまたはIDE(総合開発環境)は開発の際にほぼ必須となってくるので、必ず使えるようにしておきましょう。
今回は「**Visual Studio Code**」というコードエディタのインストール方法を紹介します。
#### Visual Studio Code のインストール
まずは、下記リンクにアクセスしてください。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

トップにある「今すぐダウンロード」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/f51850e0-cf31-b379-743e-98efd7e04062.png)

そしたら、自分のプラットフォームにあったものをクリックしインストールしてください。
今回は「`VSCodeUserSetup-x64-1.64.2`」をインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/a9282f7e-2e33-7703-fb68-9bf5446cfa9f.png)

使用許諾契約書に同意したら、後はインストーラーの指示に従うだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/7afcbd30-747d-23ef-3053-0da2483d0e8b.png)

**これでVisual Studio Codeのインストールは完了しました。**
開発に戻ります。

一応Cドライブ直下ではないデスクトップなど、別でもどこのフォルダでも構いませんがいつでもアクセスできやすい場所に任意の📁フォルダーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/2b6670b6-0ee0-184a-d3cd-f2c0f65dc889.png)
そしたらそのフォルダでコマンドプロンプトを開きます。
開き方はファイルのパスの部分に「`cmd`」と入力すればおｋです。
![cmdの開き方.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/9fcb63fa-d400-ebd5-0055-603ab3810be8.png)
そしたら以下のように黒い画面が出てくるので、「npm init」と入力します。

```shell:cmd
npm init
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/e2eb843c-0263-262f-5cdf-7520d17659cc.png)
色々出てきますが、最初の「package name」以外は基本的に「Enter」を押し続けるでおｋだと思われます。
「package name」はテキトーな名前を付けておいてください。今回は「`test`」にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/b2276068-525e-f919-aeb6-93117ac1f751.png)
そしたら今度は「`npm install discord.js`」と入力します。

```shell:cmd
npm install discord.js
npm install dotenv
```

以下の画面になればdiscord.jsのインストールは成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/72cdd2b0-b2a4-cfd9-8717-34021411ed74.png)

そしたら今度は以下のコマンドを打ちます。
```shell:cmd
npm install dotenv
```

そしたら、作成したフォルダ内で右クリック（なんかポップアップが出てくる方）し、「Code で開く」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/73643f4f-100b-8e20-aa76-ae3d0522b819.png)

すると、以下のような画面になります（背景や一番左のタブの内容は違う可能性があります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/6e035e9e-da66-f37e-a602-54cb7719bf00.png)

いろいろなファイルがあるところの上にある4つのボタンの中から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/76f15010-a43d-e16c-71d3-0c9343bc2b28.png)

このボタンをクリックすると新しいファイルを作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/78c7227c-718e-937a-cf93-fe97320091f8.png)

そしたらファイル名を「`index.js`」にします（任意のものでおｋなはず...　一応`index.js`にした方が良いと思われます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/57e27e1d-5978-513d-310a-ac1a5359f4d1.png)

作成し終えたらそのファイルを開き、以下の様なコードを書きます。

```javascript:index.js
const { Client, Intents } = require('discord.js'); //discord.js からClientとIntentsを読み込む

const client = new Client({intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS, Intents.FLAGS.GUILD_MESSAGES]});  //clientインスタンスを作成する

client.once('ready', () => { //ここにボットが起動した際のコードを書く(一度のみ実行)
	console.log('起動完了'); //黒い画面(コンソール)に「起動完了」と表示させる
});

client.login('トークン'); //ログインする
```

`intents:` には任意のインテンツを入れます。
下記のものを丸パクリしてもらったほうが早いと思います。

```js:インテンツの指定例
const client = new Client({intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS, Intents.FLAGS.GUILD_MESSAGES]}); 
```

指定できるインテンツ一覧
- `GUILDS`
- `GUILD_MEMBERS`
- `GUILD_BANS`
- `GUILD_EMOJIS_AND_STICKERS`
- `GUILD_INTEGRATIONS`
- `GUILD_WEBHOOKS`
- `GUILD_INVITES`
- `GUILD_VOICE_STATES`
- `GUILD_PRESENCES`
- `GUILD_MESSAGES`
- `GUILD_MESSAGE_REACTIONS`
- `GUILD_MESSAGE_TYPING`
- `DIRECT_MESSAGES`
- `DIRECT_MESSAGE_REACTIONS`
- `DIRECT_MESSAGE_TYPING`
- `GUILD_SCHEDULED_EVENTS`

インテンツに関して先程同様 **超絶スーパーエキゾチックハイパー 理解しやすい**記事があったので載せておきます。

https://zenn.dev/disneyresidents/articles/discordintents

`トークン` には先ほどコピーしたトークンを貼り付けます。

そしたらまた先程の要領でコマンドプロンプトを開きます。
今度は以下のコマンドを打ちます。

```console:cmd
node index.js
```

:::note notice
`package.json` 内に `main:index.js` と書いてあれば `node .`で実行可能です。
:::

Discordでボットがオンラインになり、黒い画面に「起動完了」と表示されれば成功です。

## エラー解決
VisualStudioCodeインストール中のエラーや、ネットワーク環境でのエラーはそれに関するサイトをご確認ください。

**トークン is not defined**
トークンが正常に入力されていません。
コードをもう一度確認し、そのトークンがあってるかも確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/c87cf7c9-979c-ac8e-a9ec-5ff9cbb6b7bc.png)

**CLIENT_MISSING_INTENTS**
クライアントにインテンツが指定されていません。
現在開発しているバージョンでは**インテンツの指定が必須となります。**
`const client = new Client();` となっていませんか？
`const client = new Client({intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS, Intents.FLAGS.GUILD_MESSAGES]});  ` 等に訂正しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1940116/75dd4a0c-c10c-4435-049b-94f2ee9180ec.png)


## 引用

https://businesschatmaster.com/tool/bot

http://www.toha-search.com/it/install-download.htm

[^1]: 最低でも必要な条件の事。今回は「バージョン16.6.0以上必須」
[^2]: コマンドプロンプトは「cmd」と呼ばれることも多いです。
[^3]: プログラミング言語を使ってプログラミングコードを記述していく作業のこと

次回 -> [【基礎】discord.js v13 でボットを作る ～コマンド作成～](https://qiita.com/hitori_yuu/items/3b6c02fac5c610f0615a)