JavaScriptライブラリの作成

この短いチュートリアルでは、Wonderland Engine向けのコンポーネントライブラリの作成と共有のプロセスを案内します。

npmのインストール 

npmは、JavaScriptエコシステムの公式パッケージマネージャーです。

現在、npmはWonderland Engineのツールチェーンの一部となっており、開発者が外部の依存関係を容易に扱えるようになっています。 ライブラリ作成者として、npmを用いてライブラリを管理・公開する必要があります。

nodejsをダウンロードすることで、npmも一緒にインストールされます。

ライブラリの作成 

このチュートリアルでは、my-libraryというフォルダにライブラリを作成します。my-libraryフォルダに移動して次のコマンドを実行してください：

npm init

いくつかのプロンプトが表示され、パッケージに関する情報の入力を求められます：

package name: (my-library)
version: (1.0.0)

プロンプトに回答すると、次のようなpackage.jsonファイルが生成されます：

{
  "name": "my-library",
  "version": "1.0.0",
  "description": "My Wonderland Engine first library!",
  "main": "index.js"
}

package.jsonファイルにはライブラリに関する必要な情報がすべて含まれています。開発者がライブラリをインストールするとき、npmはこのファイルの中にあるデータを参照します。

‘wonderlandengine’ タグ 

Wonderland Editorは特定のメタタグwonderlandengineに基づいてライブラリを自動登録します。

Wonderland Engineで使用するライブラリを作成する際には、package.jsonに以下の行を追加する必要があります。例として、"main": "index.js"の上に追加してください：

  "wonderlandengine": {},

現在は、これだけでエディタがライブラリを自動的に検出します。将来的には、wonderlandengineメタデータオブジェクトにより、Wonderland Engineのためのプロパティをより多く指定できるようになるかもしれません。

エントリーポイント 

エントリーポイントとして重要な部分の一つがindex.jsフィールドです。これはライブラリオブジェクトをエクスポートするファイルを指定します。開発者がライブラリを使用してインポートする際：

import {ComponentA, ComponentB} from 'my-library';

'my-library'は次のように解決されます：

node_modules/my-library/index.js

したがって、エントリーポイントはライブラリの公開インターフェース（クラス、関数など）をエクスポートする必要があります：

index.js

// 他のファイルからのコンポーネントを再エクスポート
export {ComponentA} from './component-a.js';
export {ComponentB} from './component-b.js';

export {someUtilityFunction} from './someUtilityFunction.js';

package.json内にwonderlandengineメタタグが見つかった場合、エントリーポイントはすべてのエクスポートされたコンポーネント（上記の例ではComponentAとComponentB）を見つけるために使用されます。

依存関係 

このチュートリアルでは、Wonderland EngineのパブリックAPIを使用するコンポーネントを作成します。

package.jsonに依存関係として追加します。"dependencies"の下に新しいセクションとして"peerDependencies"を追加します：

  "dependencies": {
  },
  "peerDependencies": {
    "@wonderlandengine/api": "^1.0.0"
  }

これは重要です。ライブラリとともに、ユーザーが様々なAPIバージョンを使用できるようにしたい場合、通常は次のメジャーリリースまでのバージョン範囲を許可します。

APIを使用できるようにするには、次にnpm installを実行してpackage.jsonの変更を適用する必要があります：

npm install

コンテンツを追加 

このチュートリアルでは、オブジェクトをある速度で前進させる簡単なコンポーネントを作成します。 ライブラリフォルダにmove-forward.jsという新しいファイルを作成し、次の内容を記述します：

move-forward.js

import {Component, Property} from '@wonderlandengine/api';

const tempVec = new Float32Array(3);

export class MoveForward extends Component {
    static TypeName = 'move-forward';
    static Properties = {
        speed: Property.float(1.5),
    };

    update(dt) {
        this.object.getForward(tempVec);

        tempVec[0] *= this.speed;
        tempVec[1] *= this.speed;
        tempVec[2] *= this.speed;

        this.object.translate(tempVec);
    }
}

このコンポーネントをパッケージを使用する開発者に再エクスポートすることも必要です。index.jsファイルを更新しましょう：

index.js

export {MoveForward} from './move-forward.js';

この例では、コンポーネントを直接index.jsに入れることもできました。しかし、ライブラリが成長するほど、エクスポートに対する制御が重要になります。

テストとデバッグ 

テストは、Wonderland Engineプロジェクトを作成し、ローカルパスを使用してライブラリをインストールすることで行えます。 このチュートリアルでは、MyWonderlandという名前のWonderland Engineプロジェクトが作成されたと仮定します。 プロジェクトのルートで、次のコマンドを実行できます：

npm install path/to/my-library

path/to/my-libraryをライブラリフォルダのルートを指すパスに置き換える必要があります。

これで完了です！これでMoveForwardコンポーネントにプロジェクト内でアクセスできるようになりました。

Wonderland Engineエディタとmove-forwardコンポーネント

この場合、ライブラリはローカルにインストールされています。他の開発者はライブラリにアクセスできません。 次のいずれかの方法が必要です：

  • ライブラリを公開する（Publish the Libraryセクションで説明されています）
  • または ローカルパッケージ（例：.tar.gz）として提供し、それをインストールできるようにする

ライブラリを公開 

ライブラリをnpmパッケージリポジトリにパッケージとして公開することで、特定のバージョン番号を持つコードをマークし、npmサーバーにパッケージをアップロードして他の開発者がダウンロードできるようにします。

ログイン 

ライブラリをnpmに公開するには、次のことが必要です：

  • npmjs.comでアカウントを作成する
  • ターミナルコマンドを使用してログインします（詳細はこちらで確認できます）

公開 

ログインしたら、ターミナルでライブラリフォルダに移動し、次のコマンドを実行してパッケージを公開できます：

npm run publish

また、以下を使用して「試験」公開を行うこともできます：

npm run publish --dry-run

このコマンドは、公開されるファイルに関する情報を表示し、不要なファイルが公開されないことを確認できます。

インストール 

ライブラリが正常に公開されたら、プロジェクト内で次のコマンドを実行してインストールできます：

npm install --save my-library

これで、素晴らしいライブラリを作成する準備が整いました。

ライブラリを作成することで、コミュニティは繁栄し、すべての人に向けた素晴らしいWebXRコンテンツを開発するきっかけとなります。

Writing Components in Typescript