[NodeCG] イチから(簡単な)バンドルを作ってみた(その1)

# 導入

最近 TypeScript や React を触れる機会が非常に多くなり、そろそろ自身の配信レイアウトもリニューアルしたい、ということで今回の作業(?)のきっかけになりました。Graphic や Dashboard は Vite でバンドルした React で作っていこうかと思います。
今回の記事のもう一つの目的として、現在自身が NodeCG でのバンドル制作の手法に対して抱いている「こういう理解で合ってる？」というのを言語化+指摘していただこうかな、というものがあります。
序盤は公式チュートリアルをなぞっていく形になっています。
作業ログ、という意味合いも大きいかも。

# 今回の作業環境

- Ubuntu 22.04 (WSL2 Windows11 21H1)
- Node.js 18.7.0 (StoryBook 使うなら 16 系にする必要があった気がします)
- VSCode

# 作業

## NodeCG 本体のセットアップ

[公式チュートリアル該当ページ](https://www.nodecg.dev/docs/installing)

### `nodecg-cli`のインストール

過去に導入している場合は不要です。
[NodeCG の公式チュートリアル](https://www.nodecg.dev/docs/installing)にある通り、

```shell
npm install --global nodecg-cli
```

とします。Linux 環境でエラー出る場合は`sudo`を付けてやるか、あるいは何らかの方法(丸投げ)でいい感じにしてやってください。~~最悪 npx とかでいいんじゃないかなとか思ってます。~~

### 作業ディレクトリの作成

これから作成するディレクトリに NodeCG のアプリケーション本体が来ます。

```shell
mkdir 任意の名前 # NodeCG本体を入れるディレクトリ
cd さっき作ったディレクトリの名前
nodecg setup # さっき作ったディレクトの中をなんかいい感じにしてくれる
```

ここまででバンドルを含まない状態の NodeCG のセットアップが完了しました。
とりあえず起動確認してみて、問題ないようであれば先へ進みます。
`nodecg start`で起動します。

## バンドルの作成

[公式チュートリアル該当ページ](https://www.nodecg.dev/docs/creating-bundles)

## Yeoman のインストール

Yeoman とは、汎用的なひな型ツールとしての側面を持った開発環境を構築するためのツールだと認識しています ~~今回の記事書く中で初めて知ったツールかも~~

```shell
npm install --global yo generator-nodecg
```

## バンドル作成

### ひな形作成~(nodecg 外への)移動

#### 本章前書き

後で Git 関係でめんどくさい感じなりそうで nodecg/bundles 以下に作った後で nodecg よりも上に移動させた後、Github に push、その後`nodecg install`で持ってくる、という流れになっています。これをやるくらいなら最初から別のディレクトリで作っておいた方がよかったのかもしれません。

#### 本編

Yeoman を利用していい感じにしていきます。

```shell
cd bundles
mkdir バンドルの名前
cd さっき作ったバンドルの名前
yo nodecg
```

初めて yo を使う場合はよくある品質向上のための匿名で使用レポートを送っていいか聞かれるので Y(デフォルト)か n を入れてあげましょう。
正直よくわからない箇所の方が多かったので、そういう場合はデフォルト(何も入力せず Enter)していました。できればこのあたりの説明どこかに欲しいかもしれません。

- 特によくわからなかった箇所(概念?)
下二つについては、NodeCGのDiscordサーバーで教えていただきました。ありがとうございます。
  - そもそも panel って何(Dashboard のアレだったっぽい)
  - `"single instance" graphic`って何(なずな予想: Graphic の枚数)
     → 同時に1か所でしか開けなくなるそうです([ドキュメント該当箇所](https://www.nodecg.dev/docs/concepts-and-terminology/#graphics))
  - custom workspace って何
    → 指定しない場合、nodecgデフォルトのWORKSPACEタブに操作盤が表示されるが、指定した場合にはそっちに操作盤がまとめられる([ドキュメント該当箇所](https://www.nodecg.dev/docs/concepts-and-terminology/#dashboard))
    私の場合、こうなりました。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/d6eb64bd-081b-1fbe-94a6-078875b20e50.png)

とりあえず、ひな型の完成です。
この段階でのディレクトリ構成はこんな感じになっています

```
nodecg/bundles/my-usual-layout$ tree
.
├── LICENSE
├── README.md
├── dashboard
│   └── panel.html
├── extension
│   └── index.js
├── graphics
│   └── dist
│       └── index.html
└── package.json

4 directories, 6 files
```

このまま進めると、Git 周りが大惨事になりそうな気がするので一度別のディレクトリに移動させます。私の場合はこうなりました。とりあえず、nodecg が管理しているより外側へ持って行った形になります。

```
na2na@Corei7-11700K:~/develop/nodecg/bundles/my-usual-layout$ cd ../
na2na@Corei7-11700K:~/develop/nodecg/bundles$ mv my-usual-layout/ ../../
na2na@Corei7-11700K:~/develop/nodecg/bundles$ ls
na2na@Corei7-11700K:~/develop/nodecg/bundles$ cd ../../my-usual-layout/
na2na@Corei7-11700K:~/develop/my-usual-layout$ git add .
na2na@Corei7-11700K:~/develop/my-usual-layout$ git commit -m "Initial Commit"
```

この後で Github に push(リポジトリ作成)しました。

次に、改めて先ほど作った nodecg/bundles 以下に今作ったバンドルのひな形を導入する作業です。
まず、先ほどの nodecg のディレクトリへ移動してください。
私だとこうです。

```
na2na@Corei7-11700K:~/develop/my-usual-layout$ cd ../nodecg/
na2na@Corei7-11700K:~/develop/nodecg$
```

[公式のガイドにある通り](https://www.nodecg.dev/docs/installing)、Github からバンドルのインストールをします

```
nodecg install na2na-p/my-usual-layout (人それぞれ変わります)
cd bundles/my-usual-layout (さっき作ったバンドル名)
code .
```

ここまででひとまずは完了となります。次の記事からは、Graphics と Dashboard を React(Vite)でとりあえず画面が出た！というところまでやっていきます。まとまりのない上に寄り道している感じもすごい記事ですが、ありがとうございました。

# 次記事

https://qiita.com/na2na/items/bae92a203ec25b0c8e3a