VSCodeでThree.jsの開発環境を整える（１）

しばらく利用していなかった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の中にあるモジュールが補完対象としてリストされるようになっているはず。もしくは、.をタイプした時点で出てくるはず。これで暗記しなくてよろしい。