Learning JavaScript w/discord.js

Appearance

プロジェクトを作る ​

フォルダを開く ​

環境構築ができたら、早速プロジェクトを作りましょう！最終目標は"Discord.js でボットを作ること"です。

まずは適当なフォルダ、つまりプロジェクトの場所を作成してください。説明内では名前をdjsbotとします。

作成したらフォルダを VSCode で開きます。フォルダを右クリックした際の項目、もしくは VSCode 内にてフォルダ > フォルダーを開く...から開くことができます。

INFO

このドキュメント内ではフォルダのことをディレクトリと呼びます。ただし、呼び方が違うだけで意味は同じです。

参考: 「フォルダ」と「ディレクトリ」の違い - 「分かりそう」で「分からない」でも「分かった」気になれる IT 用語辞典

初期化 ​

Node.js においては任意ですが、ある程度しっかりとしたプロジェクトを作る場合はプロジェクトの初期化を行います。

ターミナル(ctrl+shift+@)を開き、そこにnpm init -yと入力してください。npmはパッケージ管理等で役立つツールで、initで npm に対して初期化を行うように指示します。本来であれば対話式のプロンプトが表示されますが、引数として-yを付けることでそれらをスキップします。

初期化が完了するとこのような見た目の JSON ファイルがpackage.jsonとして生成されます。

json
{
  "name": "djsbot",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

package.json ​

package.jsonには様々な情報が記述されています。プロジェクト名、依存関係、ビルドに使うコマンド、ライセンス、著者... package.jsonがあるおかげで自分だけではなく、他の開発者も恩恵を受けられます。Node.js を用いた開発においてこのファイルは必須です。

参考: 【初心者向け】結局 package.json って何なの？

ESM を使う ​

ESM(ES Module)は現在の JavaScript においてスタンダードなモジュールシステムです。非同期 import、top level await などの様々な魅力があります。

package.jsonにtype:"module"を記述することで ESM を使うことができます。やっておきましょう。

json
{
  "name": "djsbot",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module", 
  "author": "",
  "license": "ISC",
  "description": ""
}

パッケージのインストール ​

Node.js は、目的の達成のためにパッケージ(or モジュール)を使うことができます。Node.js が標準で用意しているものの他に、他者が作ったパッケージをインストールすることもできます。(もちろん、自分で作って公開することもできます！)

パッケージのインストールはnpm install <パッケージ名>で行えます。npm iと略すことも可能です。

今回は Discord の Bot を作るためにdiscord.jsをインストールします。ターミナルへ以下のように入力してください:

bash
npm i discord.js

また、開発用に Node.js の型定義をインストールします。もう一度、ターミナルへ以下のように入力してください。開発時のみ必要な依存関係は-Dオプションをつけてインストールします。

bash
npm i -D @types/node

INFO

バックグラウンドでは、以下の手順でパッケージの追加が行われています(実際にはもう少し複雑です):

  1. レジストリ(npmjs.com)からパッケージを検索する(見つからない場合はエラーを返却する)
  2. パッケージをnode_modulesにインストールする
  3. package.jsonにパッケージの名前とバージョンを記述する
  4. node_modulesに実際にインストールされたパッケージの情報をpackage-lock.jsonに記述する

*ただし、既にpackage.jsonに必要なパッケージが記述されている状態でnpm iを行った場合、1 と 3 の手順はスキップされます。

インストール後、node_modulesとpackage-lock.jsonが生成されるはずです。

node_modules ​

インストールしたパッケージはこのディレクトリに保存されます。パッケージによってはそのパッケージが依存しているパッケージもあり、それらも全てインストールされるため、よくnode_modules はブラックホールだと呼ばれることがあります。

package-lock.json ​

package.jsonに記述されたパッケージの内容と、実際にインストールされたパッケージの内容は異なることがあります。

json
{
  "name": "examplepj",
  "version": "0.1.0",
  "description": "example project",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
    "dbtest": "node src/database-test.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "example-user",
  "license": "AGPL-3.0-only",
  "dependencies": {
    "@hono/node-server": "^1.17.1", 
    "hono": "^4.8.5", 
    "lowdb": "^7.0.1", 
    "mongoose": "^8.16.4", 
    "picocolors": "^1.1.1", 
    "socket.io": "^4.8.1", 
    "tsx": "^4.20.3"
  }, 
  "type": "module"
}

package.jsonに記述された依存関係を見てみると、バージョン番号の手前に^がついていることがわかります。

例えば、^1.2.3は、同じメジャーバージョンかつ、1.2.3以上であればどのバージョンを入れてもいいという事になります。つまり1.17.1〜1.9.9までインストールできることになります。

この場合、package.jsonに記述されたバージョン番号がインストールされるとは限らず、1.2.3ではなく1.2.4がインストールされる可能性もあるわけです。そこで、package-lock.jsonに実際にインストールされたバージョンを記述することで別環境や CI 実行時にバージョンが異なることで発生する問題を防ぐことができます。

package-lock.jsonを使ってパッケージをインストールする場合はnpm ciを使います。

さて、これでプロジェクトの作成が完了しました！

難しく聞こえるかもしれませんが、実際にやっていることはnpm initでの初期化とnpm iによるパッケージのインストールのみです。

次のステップへ行きましょう！