Three.js＠TypeScript

2019-11-20
Three.js Meetup Tokyo #0 LT
Atsushi Fujisawa

About me

	Atsushi Fujisawa
Job	Frontend engineer @digitalstage Inc.
Twitter	@fa24
GitHub	f-a24

普段はTypeScriptでReact書いたり、jQueryと戦っている
Three.jsは趣味で勉強中

初めてのLTなのでどうか温かい目で見ていただければと思います🙇‍♂️

今日話すこと

TypeScriptでThree.jsを使ってみてどうだったか

１年前

• 😃「前々から気になっていたThree.js勉強するぞー！！」
• 初めてのThree.js 第2版を購入
  
• 😃「あ、せっかくだしTypeScriptやWebpack環境でやってみよ」

Repository
https://github.com/f-a24/three-sandbox

開始当初（r96ぐらい）

• 😃「おんや？」
  
• 😃「examplesがESModules（import/export）になっていない？」
• imports-loader（webpack plugin）で解決
  

• 😃「おんや？」
  
• 😃「型定義が無い？」
• 自分で定義して解決
  

ツラい😭

不意に呟く

😲Mr.doob！？😲

• でも、若干求めていた答えではなかった
• しかし、追求する勇気は出ず…
• その後、あまり進まず…

１年後

• 😃「いい加減、Three.js再開しないと！」
• 😃「とりあえずバージョンアップしよ」

😭😭😭

• 😃「あれ？でもなんか型定義が間違っているような…」
  
• 思い切ってPR
• 無事マージ
  

🎉初めてのOSSコントリビュート🎉

😃「あれ？他にもちょいちょいあるぞ？」

• https://github.com/mrdoob/three.js/pull/17460
• https://github.com/mrdoob/three.js/pull/17472
• https://github.com/mrdoob/three.js/pull/17657

他にも改善の余地はありそう🤔

まとめ

• 型定義などのTypeScript関係はコントリビュートチャンス！
• サードパーティ製ライブラリとかはimports-loaderで頑張る
• r103辺りから@types/threeは必要ない（npm i threeだけで良い）

Thanks!!