【第一回】discord.jsでbotを作る方法【基礎編】

discord.jsでDiscordのbotを作る（第一回）

基礎編です。気まぐれ更新なのでやる気がなくなれば途中で沈没するDisocrdのボット開発記事です。

本シリーズでやること

この開発記事シリーズは基本備忘録的な感じです（備忘録ってなに？）。

基本的にはdiscord.js Guideに従って、ある程度までコマンドの基礎の解説あたりまで進めていきます。その後は筆者の個人開発の記録として綴っていきますが、いずれにせよここがスタート地点。ここがわからん場合はJSの基礎などをやると良き。筆者も基礎は分かってないけど。

フォルダの作成とインストールをザーッと

とりあえず、テキトーなフォルダ（testとかなんでもOK）作ってVS Codeなどのエディタで開きます。そして、ターミナルを開いたら以下のコマンドを入力していく。

npm init -y

準備ができたらdiscord.jsをインストールしていきます。

npm install discord.js

ドキュメントではESLint入れておけば、なんか色々楽だよって言ってるから入れておく。一貫性のあるコードにしておけばリファクタリングが少なくて済むし、誰かに質問する時とかコード見せる必要ある時とかに恥をかかなくて済む。

npm install --save-dev eslint @eslint/js

ドキュメントではESLint入れておけば楽だ、とのこと

ESLintをインストールしたら、プロジェクト直下にeslint.config.jsというファイルを作って、以下の内容をコピペしたり自分で必要なものを探すべし。わからん場合は別に入れなくてもいいっぽいです。

const js = require('@eslint/js');

module.exports = [
	js.configs.recommended,
	{
		languageOptions: {
			ecmaVersion: 'latest',
		},
		rules: {
			'arrow-spacing': ['warn', { before: true, after: true }],
			'brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
			'comma-dangle': ['error', 'always-multiline'],
			'comma-spacing': 'error',
			'comma-style': 'error',
			curly: ['error', 'multi-line', 'consistent'],
			'dot-location': ['error', 'property'],
			'handle-callback-err': 'off',
			indent: ['error', 'tab'],
			'keyword-spacing': 'error',
			'max-nested-callbacks': ['error', { max: 4 }],
			'max-statements-per-line': ['error', { max: 2 }],
			'no-console': 'off',
			'no-empty-function': 'error',
			'no-floating-decimal': 'error',
			'no-inline-comments': 'error',
			'no-lonely-if': 'error',
			'no-multi-spaces': 'error',
			'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
			'no-shadow': ['error', { allow: ['err', 'resolve', 'reject'] }],
			'no-trailing-spaces': ['error'],
			'no-var': 'error',
			'no-undef': 'off',
			'object-curly-spacing': ['error', 'always'],
			'prefer-const': 'error',
			quotes: ['error', 'single'],
			semi: ['error', 'always'],
			'space-before-blocks': 'error',
			'space-before-function-paren': ['error', {
				anonymous: 'never',
				named: 'never',
				asyncArrow: 'always',
			}],
			'space-in-parens': 'error',
			'space-infix-ops': 'error',
			'space-unary-ops': 'error',
			'spaced-comment': 'error',
			yoda: 'error',
		},
	},
];

Discord Developer Portalでボットを招待

Discord Developer Portalで「New Applications」を押下、新しいbotを作成。botのTOKEN（トークン）をコピっておきましょう。トークンってのはボット制作において必要な情報です。認証作業に必要だったりするパスワード的な役割なので絶対、他人に知られてはいけません。いいね？

ほんで、それが終わったらbotをDiscordサーバーに招待しましょう。ここではひとまず、練習用なのでTESTみたいな名前をつけたディスコ鯖を新しく作っておきましょう。

Discord Diveloper PortalのOAuth2に「OAuth2　URL Generator」があるはずなので、そこの項目から「bot」⇨「Administrator」を選んで、URLをコピーしてブラウザで開くと、Disocordの画面が出てくるはず。招待したら次のステップ。

設定ファイルの作成

先ほどのTOKENを利用するためにプロジェクト直下にconfig.jsonという名前のファイルを作成。そこに以下のように書く。

{
	"token": "ここにあなたのトークンは貼るべし"
}

お待たせ！メインファイルを作る

ここまできたら、botのメインファイルを作っていく。公式ではその名前をindex.jsにしてるから筆者もそうしているけど、他の人のリポジトリ覗くとmain.jsとかになってたりもする。これはその人の開発バックグラウンドによる慣習とか色々あるだろうから、特にこだわりがなければ公式に合わせても良いです。

そしたら以下の内容をサクッと書きましょー

// discord.js開発に必要なクラスをインポートしておく
const { Client, Events, GatewayIntentBits } = require('discord.js');
const { token } = require('./config.json');

// clientインスタンスを作る。
const client = new Client({ intents: [GatewayIntentBits.Guilds] });

// クライアントの準備が出来次第以下のコードを実行するよ、という感じ
// `client: Client<boolean>` とか `readyClient: Client<true>` はTYPESCRIPT開発者にとっては重要
client.once(Events.ClientReady, readyClient => {
	console.log(`Ready! Logged in as ${readyClient.user.tag}`);
});

// クライアントのトークンを照合してログインする
client.login(token);

ひとまずbotが起動！

ここまででひとまずbotが起動するはず。次回からは基本的なコマンドやメッセージなどの送信をやる予定。