b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2018/11/06

【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

threejs
three.jsに限った話ではないが、開発をする上ではできればコード補完(インテリセンス)を効かせたい。
開発効率も上がるし、タイプミス、それに伴うバグを防ぐことができる。
three.jsでもTypeScriptを使うことによって、コード補完を効かせることが可能。
そのためには、ライブラリのオブジェクトの型を定義した型定義ファイル(.d.ts)をソリューションに追加する必要がある。
以下にTypeScriptによるコード補完を使用したthree.js開発環境の構築手順を記す。

型定義ファイルのインポート

TypeScriptからthree.jsのライブラリを参照するためには、型定義ファイルと呼ばれるファイルが必要。
これは、ライブラリ(ここではthree.js)で定義されているオブジェクトの定義情報を記載したファイルのこと。
TypeScriptからこの情報を参照することで、型判定やコード補完を効かせることができるようになる。

型定義ファイルは、GitHub上の「DefinitelyTyped」と呼ばれるリポジトリに配置されている。
上記はコミュニティ主導のリポジトリではあるが、実質TypeScriptの公式リポジトリである。
TypeScriptから参照したいライブラリがある場合、このDefinitelyTypedリポジトリからファイルをCloneやダウンロードすればよい。

ただし、VisualStudioを使って開発を行う場合はNuGetを使用して、もっと簡単に型定義ファイルの設定ができる。
ソリューションエクスプローラーからソリューションを選択し、「右クリック>NuGetパッケージの管理」などからNuGetパッケージマネジャーを起動する。
NuGetパッケージマネジャーの検索バーに「threejs DefinitelyTyped」と入力し、「threejs.TypeScript.DefinitelyTyped」をインストール。
1.threejs.TypeScript.DefinitelyTyped

ソリューション直下に、Scrripts>typings>threejsのようにフォルダが作成され、配下に型定義ファイル(d.ts)が配置されていればOK。
2.インストール確認

TypeScriptから型定義ファイルを参照する

NuGetから型定義ファイルをダウンロードしただけでは、TypeScriptから参照することはできない。

TypeScriptのファイルに以下のように記述することで、型定義ファイルを参照することができるようになる。

また、直接記述する以外にも、参照元TypeScriptファイルに型定義ファイルをドラッグ&ドロップすることでも可能。
こちらの方が記述間違いなども起こらないので、特別な理由がない場合は、こちらを推奨。

また、NuGetからインストールしただけだとビルドが通らないので、以下を実施する必要がある。
three.d.tsをソリューションの直下にコピー、その後TypeScriptに型定義の参照設定の記述をする。
Scripts配下のフォルダーをソリューションから除外する。

three.js本体をソリューションに追加

以下からthree.js本体をダウンロード。
https://threejs.org/

ダウンロード、展開すると大量のファイルがあるが、ひとまず必要なのは、build配下のthree.jsやthree.jsなどのファイルのみ。
それらのファイルをソリューションに追加する。
(ソリューションを右クリック>追加>既存の項目 から上のファイルを選択)

最終的なソリューション構成は以下のような感じになる。
3.ソリューション構成

これでTypeScriptからコード補完を使用しながらthree.jsのコーディングが可能になる。
4.コード補完

参考

Visual StudioとTypeScriptでJavaScriptライブラリを活用する – Build Insider
[TypeScript][WebGL][Three.js] 3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~ ― 準備編 (プログラミング C# – 翔ソフトウェア (Sho’s))

カテゴリー: IT, プログラミング
タグ   : ,

努力が続かないとお悩みの方へ!

努力のコツ PC用バナー

Amazonにて発売中!!

試験に受かる、給料を上げる、ビジネスを立ち上げる…。
自分の人生をよりよくしていくには、何よりも努力が欠かせません。
しかし、そうはわかっていてもなかなか続かないもの。。。
「めんどくさい」、「明日からでいいや」、「どうせやっても無駄だし」…
こんな風に私たちは努力を続けられずにいます。

ですが、それはあなたが怠けものだからとか、根性がないからというわけではありません。
どうすれば努力が続くのか、その「テクニック」を知らないだけなのです!
本書では、そんな「どうすれば努力が続くのか」というテクニックや心構えを集めました。
「達成したい夢があるのに、どうしても頑張れない…」
そんなあなたに是非とも読んでほしい1冊となっています。


広告

オススメ記事


PAGE TOP ↑