おことわり
- 年末で実家に帰っている自分が、実家のオンボロPCをLubuntuに入れ替えて遊んでいるときの備忘録です
- 完全に自分用のメモなので、ご容赦ください
現環境と目指す環境
現環境：
Lubuntu入れたて。ほぼブラウザ（Vivaldi）以外入っていない
バージョン情報は以下（$lsb_release -a で出力）
| 情報 | |
|---|---|
| Destributor ID | Ubuntu |
| Description | Ubuntu 24.04.1 LTS |
| Release | 24.04 |
| Codename | noble |
目指す環境
・VSCodeが入っていてほしい
・ライブラリDiscord.jsが使用できるようになりたい
⇢node.jsが入っていてほしい
本記事で触れないこと
・DiscordDeveloperPortal周りのアカウントの話
⇢事前につくってあった
・VSCodeの日本語化設定とか、Jsの拡張機能とか
⇢これはすでに別PCにある設定をGitHubアカウントで同期する
VSCodeの導入
以下のページにアクセスして、.debと書いているものをダウンロードする。
https://code.visualstudio.com/Download
と思ったらエラー発生
Error: Cannnot Satisfy Dependencies ・・・らしい。
展開していないから？x64とかArm32とか間違えた？
と思って$ uname -mとかで調べてみたけど多分大丈夫・・・。
解決
なんかホームページからダウンロードするのがうまく行かなかったため、下記の記事(の方法３)を参考にして、curlコマンドを使ってインストール。
https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8
1.以下でcurlをインストールする。パスワードの入力を求められるので注意
~$ sudo apt install curl
2.debパッケージをダウンロードする
~$ curl -L https://go.microsoft.com/fwlink/?LinkID=760868 -o vscode.deb
3.ダウンロードしたパッケージをインストールする
~$ sudo apt install ./vscode.deb
はい、かんたんでしたね。
ここから、左下の歯車アイコンの上の人のアイコンをクリックして、同期設定を進めてください。
（もちろん、色々拡張機能とか入れている同期元のPCで、先に同期設定をオンにしておく等は必要です）
DiscordBotを作るための環境構築
これから用意するものは以下の通り
・npm（言わずとしれたJavaScriptのパッケージ管理ツール）
・Node.js
以下、必要なパッケージ
・TypeScript（JavaScriptに型付を入れてくれる、言わずもがな偉大なフレーバー）
・ts-node（TypeSctiptを直接実行できるようにしてる偉いヤツ）
・eslint（型とか記法とかのチェックをしてくれる偉いヤツ）
・dotenv（環境変数を野晒しにしないようにうまいことやってくれる偉大なヤツ）
・discord.js
npmとNode.jsをインストール
まずはターミナルでnpmをダウンロード。
~$ sudo apt install npm
次にNode.jsを、一旦apt install でインストール。
~$ sudo apt install nodejs
これらを、バージョン管理のパッケージnを入れて最新版として管理する
~$ sudo npm install -g n
nを使用して、Nodeとnpmをいい感じにする
Nodeの長期サポート版を今回は入れます。
~$ sudo n lts
ここで一旦、Nodeのバージョンでも確認しておきます。
~$ sudo node -v
22.12.0でした。
更に、npm自体のアップデートもしておく
~$ sudo npm install -g npm
バージョンを確認する
~$ sudo npm --version
11.0.0でした。
プロジェクトファイルを作成する
どこでもいいので、プロジェクトを作るためのフォルダを作成する。
その後、ターミナルで、作成したディレクトリを開きます。
ここに、開発のすべてをぽこぽこ入れていきます。（パッケージとかも）
npm init
~$ npm initを入力し、出てくる質問に答えます。基本的にはすべてEnterでいいようですが、以下は自分で入力しました。
package name: 必須項目。今から作るプロジェクトの名称。大文字が入力できないことに注意
description: 詳細なプロジェクトの説明
author: プロジェクトの作者名
type: module で入力
パッケージをローカルインストール
以上であげていた、typescript, ts-node, eslint, discord.js, dotenvをインストールします。
（ホントは typescript, ts-node, eslintあたりは--save-devでローカルインストールしたほうが良さげなんですが、今日は開発の都合上そのままあげちゃう）
先ほどと同一のディレクトリで以下を実行。
~$ npm install typescript ts-node eslint discord.js dotenv
TypeScript, ESLintのセットアップ
以下の記事が参考：
https://qiita.com/0xkei10/items/ac906d50a922dbbfbcea
npx（パッケージの実行を担うなんか）を使用して、tsconfigを作成していきます。
~$ npx tsc --init
出力されるJavaScriptコードを格納するフォルダパスを指定する。
そのために、tsconfig.jsonを内から、outDir:と書いている部分を見つける。
こんな感じの部分ですね。
このoutDirにフォルダパスを指定しておく。今回はコメントアウトを解除して、"outDir": "./build"としておく。
続いて、ESLintくんのセットアップを行う。以下のコマンドをターミナルに入力して、セットアップウィザードを実行する。
npx eslint --init
自分は、上から以下の選択肢をチェックしました。
How would you like to use ESLint? (Use arrow keys)
to check syntax and find problems: 構文のチェックと問題の発見
What type of modules does your project use? (Use arrow keys)
CommonJS: tsconfigでcommonjsを選択しているので、合わせる。
Which framework does your project use? (Use arrow keys)
None of these:ReactやVueは使用していないため、None of theseを選択。
Does your project use TypeScript?
Yes: TypeScriptを使うので、タイトル詐欺にならないようYesを選択。
Where does your code run?
Node: コードはどこで動くのか？という質問。一旦、Nodeを選択した。スペースキーでチェックボックスを外したりつけたりできるので、片方だけ選択
eslint, globals, @eslint/js, typescript-eslint ? Would you like to install them now?
yes: ESLintに必要なパッケージをインストールするか聞かれるので、すると答えとく。
npm: 上記でyesと答えたあと、何でインストールするか聞かれるので、npmと答える。
ターミナルからnpmコマンドを実行できるようscriptをいじる
ここはほんと、参考元の記事「https://qiita.com/0xkei10/items/ac906d50a922dbbfbcea」から引っ張ってきているだけなので、本当にそちらを参照してください。
"scripts":{
"test": "ts-node src/main.ts",
"start": "node build/main.js",
"compile": "tsc -p ."
}
ここまでで、だいたい使える環境はできるはず、です。
参考元の記事のほうに、サンプルたりうるコードが載っているので、実装はそちらを参考にしていただけるとありがたいです。