Zenn
💞

VSCodeのワークスペースを作って、ClusterScript向けの機能をインストールする（個別環境構築編）

2022/11/20に公開
Node.js
VS Code
入門
cluster
#
clusterscript
idea

「VSCodeで捗らせる！幸せなCluster Script開発」連載記事一覧

  1. VSCode、Node.js、Gitをインストールして、各種用語をざっくり確認する
    （共通環境構築編）VSCode、Node.js、Gitをインストールする。
  2. VSCodeのワークスペースを作って、ClusterScript向けの機能を入れる
    （個別環境構築編）VSCodeのワークスペースを作成する。必要なパッケージをnpmでインストールする。
  3. VSCodeで複数のClusterScriptを一つにまとめたり、圧縮したりする
    （設定編）VSCodeのtasks.json、launch.jsonを作成する。webpackのwebpack.config.jsを作成する。
  4. ClusterScriptのファイルを分割したり、$を含めてテストする
    （コーディング実践編）型定義ファイルについて。ES Modulesでモジュールを書く。Mocha、Chai、Sinon.JSでテストを書く。$のテストダブルを作る。
  5. スクリプト共有編　予定

こんにちは！かおもです！
前回は全体的な環境を構築しましたので、今回は個別の環境を構築していきます。
イメージとしては、Unityのプロジェクトを作っていくつかアセットを入れます、ぐらいの感覚です。

１：フォルダーを準備する

おそらくこの記事を読まれてる方のほとんどは、Assets以下のjsファイルを直接VSCodeで編集されているかと思います。
しかし、この連載記事では、別のフォルダーで編集したjsファイルを、VSCode上の操作で、必要に応じてAssets以下にコピーするような方法をとります。

  • 基本的な方法
  • この連載記事での方法

ですので、まずAssets外のお好きなところにフォルダを作ってください。
この記事では以降、そのフォルダを作業フォルダと呼びます。
また、jsファイルのコピー先のフォルダをAssets内フォルダと呼びます。

Assets以下にフォルダを作らないワケ

これからの作業にて、jsファイルがあるフォルダあたりに大量のファイルが作られます。
Unityがそれらのファイルに対して何をしてくるか、またその時のUnityの動作がどうなるか不明なので、念のために回避しようという考えです。

一応、こちらの記事によると、非表示フォルダにしておくなどの手はありそうですが、そうすると今度はVSCode側でどうなるか分からないので、面倒そうなことはやめとこうという考えです。

２：VSCode上でフォルダーを管理する設定をする

それでは、VSCodeを開いてください。
画面左側にエクスプローラーが表示されていなかったらctrl+shift+Eを押して開いてください。

画面左側のエクスプローラーにフォルダーを開くボタンがありますので、それを押し、先ほど作った作業フォルダを開いてください。

ここではHappyClusterScriptというフォルダ名にしています。

このフォルダに、先ほどの作業フォルダとAssets内フォルダを登録して管理できるようにするファイル（ワークスペースファイル）を作ります。

画面上側のメニューからファイル>名前を付けてワークスペースを保存と選択してください。
すると、フォルダ名と同名のファイル名のワークスペースファイルを保存しようとしますので、そのまま保存してください。別の名前で保存しても大丈夫です。

そのまま保存すると、エクスプローラーにそのファイルが表示されるのでそれをクリックして開いてください。

このfoldersという項目のところが、このワークスペースで扱うフォルダ一覧になります。

このファイルを以下のような感じに編集してください。

HappyClusterScript.code-workspace
{
	"folders": [
		{
			"path": ".",
			"name": "work"
		},
		{
			"path": "Z:\\Unity\\Assets\\JavaScripts",
			"name": "dist"
		}
	],
	"settings": {}
}

二つ目のpathのところのZ:\\Unity\\Assets\\JavaScriptsの部分は、先ほどのAssets内フォルダを指定してください。

このワークスペースファイルの中身を簡単に言いますと、
作業フォルダにworkという名前をつけ、Assets内フォルダにdistという名前を付けた、
という内容になります。
このworkとdistという名前は別の所で使用するので、可能であればこの名前のままにしてください。

ファイルの修正が完了したら忘れずに保存してください。
このとき、以下のようなこのフォルダー内のファイルの作成者を信頼しますか？というメッセージが出ると思います。

これは、Assets内フォルダが、VSCodeにとって見知らぬフォルダであるため、一旦は信頼できないものとして扱うという感じの機能です。
ですので、ここでははいを選択してよいです。

この機能についてはこちらなどをご覧ください。

３：npmの設定を初期化する

続いて、npmの設定ファイルを作成します。

VSCodeのターミナルを開いてください。ctrl+shift+@で開けます。
ターミナルを開く際に、どちらのフォルダで開くか聞かれますので、workの方で開いてください。

ターミナルが開きましたら、以下のコマンドを入力してください。

npm init -y

このコマンドにより初期化(init)が実行されます。

また、-yのオプションにてpackage.jsonに設定できる各項目を、すべてデフォルトのままでよい、というような意図をnpmに伝えています（-yを外して実行すると、各項目について事細かに聞かれます）。

処理が完了したら、package.jsonというファイルが、作業フォルダの直下に作らていることを確認してください。
このファイルはnpmが動作する上で重要なファイルですが、しばらくは編集したりする必要はありません。

このpackage.jsonとnpmの関係については、こちらやこちらの記事が詳しいです。

４：npmを使用して各種パッケージをインストールする

npmの初期化が終わりましたら、前回の記事で紹介していたnpmでインストールするパッケージをインストールしていきます。

VSCodeのターミナルをworkで開き、以下のコマンドを入力してください。
とても長いのでコピペ推奨です。処理にもしばらく時間がかかります。

npm install --save-dev "@clustervr/cluster-script-types" chai mocha sinon terser terser-webpack-plugin webpack webpack-cli webpack-preprocessor-loader

このコマンドで必要なパッケージを丸ごとインストール(install)しています。
以下のように、一つずつインストールしてもかまいません。

npm install --save-dev "@clustervr/cluster-script-types"
npm install --save-dev chai
npm install --save-dev mocha
（省略）

また、--save-devのオプションにて、実行時ではなく開発時に必要なパッケージです、という意図もnpmに伝えています。
この--save-devのオプションの考え方についてはこちらが詳しいです。

インストールが完了しましたら、作業フォルダ以下にnode_modulesというフォルダと、pakcage-lock.jsonというファイルが作られていることを確認してください。

node_modulesフォルダ以下には、npmでインストールしたパッケージが収められています。
先述のwebpackなどを使用する際は、このフォルダ以下に収められているので、そこを参照して使用します。

pakcage-lock.jsonは基本的には気にしなくてよいですが、消さないでおいてください。
pakcage-lock.jsonについてはこちらやこちらが詳しいです。

余談ですが、このタイミングでClusterが提供している公式の型定義ファイルもインストールしています。
詳細は別記事で書くと思いますが、node_modules/@clustervr/cluster-script-types/index.d.tsに入っています。
すでに実際にjsファイルを書き進められている方はそこを参照してみてください。

ここでインストールしたパッケージについての簡単な説明
  • "@clustervr/cluster-script-types"
    Cluster社の提供している型定義ファイル。jsファイルの開発では、これがあると、関数名などの一覧が表示され、入力ミスが減らせて便利。
  • chai mocha sinon
    前回の記事で触れていた、テスト系の機能。
  • terser
    前回の記事で触れていた、jsファイルを圧縮する機能。
  • terser-webpack-plugin
    Terserをwebpack経由で使用できるようにするためのプラグイン。
    つまり、複数のjsファイルを一つにまとめたうえで圧縮できるようになる。
  • webpack
    前回の記事で触れていた、複数のjsファイルを一つのファイルにまとめる機能。
  • webpack-cli
    webpackをコマンドラインから使用できるようにする機能。
  • webpack-preprocessor-loader
    プリプロセッサという処理をwebpackで行えるようにする機能。
    具体的には、コメントアウトをしなくても、動作確認時には$.logを使用して、公開時には$.logを使用しない、というような事ができる。
⚠ClusterScriptがアップデートしたので、型定義ファイルを更新したい

ターミナルを開いて、以下のコマンドでアップデートできます。

npm update @clustervr/cluster-script-types

５：次回、設定編

次回はVSCodeに設定を追加し、webpack（複数のjsファイルを一つにまとめる機能）やTerser（jsファイルを圧縮する機能）等を利用できるようにしていきます。
そして実際に簡単なソースコードを用意し、それらの機能を試してみます。

記事はこちらです。
https://zenn.dev/vkao/articles/4be607908e12ea

以上です！よいVSCodeライフを！！

Discussion