Learning JavaScript w/discord.js

Appearance

はじめる (環境構築) ​

コーディングにおいて環境構築は必須です。テキストエディタ(もしくは IDE)やランタイム、ビルドのためのツールをインストールしなくてはなりません。

今回は Discord Bot を作るためにサーバーサイドで JavaScript(JS)を実行できる Node.js を使います。

インストールするもの ​

テキストエディタ or IDE ​

おすすめは高機能なテキストエディタとして有名な VSCode です。ここからダウンロードできます。

他のテキストエディタ、もしくは IDE でも構いません。Web 系の言語に特化した IDE の Webstorm や キーボードで全操作が完結する Vim などがあります。

Node.js ​

JS ランタイムとして Deno や Bun もありますが、今回は Node.js を使います。

ここからダウンロードできますが、面倒な場合は PowerShell で Chocolatey を使ったインストールも可能です。以下は Node.js 22.19.0をインストールするスクリプトです:

ps
# Download and install Chocolatey:
powershell -c "irm https://community.chocolatey.org/install.ps1|iex"

# Download and install Node.js:
choco install nodejs --version="22.19.0"

# Verify the Node.js version:
node -v # Should print "v22.19.0".

# Verify npm version:
npm -v # Should print "10.9.3".

エディタの設定 (for VSCode) ​

既にコードを書き始める準備はできました！が、VSCode を使うのであれば自分好みにカスタマイズしちゃいましょう。

テーマをカスタマイズするだけで、雰囲気は随分と変わるものです。

あなたの画面と比べてみてください。違うでしょう？

vscode-screen

では、やってみましょう。

拡張機能 ​

拡張機能は VSCode の見た目から機能まで全てを変えてくれます。

インストール方法はとても簡単。拡張機能タブ(ブロックの右上が欠けたようなアイコン)から、検索バーに欲しい拡張機能の名前を入れて、インストールのボタンを押すだけです。

警告は基本無視して構いませんが、拡張機能によってはPC に危害を及ぼす可能性もあるため必要かつ信頼できるものだけを入れるようにしてください。

私が使っていておすすめしたいテーマ・拡張機能をいくつか紹介します。

タイトルに URL を埋め込んであるので、欲しい機能があればクリックしてください。

Dracula Theme (テーマ) ​

ただのテーマですが、見やすさと可愛さを求めている人にはおすすめかもしれません。 紫を基調とした優しい配色が人気を集めています。

もちろん、ここから別のテーマを探しても構いません。

Better Comments (コメントを見やすくする) ​

コメントに色が付くだけで、理解がよりしやすくなります。

highlighting-comment

インストールしてすぐに使うことができます。

Prettier (整形) ​

コードを自動整形してくれます。改行なし、スペースなしの汚いコードを書いてしまったり、渡されてしまっても自動できれいにしてくれます。

説明についてはこっちの方がわかりやすいので、自分で見に行ってください。

Discord Rich Presence (Discord にステータスを追加) ​

Discord 上でステータスを表示して、見せびらかす拡張機能です。

rpc

インストールしてすぐに使えますが、カスタマイズしたい場合は拡張機能タブからDiscord Rich Presenceを選んで設定(⚙️ マーク)をクリックした後、設定からカスタマイズができます。

background (背景カスタマイズ) ​

背景を変更できる拡張機能です。入れるのは任意ですが、VSCode の雰囲気を大きく左右します。

設定方法が少し複雑で、設定ファイルを編集する必要があります。JSON ファイルの知識が求められますが、どうにかなるはずです。

VSCode 内でCtrl+Shift+Pを押して、settings.jsonと入力すると基本設定: ユーザー設定を開く (JSON)とあります。それを押すと JSON ファイルが開かれるので、一番下に行って以下の設定を加えます。

json
"background.editor": {
  "useFront": true,
  "style": {
    "background-position": "100% 100%",
    "background-size": "auto",
    "opacity": 0.6
  },
  "styles": [{}, {}, {}],
  "images": [],
  "interval": 0,
  "random": false
},
"background.fullscreen": {
  "images": [
    "file:///home/r64/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89/1105882.jpg"
  ],
  "opacity": 0.1,
  "size": "cover",
  "position": "center",
  "interval": 0,
  "random": false
},

例えば、settings.jsonが

json
{
  "workbench.colorTheme": "Dracula Theme",
  "terminal.integrated.fontSize": 12,
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font'",
  "security.workspace.trust.untrustedFiles": "open",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

のようになっていた場合はこうします:

json
{
  "workbench.colorTheme": "Dracula Theme",
  "terminal.integrated.fontSize": 12,
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font'",
  "security.workspace.trust.untrustedFiles": "open",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 0.6
    },
    "styles": [{}, {}, {}],
    "images": [],
    "interval": 0,
    "random": false
  },
  "background.fullscreen": {
    "images": [
      "file:///home/r64/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89/1105882.jpg"
    ],
    "opacity": 0.1,
    "size": "cover",
    "position": "center",
    "interval": 0,
    "random": false
  }
}

WARNING

末尾以外で開業時に,を忘れないようにしてください。先程の例であればこのようになります:

diff
- "typescript.updateImportsOnFileMove.enabled": "always"
+ "typescript.updateImportsOnFileMove.enabled": "always",

十分に自分の開発環境を整えられたら、コーディングを始めましょう！