JavaScript

VSCodeでThree.jsの開発環境を整える(1)

しばらく利用していなかったVisual Studio Codeをバージョンアップしてみたらすごく速く使いやすくなっていたので、すこし本格的に環境を構築して使ってみることにしました。VSCodeおよびnodeなどもこれまでごく基本的な利用しかしていないので、それらの知識のアップデートも兼ねます。 とりあえず、JavaScript(Three.js)の開発環境を構築することを目的にします。 VSCodeのIntelliSenseを利用したコード補完ができること ChromeまたはFireFoxでブレークポイントを利用したデバッグが可能なこと デバッグはdockerのコンテナ環境で構築すること 上記3点ができるようになることを目的として、 まずは任意の.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…