SlackからDiscordに移行してBotを作ってみた！

# はじめに

こんにちは、ゆうです。

エンジニア御用達のコミュニケーションツールである「Slack」。

皆さん御存知の通り、今年の9月からSlackの有料プランが値上げされ、それに伴って無料プランにも90日間しか履歴が保存されないという制限が追加されました。

大きな企業で使用している方はあまりデメリットを感じることはないかもしれませんが、Tech.Uniのような活動の主体がオンラインで、かつ収益のない学生団体にとっては、今回の制限追加は中々致命的なものとなりました。

そこで、今までSlackとDiscordを併用していたこともあり、11月に全面的にDiscordに移行しました。移行と同時に`JavaScript` + `Discord.js`でBotを開発して、様々な機能の自動化も実施してみました。

今回は、**Discord Botを作成する手順**と、**Discordに移行した感想**について簡単に書いていきたいと思います！


# Discord Botを作成する手順

## DiscordにBotを登録する

1. [開発者用ページ](https://discord.com/developers/applications)に行き、「New Application」をクリックします。
![001](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/2b8a4997-0967-30c5-b471-527a2c970d94.png)
2. Botの名前を入力し、規約に同意して、「Create」をクリックします。
![002](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/4c2c45fe-a0a7-c45c-2538-6b7f082d67c4.png)
3. 次に、サイドバーのBotボタンからBotを追加します。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/3736a662-f9e2-61d2-a052-c0444c9b66d0.png)
4. Botが追加されたら「Reset Token」をクリックして、トークンを生成します。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/aea2e4ca-3ee6-68c0-054f-5623cff696e9.png)
5. トークンが生成されたら「Copy」ボタンでコピーし、適当な場所に控えておきます。（後ほど使用します）
![008](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/cb14f609-07fa-5c9c-a736-66f51be56fdc.png)
4. **これでBotの登録は完了です！**
次にBotを自分のサーバーに招待してみましょう！
サイドバーの「OAuth2 → URL Generator」をクリックして、SCOPESの「Bot」にチェックを入れます。
![003](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/233ab9a3-a98e-e327-cf85-09377f63e583.png)
5. 次にその下に出てくる許可したい権限を選択して、一番下に生成された招待URLをコピーします。
![004](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/53a8865a-9b5f-c423-751d-ec3f7fae6216.png)
6. コピーした招待URLをブラウザのアドレスバーにペーストして、追加するサーバーを選んで追加します。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/25fc53a4-26e4-884a-2e56-74726c3378c0.png)
7. これでBotの登録と招待が完了しました！

## BotをJavaScriptで書いてみる

次に、いよいよJavaScriptでBot本体のコードを書いていきたいと思います。

:::note warn
注意
2022年7月頃、`discord.js`のバージョン`14.0.0(v14)`がリリースされました。
v13以前のものと記述方法が大幅に異なりますので、注意してください。
この記事では`14.6.0`を使用しています。
:::


:::note info
開発環境
この記事では以下の開発環境で開発しています。

* Visual Studio Code
* macOS Ventura `13.1`
* npm `8.19.2`
* Node.js `16.18.0`
* discord.js `14.6.0`
:::

### セットアップ
まず適当なディレクトリを作成して、その中で`npm init`コマンドを実行します。（入力値は一例です）
```terminal
mkdir bot_tutorial
```
```terminal
npm init

    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help init` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (dev) bot_tutorial
    version: (1.0.0)
    description:
    entry point: (index.js) bot.js
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to /Users/yu/dev/package.json:
    
    {
      "name": "bot_tutorial",
      "version": "1.0.0",
      "description": "",
      "main": "bot.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this OK? (yes) yes
```

次に、下のコマンドで`discord.js`をプロジェクトにインストールします。
```terminal
npm install discord.js
```

### コーディング
そして、上記の`entry point`で指定したファイル（今回は`bot.js`）を、作成したディレクトリ内に作成します。


今回は、「こんにちは」と打ったら「こんにちは!」とリプライしてくれるだけの簡単なものを作成してみます。

```javascript: bot.js
const { Client, GatewayIntentBits, Events } = require('discord.js');
const client = new Client({ intents: [ 
  GatewayIntentBits.Guilds,
  GatewayIntentBits.GuildMessages,
  GatewayIntentBits.MessageContent,] });

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

client.on(Events.MessageCreate, (message) => {
    if (message.content === "こんにちは") {
      message.reply("こんにちは!");
    } 
});

const token = "先程コピーしたトークンを貼り付け";

client.login(token);
```
コードはこれだけで終わりです！
意外と簡単だったのではないでしょうか…？

### 実行例
お疲れさまでした！！
それでは実際にBotを使ってみましょう！

コマンドラインで`node bot.js`とタイプして、`Logged in as ~!`と返ってこれば、Botは正常に起動しています。

ここで、Discordのあるチャンネルで「こんにちは」とメッセージを送信すれば、画像のように「こんにちは!」と返ってくるはずです！
![Screenshot 2022-12-14 at 3.24.19 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2989644/f919942a-4a4a-720c-b9e4-ec3950b4fe22.png)


# SlackからDiscordに移行した感想
最後に、SlackからDiscordに移行した感想を書いていきます。

## 良かった点
### 1. コミュニケーションツールが統一できた
今までメインでSlackと、通話や画面共有が必要なときなどにDiscordを使用していましたが、全てDiscordに統一することができて、少し楽になりました。

### 2. Botを開発することで自動化できるようになった
この記事の本題でもありますが、これは本当に作ってよかったと思います。開発するのに多少手間取るところもありましたが、その分のメリットは十分ありました。
また、今後新たに機能を追加するとなった時にも、JavaScriptのファイルを変更するだけで実装できるので、この点も👍です。

以下、開発したBotに搭載している機能一覧です↓
* サーバー入室時のDM送信
* リアクションによるtimesチャンネルの自動作成
* ボイスチャンネル入室時間のランキング送信
* Firebaseと連携した諸々の機能…

## イマイチだった点
### 1. Botの挙動がたまに不安定
これは`discord.js`の問題なのか、自分の脳力の問題なのかはわからないですが、ある時はエラーが出るけど、この時は出ないといった感じで、若干不安定になることがあります。

### 2. 常時稼働させるためのサーバーが必要
これは当たり前で仕方のないことですが、常時稼働させるには`Node.js`が動かせるサーバーを用意する必要があります。レンタルサーバーだとXServerなどが利用でき、Raspberry Piでも動かすことができます。
現状は`Raspberry Pi + Ubuntu Server 22.04 LTS`で運用しています。

# おわり
最後まで読んでいただきありがとうございます。予想以上に長くなってしました…
今回、初めてQiitaに記事を書きましたが、やっぱり頭の中が整理されるのでアウトプットって非常に大事だなと思いました。来週ももう1本アドベントカレンダーの記事を書きますが、その後も更新していきたいと思います。

それでは~