ブラウザ用のJSライブラリをnodeで使いたい

Question

ブラウザ用に提供されるJavaScriptのライブラリ(jsファイル)を、node.jsで使いたいです。
何か方法はありますでしょうか？

具体的には、enchant.jsのクラスの実装がすごく便利なので、それをnodeで使いたいのです。

イメージとしては、browserifyの逆みたいな。
nodeモジュールだと、browserifyを用いてブラウザ用に変換できますよね、あれの逆です。

または、クラスの実装のみを提供するnodeのモジュールがあれば、教えていただけると幸いです。

どうかよろしくお願いします。

Comments

[raccy]

node.js上でenchant.jsをどのように使いたいのでしょうか？DOMやCanvasで描画したアニメーションを録画して動画にするとかですか、それとも、ブラウザ無しでデスクトップ上に表示するとかですか？具体的にどのような物を作りたいのか、どのように使いたいかを書くと、より具体的な方法を示すことが出来るかも知れません。

[trinitrotoluene]

すいません、enchant.jsで描画をするわけではなく、enchant.jsのクラスを実装する機能が欲しいのです。ES6のクラス機能より、そちらの方が使いやすかったので。他にnodeモジュールで、enchantに似たクラスの実装のみのものがあれば、もちろんそれでもいいのですが、、 アドバイス、ありがとうございます。

[raccy]

enchant.jsに含まれるenchant.Class(http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Class.html)だけを使いたいって事ですか。やっとわかりました。具体的なコード例があると回答が出やすくなるかも知れません。

Answer 1

Node.jsはCommonJSまたはES module(現在は実験的機能)でライブラリを読み込むようになっていますが、enchant.jsはどちらにも対応していません。HTMLのscriptタグで単純に読み込む場合しか想定していないと言えます。このようなライブラリをNode.js上で直接利用することは本来出来ませんが、その構成によっては工夫次第で可能になる場合があります。

今回の目的はenchant.Classのみであり、一つのJavaScriptにまとまる前のソースコードでは"Class.js"と言うファイルとして分離独立して存在します。こちらの中身を確認したところ、他のファイルには依存しておらず、また、ブラウザ版JavaScript特有のオブジェクト(DOMなど)も使用していませんでした。しかし、CommonJSやES moduleを想定してた構成ではないため、通常の方法では読み込みできません。今回はenchant.Class = function(...) {};という書き方で定義してあったため、この性質を利用して、Node.jsに読み込みたいと思います。

以下、enchant.Classを使うための方法です。Windowsで作業していることが前提ですが、OSには特に依存しません。

1. enchant.js v0.8.3 ソースコードをダウンロードします。
2. ダウンロードしたZIPファイルから"dev\src\Class.js"のみを取り出して、コピーします。
3. グローバル変数enchantをObjectとして作成した後に、コピーしたソースをrequire()します。

具体的なコードは下記のようにになります。

// enchant.Classのみを読み込んでいる部分
global.enchant = {};
require("./Class.js");
const Class = enchant.Class;

const A = enchant.Class.create({
  initialize: function(x) {
    this.x = x;
  },
  f: function() {
    console.log(`A.f: ${this.x}`);
  }
});

const B = enchant.Class.create(A, {
  initialize: function(x, y) {
    A.call(this, x);
    this.y = y;
  },
  g: function() {
    console.log(`B.g: ${this.x}, ${this.y}`);
  }
});

const a = new A("hoge");
const b = new B("fuga", "piyo");
a.f();
b.f();
b.g();

実行すれば、正常に継承が動作しているところまで確認できると思います。

なお、この方法はどんなものにも使えるというわけではなく、enhant.Classが偶然こういう事が出来るような構成だったにすぎません。**他のライブラリではやり方が全く異なる場合があります。**場合によってはライブラリ側のコードを修正する必要があります。また、グローバル変数を使用していることからも、あまり良い方法とは言えません。

ということで、出来ることには出来ますが、推奨は出来ません。かといって、他にお勧めのクラス実装と言われても、私はCoffeeScriptばかり使ってきたのでクラスの作成に不便を感じたことがなく、そういうライブラリがあるかどうかすらよくわかりません。申し訳ないです。

Comments

[trinitrotoluene]

ご回答ありがとうございます、無事、enchantのClassをnodeで使うことができました。
miyabi-sunさんのご回答も参考にして、Class.jsを少しだけ改造してmodule.exportsなどを追加し、グローバル変数を使わずにrequireで読み込むことも成功しました。ありがとうございます！
CoffeScriptもいじったことはありましたが、どうしてもJSの方が自分には書きやすくて(;^_^)

Answer 2

ソースコードの実体がGitHubで公開されています。
https://github.com/wise9/enchant.js

そして件のClassは/dev/srcディレクトリ配下にあることを確認しました。
https://github.com/wise9/enchant.js/blob/master/dev/src/Class.js
しかし第一行目がenchant.Class = function()...で始まっており、enchant変数が定義されておらずJSエラーで落ちるように思えます。
きっと何かしらのタスクランナーでJSファイル同士をconcatでくっつけているのでしょう。

という訳でプロジェクトルートを漁っていくとGruntfile.coffeeを見つけました。
Gruntはオワコンのタスクランナーですが、最終更新が2年前……ならばGrunt愛用者は結構いたと思います。
https://github.com/wise9/enchant.js/blob/master/Gruntfile.coffee

想像通り/dev/src配下の_intro.js→header.js→Class.jsの順番にファイルをくっつけていますね。
従ってこのようなファイルを作成すれば動くんじゃないですかね？

// header.js の抜粋
// Classes.js を丸コピー
module.exports = enchant.Class;

header.jsを抜粋とした理由ですが、
軽く確認した所、window.addEventListener("message", function(msg, origin) {という感じでwindowオブジェクトに働きかけていますが、Node.jsはwindowオブジェクトは存在しませんので、
header.jsを丸コピーしてくる場合は冒頭に操作を捨てるだけのダミーwindowオブジェクトを宣言する必要がありますし、
他の箇所もポリフィルばかりですので、enchant関数を抽出するだけで良いでしょう。

調べた所enchant.jsはMITライセンスでしたので、
作者に経緯を払ってリンクでも付けておけばどのように改変しても大丈夫です。

---

おまけ: 自分でビルドスクリプトみたいなのを作って自動生成する場合

GitHubのソースコードのページは、curlコマンド等でダウンロードするとページを構成する情報のHTMLがかぶさっているので邪魔です。
それの対策として生のファイルにアクセス出来る「Raw」ボタンがページ上部に存在していますので、
これをクリックすれば生のファイルのURLに遷移します。

自作のビルドスクリプトで、
まずこの/dev/src/Class.jsファイルのRawをダウンロードしてtmpディレクトリにでも突っ込んで、
そのファイルに宣言部の文字列をくっつけて自作のファイルにでもすれば良いでしょう。

Comments

[trinitrotoluene]

ご回答ありがとうございます、無事、enchantのClassをnodeで使うことができました。
enchant.jsの、レポジトリまで探していただいて、本当にありがたい限りです。
enchant.Classを、requireで読み込むことに成功しました。
node.jsはまだ初心者なので、勉強に励みたいと思います。