Discord.jsをv13からv14にアップデートしたメモ


毎回破壊的な変更がありますが、今回も破壊的な変更がありました。

v12からv13に上げたときも変更が必要でしたが今回も必要でした。

https://qiita.com/n0bisuke/items/cc4deef076ecf86421f5

## v13(13.16.0)からv14(14.11.0)

元々がdiscord.jsのv13.16.0を利用していて今回アップデートしてv14.11.0にしました。

個人的に使ってる箇所的には起動時の処理とボタン周りの2箇所の変更が必要でした。

```bash
yarn add discord.js
```

yarn addでアップデートできます。

## 1. 立ち上げ箇所の変更

[こちらの記事](https://qiita.com/darakeee/items/e5f3c7349b36f6eaffa1)を参考に、v13で以下のようにしていた箇所を

```app.js
//Discord立ち上げ
const { Client ,Intents } = require('discord.js');
const client = new Client({
    intents: [
        Intents.FLAGS.GUILDS,
        Intents.FLAGS.GUILD_MESSAGES
    ]
});
```

v14では以下のように変更しました。

```app.js
const { Client, GatewayIntentBits, Partials, ApplicationCommandType, ApplicationCommandOptionType } = require('discord.js');

const client = new Client({
    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages], partials: [Partials.Channel]
});
```

### コード全体

express読み込みなどもあるので余計なコードありますが、一旦メモ的に載せておきます。

- v13系時点のコード

```app.js
'use strict';

require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

const appInit = require('./server');

//Discord立ち上げ
const { Client ,Intents } = require('discord.js');
const client = new Client({
    intents: [
        Intents.FLAGS.GUILDS,
        Intents.FLAGS.GUILD_MESSAGES
    ]
});

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

//各種コマンド読み込み
const {readCommands, readBtnActions} = require('./libs/readActions');
const commands = readCommands();
const btnActions = readBtnActions();

client.on('messageCreate', async msg => commands.forEach(async command => await command(msg, client)));
client.on('interactionCreate', async interaction => btnActions.forEach(async btnAction => await btnAction(interaction)));

client.login(process.env.DISCORD_TOKEN);

const myConfig = function (req, res, next) {
    req.discordClient = client;
    next()
}

app.use(myConfig);
appInit(app);

app.listen(process.env.PORT || 3000);
```

- v14系

```js
'use strict';

require('dotenv').config();

const express = require('express');
const app = express();
app.use(express.json());

const appInit = require('./server');

/**
 * Discord設定
 */
const { Client, GatewayIntentBits, Partials, ApplicationCommandType, ApplicationCommandOptionType } = require('discord.js');

const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages], partials: [Partials.Channel] });

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

const {readCommands, readBtnActions} = require('./libs/readActions');
const commands = readCommands();
const btnActions = readBtnActions();

client.on('messageCreate', async msg => commands.forEach(async command => await command(msg, client)));
client.on('interactionCreate', async interaction => btnActions.forEach(async btnAction => await btnAction(interaction)));


client.login(process.env.DISCORD_TOKEN);

const myConfig = function (req, res, next) {
    req.discordClient = client;
    next()
}

app.use(myConfig);
appInit(app);

app.listen(process.env.PORT || 3000);
```

## 2. ボタンの変更

ボタンの指定も若干異なってます。

v13では以下のようにMessageButtonを呼び出して利用してましたが、v14ではButtonStyleを利用しています。

- v13系

```js
const { MessageActionRow, MessageButton } = require('discord.js'); 

const button = new MessageActionRow()
    .addComponents(
        new MessageButton()
            .setCustomId('primary')
            .setLabel('Primary')
            .setStyle('PRIMARY'),
    );

const action = async (msg) => {
    if (msg.content !== ACTION_NAME) return;
    // console.log(msg);

    msg.reply({ content: 'ボタンサンプルだよ', components: [button] });
}
```

- v14系

buttonオブジェクトの作り方も異なりますね。

```js
const { ButtonStyle } = require('discord.js');
const button = {
    label: 'test',
    style: ButtonStyle.Primary,
    customId: '1234'
}

const action = async (msg) => {
    if (msg.content !== ACTION_NAME) return;

    msg.reply({ content: 'ボタンサンプルだよ', components: [button] });
}
```

msg.replyをする際にcomponentsの引数に投げ込む使い方は同じでいけました。

## まとめ

今回その他の使ってるライブラリも更新しましたが、やはり基本はそのまま動くのでDiscord.jsはかなり特殊ですね... 

それだけ機能追加が多いというのはありがたいことではありますがまた次の機会にこの記事を見に来る気がします苦笑

破壊的な変更なかなか毎回しんどいですがv12からv13のときに変更した周辺を怪しむ形でv13からv14にアップデートできたので、今回はそこまで時間はかからなかったです。v14からv15はいつになるのか、楽だといいな。