プロジェクト構成をリファクタリングする
さて、前回は3DCGライブラリにおけるトランスフォームの考え方について説明しました。
このトランスフォームの機能を早速spinelライブラリに実装したいのですが、
その前準備として、プロジェクト全体の構成をリファクタリングしておきましょう。
ソースコードを整理する
ライブラリ開発において、リファクタリングはとても重要です。
リファクタリングせずに機能追加を続けると、そのコードやプロジェクトは見通しが悪く、バグを誘発するようになり、次第に技術負債化していきます。
そうはなりたくないですね。今回は、プロジェクト開始時には気が付かなかった様々な点を改善していきます。
なお、今回の内容は主にTypeScriptの仕様に関わる話ですので、ライブラリ開発の本質的な話ではありません。
TypeScriptにあまりこだわりのない方は、あまり深く考えずに作業としてやってしまいましょう。
Vector3.tsとVector4.tsをsrc/mathディレクトリ以下に移動する
現在のソースコードは、srcフォルダ以下に全て一緒くたに入ってしまっていますね。少し乱雑です。
そこで、Vector3.tsとVector4.ts、そして将来の行列クラスなどは、src/mathというディレクトリに移動することにします。
VS Codeなどで編集されている方は、VS Code上でsrc/mathディレクトリを作成し、Vector3.tsとVector4.tsを同ディレクトリにドラッグ＆ドロップすれば、
これらのクラスを参照しているMaterial.tsやGltf2Importer.tsなどの冒頭のimport文も自動で書き換えてくれます。
そうしたエディタをお使いでない場合は、手動でimport文のパスを修正してください。
default付きexportを名前付きexportに変更する
また、今まではクラスのexportをdefault付きでやっていましたが、色々調べたところ名前付き（defaultなし）exportの方がメンテナンス性が良いらしいです。
この点も各クラス、修正しておきましょう。
名前付きexportをしたクラスをimportする際は、クラス名を{}で囲みます。
全てのクラスを名前付きexportにしましょう。
全体のexport&importをリファクタリングする
現在、Spinelライブラリ実体への（ユーザー側からアクセス可能にしたい）各クラスの露出は、次のようなコードで実現しています。
現在はクラスの数が少ないのでこれで済んでいますが、開発が進んで大量のクラスを有することになったとき、今までのやり方だとだんだんindex.tsが汚くなっていきます。
具体例を出すと、私が開発している別のライブラリRhodoniteの一時期がこんな感じでした。
こんな感じで、メンテナンスするのが大変になっていきます。
そこで、この全体的なexport&import関係ももっとエレガントな構成にリファクタリングしましょう。
まず、src/mathディレクトリにindex.tsファイルを作成し、以下のようにexport文を記述します。これは、from "~"指定したTSファイル内でexportされている全ての定義を読み込み、さらにその内容をこのindex.tsファイルの外部にexportする、という意味です。
さらに、srcディレクトリ内にindex2.tsファイルを作成し、以下のようにexport文を記述します。
math/index.jsもexportしていますから、src/math以下のVector3.tsとVector4.tsもexport対象となります。
そして、srcディレクトリ内にindex.tsファイルを作成し、以下のように記述します。
import * as Spinel from './index2.js'は、index2.tsがexportした内容（現状はほぼ全てのクラス定義）を全て読み込み、その内容をSpinelという名前のオブジェクトとして定義することを意味しています。
そして、そのSpinelオブジェクトをdefault exportすることで、ユーザーがSpinelライブラリを利用できるようにしています。
これでexport文が各階層に分散され、だいぶスッキリしましたね。
ここまでのソースコードはこちらで公開しています 。
プロジェクト構成が綺麗になったところで、次回は行列クラスを作っていきます。
１3日目：行列クラスを作る