VSCode、Node.js、Gitをインストールして、各種用語をざっくり確認する（共通環境構築編）
「VSCodeで捗らせる！幸せなCluster Script開発」連載記事一覧
-
VSCode、Node.js、Gitをインストールして、各種用語をざっくり確認する
（共通環境構築編）VSCode、Node.js、Gitをインストールする。 -
VSCodeのワークスペースを作って、ClusterScript向けの機能を入れる
（個別環境構築編）VSCodeのワークスペースを作成する。必要なパッケージをnpmでインストールする。 -
VSCodeで複数のClusterScriptを一つにまとめたり、圧縮したりする
（設定編）VSCodeのtasks.json、launch.jsonを作成する。webpackのwebpack.config.jsを作成する。 -
ClusterScriptのファイルを分割したり、$を含めてテストする
（コーディング実践編）型定義ファイルについて。ES Modulesでモジュールを書く。Mocha、Chai、Sinon.JSでテストを書く。$のテストダブルを作る。 - スクリプト共有編 予定
こんにちは！かおもです！
ClusterScriptの開発、捗っていますか？
こちらは思ったより捗っている気がするので、まとめ的な連載記事を書いてみようと思いました。
０：この連載記事の目標
ClusterでJavaScriptを書く人が、みんなで幸せになれたらいいなと思っています。
個人単位では、スクリプトの管理や整理やテストが気軽にできるようになって、
ClusterScriptの開発加速の礎ができたり、
Cluster界隈単位では、書かれたスクリプトを気軽に共有できるようになって、
ClusterScriptのエコシステムの礎ができたらいいなと思っています。
１：想定している方
以下のような方にお勧めかもしれません。
- ClusterでJavaScript書き始めてVSCode使ってみてるけど、もっとできることないの？という方。
- だいぶスクリプトが貯まってきて、共通処理とかファイルを分けて整理したい方。
- コードを書いてはアップロードしてテストするのが面倒な方。
（現状、このテストはそこまで劇的な改善はできないかもですが…） - スクリプトをコピペではない方法で共有してみたい方。
２：この連載記事で出てくる用語と機能の解説
筆者の主観入りでざっくり解説します。
Visual Studio Code(VSCode)
Clusterのスクリプトは、Unity上やメモ帳でも書けますが、何かと大変だったりします。
VSCodeはその大変さを解消させるためのツール（エディタ）です。
便利な機能が多いですが、多すぎて逆に難しいです。
公式
Node.js
Node.jsを使用すると、JavaScriptをブラウザ無しで動かせます。
Clusterのスクリプトも中身はJavaScriptなので、これを使って、テストとかできたらいいなぁと思っています。
それ以外にも、後述の機能はNode.js上で動かすので、これはこれで必須です。
公式
npm
Node Package Managerの略（と言われています）です。
Node.jsをインストールするとついてきます。
名前の通り、Node.js上で動かせる特定の機能の固まり（パッケージ）の管理をします。
Clusterのスクリプトもこの機能を使用して、共有できるようになったらいいなぁと思っています。
また、後述のパッケージはこれを使用してインストールしていきます。
公式
Git
ソースコードのバージョンを管理するシステムです。
ファイル名に(221130最新版)とか(改造前)とかを付けて管理する必要がなくなります。
Clusterのスクリプトもこの機能を使用して、GitHub経由で公開や共有できるようになったらいいなぁと思っています。
公式(Git)
公式(GitHub)
また、基本的にテキストファイルの管理がメインのシステムなので、画像などのバイナリファイルの管理にはあまり向いてないです（Git LFSという手もあるらしい）。
そういう時にはUnityでも採用されているPlastic SCMという手もあるのかもしれません（筆者は使ったことないですごめんなさい）。
webpack
複数のJavaScriptのファイルをまとめて1ファイルにできる機能です。
先述のnpmを使ってインストールします。
ClusterのスクリプトもJavaScriptなので、この機能を使用して、共通処理と個別処理を別ファイルで管理できるようになったらいいなぁと思っています。
公式
Terser
JavaScriptのファイルを圧縮できる機能です。
先述のnpmを使ってインストールします。
ClusterのスクリプトもJavaScriptなので、この機能を使用して、ファイルサイズ20KB制限内で開発できる内容が増やせたらいいなぁと思っています。
書き方にもよると思うのですが、体感で1/3ぐらいになります。
ただ、Clusterではファイルサイズ制限より、500KBのメモリ制限？の方が先に来る印象が多いです。
公式
Mocha、Chai、Sinon.JS
JavaScriptのテストをする時に使用する機能です。
先述のnpmを使ってインストールします。
Mochaは、テスト自体をしやすくするための環境を提供します。
Chaiは、テストの結果を確認しやすくするための機能を提供します。
Sinon.JSは、テストの時に使用するダミーの機能などを提供します。
ClusterのスクリプトもJavaScriptなので、この機能を使用して、アップロードなしに手軽にテストができるようになったらいいなぁと思っています。
使いこなすのは難しいですが、テストはできないよりできてる方が良いと思うので、なんらかのテストのコードが書けた時点で１００点だと思うようにしてます。
公式(Mocha)
公式(Chai)
公式(Sinon.JS)
３：各種全体的なインストール
今回の記事では、ClusterScriptの開発に限らず、色々な開発で使用できる全体的な環境を整えます。
３．１：VSCodeのインストール
（インストール済みの方は不要です）
日本語化も含めて書かれていますので、こちらの記事を参考にインストールしてみてください。
３．２：Node.jsのインストール
（インストール済みの方は不要です）
こちらの記事を参考にインストールしてみてください。
記事中では14.16.1LSTとなっていますが、その時点の最新のLTSをインストールしておけば（だいたいは）大丈夫です。
３．２．１：Node.jsのバージョンについて
使用したい機能やパッケージなどの制限で、最新のNode.jsでは動かないというパターンがあったりします。
Node.jsを更新すると、基本的に全ての開発環境で、その更新されたバージョンを使用することになります。
しかしそうなると、先述のような不具合が起きることがあります。
その対策として、開発環境ごとにNode.jsのバージョンを切り替えられるnvmというツールがあります。
若干古い記事などを参考にしていると稀にこういう事態に遭遇するので、少し覚えておいてください。
（本来ならセキュリティー等の関係上、常に最新を追いかけられると良いのですが、新しいものは情報が少なくて大変なんですよね…）
公式(nvm)
３．３：Gitのインストール
（インストール済みの方は不要です）
こちらの記事を参考にインストールしてみてください。
３．４：最終確認
VSCodeを起動しているのでしたら、VSCodeを再起動し、VSCode内からNode.js、npm、Gitが動かせることを確認しましょう。
こちらの記事を参考にVSCodeでターミナルを開いてください。
ターミナルを開きましたら、
node -v
npm -v
git --version
とそれぞれ入力してください（npmはちょっと応答が遅いかもしれません）。
それぞれでバージョンっぽい文字列が出ていればＯＫです。
４：次回、個別環境構築編です
次回は、実際に開発を行うフォルダを準備し、個別に必要な機能をインストールしていきます。
記事はこちらです。
以上です！よきVSCodeライフを！
Discussion