しばらく利用していなかったVisual Studio Codeをバージョンアップしてみたらすごく速く使いやすくなっていたので、すこし本格的に環境を構築して使ってみることにしました。VSCodeおよびnodeなどもこれまでごく基本的な利用しかしていないので、それらの知識のアップデートも兼ねます。
とりあえず、JavaScript（Three.js）の開発環境を構築することを目的にします。
- VSCodeのIntelliSenseを利用したコード補完ができること
- ChromeまたはFireFoxでブレークポイントを利用したデバッグが可能なこと
- デバッグはdockerのコンテナ環境で構築すること
上記３点ができるようになることを目的として、
まずは任意の.jsプロジェクトでthree.jsのコード補完が可能になることを目指します。
新規プロジェクトフォルダを作成する
任意のフォルダ名でプロジェクトフォルダを作成して、その中にcdします。
$ mkdir myproject $ cd myproject
npm環境を作成する
まず、nodeのパッケージマネージャであるnpmが利用するpackage.jsonというファイルを作成します。これは以下のコマンドを利用するとjsonファイルが作成されます。自力で作っても別にいいと思う。
$ npm init
実行すると幾つか質問されるので答えていくが、とりあえずは適当（空欄）でもいいはず。
Three.jsをnpmでインストールする
npmレポジトリにthreeというパッケージが存在するので、これをnpmコマンドでインストールします。注意点として、VSCodeのIntelliSenseがJavaScriptの補完をするためにはTypeScriptの型定義ファイル（？）を利用し、これはnpmで管理されているようなメジャーなものならばレポジトリで公開されているもののようなのだが、これをVSCodeが利用できるようにするためにはpackage.jsonのdependenciesリストに対象のモジュールがリストされている必要がある（VSCodeは、ここにリストされているモジュール名をヒントにAutomatic Type Acquisitionという機能を使って型定義ファイルを自動で探しにいく。もしくはjsconfig.jsonというファイルに明示的に宣言することも可能だが、今回は省略する）
すなわち、以下のコマンドを経由してthreeモジュールをインストールする。
$ npm install three --save
–saveオプションを忘れるとpackage.jsonが更新されないので注意する。–saveオプションは指定したモジュールをインストールすると共に、package.jsonのdependenciesリストに追加する。
動作確認
以上でIntelliSenseは有効な状態となります。自分のモジュールの場合はどうするのかとかは今後調べる必要があるが、たぶんTypeScriptとかで書けということなんだと思う。
main.jsとかの適当なファイルを作成して、
var THREE = require('three');
THREE.
ここまでタイプしてCtl+Spaceとかすると、THREEの中にあるモジュールが補完対象としてリストされるようになっているはず。もしくは、.をタイプした時点で出てくるはず。これで暗記しなくてよろしい。