クソしょうもないDiscord BotをWebから操作できるようにしてみた話【TypeScript】【初学者】
はじめに
記事を開いてくれてありがとうございます！JavaScript/TypeScriptをほんの少しだけ触ったことがあるだけのただのニートです。
以前、クソしょうもないDiscord Botを作成したことがありました。
あれから約1年が経ち、Botにいくつかアップデートを重ねてきました。その中で、「ブラウザからBotの機能を操作できたら面白いのでは？」と思い立ち、今回新たに挑戦してみました。
Discord Botを含め、完全無料(fly.ioだけクレジットカードは必要ですが…)で作成できるので、参考になればぜひ試してみてください。
作成したもの
実際にvercelにデプロイしたもの → (botが参加しているサーバーに入っているユーザー以外がログインするとエラーが出ます。一応誰でも導入できますが、身内鯖でのみ使用する想定なのでエラーハンドリングしてません…)
技術選定
今回Webアプリを作るにあたって、「これ使ってみたい！」とか「最近よく聞くし…」みたいなノリで技術を選びました。インフラは無料枠があることも重要ですね。
それぞれ簡単に紹介していきます。
フロントエンド
-
Next.js v15
最近フロントエンドといえばこれになってるフレームワーク。とりあえず採用！ -
NextAuth
Discord認証が爆速で実装できる。GoogleやAppleなど他のサービス認証も可能。 -
Tailwind CSS
v4出てたけど、作ったときはv3だったのでそっち使ってます。 -
Shadcn UI
Next.jsと相性抜群のUIコンポーネント。おしゃれなUIが欲しかったので導入。
バックエンド（Bot側）
-
Bun
Node.jsより速いらしいし、TypeScriptもネイティブで動く。パッケージマネージャーとしても。最近は専らBunを使ってます。 -
Hono
軽量でシンプルなWebフレームワーク。APIサーバー作るのにちょうど良い。フロントエンドまで開発出来そうな、今熱いフレームワーク。 -
Discord.js
Discord BotをJSで作るならこれ一択。情報も多いし、公式ドキュメントも充実しているので初心者でもなんとかなる。
データベース
-
Supabase(PostgreSQL)
無料枠があるし、セットアップも楽ちん。みんな使っているからとりあえずで採用。 -
Prisma
TypeScriptでDB触るならこれ。型安全で補完が効くからプロパティ名でミスらない。
インフラ
-
Vercel（フロントエンド）
Next.js作った会社のサービス。無料でデプロイできて、めちゃくちゃ簡単。 -
fly.io（バックエンド）
クレカは必要だけど、無料枠でBotも動かせる。デプロイも簡単。
ちなみに、この程度の規模ならば、わざわざSupabaseのようなBaaSを使わなくても、Botサーバーのローカル内にSQLiteを使ってDBを作成しても何ら問題ありません。
構成
構成としては、Discord Botと同時にAPIサーバーを立てて、それをWebアプリから操作するというものです。DB操作は全てサービス層で行っています。
ノードの意味：
- Webアプリケーション … Next.js
- APIエンドポイント … APIサービスのエンドポイント
- サービス層 … Botの内部サービス
- データベース … Supabase
- Botクライアント … Discord Bot（Discord.js）Discordのイベントを受け取る
- Discord … Discordサーバー
実装
ここからは、実際にどうやって作っていったかの流れについて紹介していきます。
「とりあえず動かす」→「細かいところを詰める」みたいな流れでやってます。
大まかな流れ
1. Git/GitHubの用意
まずはリポジトリを作ってバージョン管理できるようにします。
GitHubで新しいリポジトリを作成して、VSCodeでcloneします。
Gitの操作は基本GUIでやっています。
2. Discord Developer PortalでBotの登録
DiscordのBotを作るには、まずDiscord Developer Portalで新しいアプリケーションを作成します。
Botユーザーを追加して、トークンを発行。
3. Supabaseの登録
データベースとしてSupabaseを使うので、Supabaseで新規プロジェクトを作成。
PostgreSQLのDBが自動で用意されるので、urlや、ユーザー名、パスワードなどを控えておきます。
4. Botの開発
Discord.jsを使ってBotの基本機能を実装します。後にAPIとしてサービスを公開するので、Discordのイベントハンドラと、Botの内部サービスを分離して実装したほうがいいかなと思いました。
5. APIサーバーの開発
Bun + HonoでAPIサーバーを作成。
Botと同じプロセスでAPIサーバーを立てて、外部からリクエストを受け付けられるようにします。
6. フロントエンドの開発
Next.jsでWebアプリを作成。
認証（NextAuth）やUI（Tailwind, Shadcn UI）を組み込んで、APIサーバーと通信できるようにします。
WebからBotを操作するための画面を作り込んでいきます。
7. テスト
開発サーバーを起動し、テストを行います。
開発時に、モジュールごとにテストを行っていたので、わざわざテストコードなどは書きませんでした。もう少し大規模なプロジェクトになったら、テストコードを書いていきたいです。
8. fly.ioへのデプロイ
バックエンド（Bot + APIサーバー）をfly.ioにデプロイします。Dockerを使って、Bunのイメージを作成してデプロイします。
無料枠がありますが、クレジットカードが必要です。また、GitHubと連携しておけば、pushするだけで自動デプロイされるのでめちゃくちゃ楽です。
9. vercelへのデプロイ
フロントエンド（Next.js）をVercelにデプロイ。
こちらも同じく、GitHubと連携しておけば、pushするだけで自動デプロイされます。
10. 本番環境テスト
デプロイ後、環境変数などを正しく設定し、実際に動作しているかを確認します。
詳細について
後日、書き切る気力があれば実装の詳細について書いた記事を作成する予定です。
GitHubリポジトリはこちらです。
おわりに
Discord Botを作成するところから、Webアプリを作成し、フルスタックな開発を体験しました。
最近のフレームワークはとても開発体験が良く、学習曲線も全然急ではないのと、ホットなフレームワークはAIがガンガン解説してくれるので、初学者でも挑戦のハードルは低いかなと思います。
(AIはJS/TSとPythonが他の言語に比べて異常に強い気がする)
あとニート脱却したいな～ では。
Discussion