Zenn
😶‍🌫️

Discord.jsのフレームワーク Sapphire が便利すぎる

2022/03/20に公開
JavaScript
Node.js
TypeScript
discord.js
tech

Sapphire とは？

公式サイト

次世代オブジェクト指向のdiscord.jsボットフレームワークです。
Sapphireは、Discordボットを作成するために必要なすべての機能を提供することを目的としたコミュニティ主導のフレームワークです。

といった感じです。

なにが良いのか

とりあえずBOT制作が楽になります。
実際使ってみて、とにかく使いやすくて書いてて楽しかったです。
プラグインを作ることもできるので機能の分割なども楽にできます。

例えば

とりあえずメッセージベースのコマンドで比較してみます。

discord.jsのみの場合

index.ts
import { Client, Message } from 'discord.js'

const prefix = '!'

const client = new Client({
    intents: ['GUILDS', 'GUILD_MEMBERS', 'GUILD_MESSAGES', 'DIRECT_MESSAGES'],
})

const commands = [
    {
        name: 'ping',
        description: 'Ping!',
        execute(message: Message, ...args: string[]) {
            message.reply('Pong!')
        },
    },
]

client.on('messageCreate', (message) => {
    if (!message.content.startsWith(prefix)) return
    const args = message.content.slice(prefix.length).split(/ +/)
    const commandName = args.shift()
    const command = commands.find((command) => command.name === commandName)
    if (!command) return
    command.execute(message, ...args)
})

client.login('***')

Sapphireを使った場合

index.ts
import { SapphireClient } from '@sapphire/framework'

const client = new SapphireClient({
    defaultPrefix: '!',
    intents: ['GUILDS', 'GUILD_MESSAGES'],
})

client.login('***')
commands/ping.ts
import { ApplyOptions } from '@sapphire/decorators'
import { Command, CommandOptions } from '@sapphire/framework'
import type { Message } from 'discord.js'

@ApplyOptions<CommandOptions>({
    description: 'Ping!',
})
export class UserCommand extends Command {
    public async messageRun(message: Message) {
        return message.reply('pong!')
    }
}

Sapphireのほうがわかりやすいしかっこいいですね(？)

使い方

こちらに書いてある内容を多少省いて書いていきます。

cliをインストール

Sapphireのcliをインストールします

yarn global add @sapphire/cli

プロジェクトを作成

sapphire new

色々と聞かれるので答えてください
今回はこんな感じで答えました。

√ What's the name of your project? ... my-sapphire-bot
√ Choose a language for your project » TypeScript (Recommended)
√ Choose a template for your project » Default template (Recommended)
√ What format do you want your config file to be in? » YAML
√ What package manager do you want to use? » Yarn (Recommended)
√ Do you want to use Yarn v3? ... yes
√ Do you want to create a git repository for this project? ... no

するとテンプレートリポジトリがクローンされて色々とファイルが作成されます。

コマンドを作る

プロジェクトディレクトリ内でコマンドを実行します。

sapphire g command helloworld

するとsrc/commands/helloworld.tsが作成されます。

src/commands/helloworld.ts
import { ApplyOptions } from '@sapphire/decorators';
import { SubCommandPluginCommand, SubCommandPluginCommandOptions } from '@sapphire/plugin-subcommands';
import type { Message } from 'discord.js';

@ApplyOptions<SubCommandPluginCommandOptions>({
	description: 'A basic command'
})
export class UserCommand extends SubCommandPluginCommand {
	public async messageRun(message: Message) {
		return message.channel.send('Hello world!');
	}
}

このUserCommandクラス内のmessageRun関数がコマンド実行時の関数です。
このコードだと!helloworldをチャットに入力するとHello world!が返ってきます。

リスナーを作る

まずはコマンドを実行します。

sapphire g listener ready-listener

するとsrc/listeners/ready-listener.tsが作成されます。

src/listeners/ready-listener.ts
import { ApplyOptions } from '@sapphire/decorators';
import { Listener, ListenerOptions } from '@sapphire/framework';

@ApplyOptions<ListenerOptions>({})
export class UserEvent extends Listener {
  public run() {}
}

中身はこんな感じ。
UserEventクラス内のrun関数がリスナー実行時の関数です。

そしたらイベントを指定して、ボットの情報をログに流すようにしてみましょう。

src/listeners/ready-listener.ts
import { ApplyOptions } from '@sapphire/decorators';
import { Events, Listener, ListenerOptions } from '@sapphire/framework';
import type { ClientEvents } from 'discord.js';

@ApplyOptions<ListenerOptions>({
  event: Events.ClientReady
})
export class UserEvent extends Listener {
  public run(...args: ClientEvents['ready']) {
    const [client] = args;
    console.log(`${client.user.tag} is ready!`);
  }
}

こんな感じになりました。

動かす

まずsrc/.envを編集します。

src/.env
# Tokens
DISCORD_TOKEN="[BOTのトークン]"
OWNERS="オーナー(管理者 or 作成者などなど)のユーザーID"

そしたら早速実行してみましょう。

yarn dev

するとログに色々流れてきます。

2022-03-20 16:13:54 - INFO  - Logging in
2022-03-20 16:13:55 - INFO  - logged in
[BOTタグ] is ready!
1.0.0
        [+] Gateway
        </> DEVELOPMENT MODE
2022-03-20 16:13:55 - INFO  - ├─ Loaded 25  arguments.
2022-03-20 16:13:55 - INFO  - ├─ Loaded 6   commands.
2022-03-20 16:13:55 - INFO  - ├─ Loaded 20  listeners.
2022-03-20 16:13:55 - INFO  - ├─ Loaded 15  preconditions.
2022-03-20 16:13:55 - INFO  - ├─ Loaded 2   routes.
2022-03-20 16:13:55 - INFO  - ├─ Loaded 3   mediaParsers.
2022-03-20 16:13:55 - INFO  - └─ Loaded 3   middlewares.

コマンドを実行するとこんな感じ。

こんな感じでかなりかんたんにdiscordのbotを作ることが出来ます。

その他

ここで紹介したのはほんの一部の機能で、他にもたくさんの機能があります。今回紹介してない便利機能もたくさんあるので公式サイトでぜひ確認してみてください。

Discussion