Firebaseにて、ローカルとホスティング環境での動作が異なります

Question

状況

タイトルの通り、Firebaseを利用しておりますが、
ローカルで実行した場合と、ホスティング後で挙動が異なります。

書いてるコード

Firestoreからデータをfetchするために、
Collectionクラスをまず作りました。
実際のCollection (下の例では testsコレクション）を操作する場合、
Testsクラスを作成し、Collectionクラスを継承して、データを操作します。

class Collection {
 collection: firebase.CollectionReference;

 constructor() {
　 // クラス名の先頭を小文字にする
   const collectionName = _.lowerFirst(this.constructor.name); 
　 this.collection = firestore().collection(collectionName); 
 }

 public fetchAll = async () => {
　　const snapshot = await this.collection.get(); 
    ... 
    return documents;
 }
}

// testsコレクションのデータを操作
class Tests extends Collection{}

どのように動作が異なるのか？

上記のコードをもとに、

await new Tests().fetchAll() 

を行うと、

ローカルでは、testsコレクションのデータが取得できますが、
ホスティング後は、空オブジェクトになります。

原因を探ってみると、上述のコードのコンストラクタが悪さをしております。

具体的には、

class Collection {
 collection: firebase.CollectionReference;

 constructor() {
　 const collectionName = _.lowerFirst(this.constructor.name); 
　 this.collection = firestore().collection(collectionName); 
}
 ...

の this.constructor.name の値が異なります。

ローカル実行では、 "Tests"とクラス名が取れるのですが、
ホスティング後は、 なぜか "n" という値が出力されます。。。

根本的な原因が分からないので、
consturctorの引数にコレクション名等を取る形に変えるか迷っております。

なぜこのような状況になるのか、
アドバイスをいただけたら幸いです。よろしくお願いいたします。

Comments

[hoshi-takanori]

ホスティングではリリースビルドされて minify/uglify の結果クラス名が短くなってるのでは。クラスや関数の名前に頼らないほうがいい気がします。

[gano]

ありがとうございます。
Typescriptのトランスパイルの結果が見れないのですが、クラス名が短くなっているから動かないというのは非常にしっくりきます。おのおののファイルに定数をおいて定数で管理するようにします。

ベストアンサーにしたいのですが、
同じ内容でかまいませんので、回答にコメントいただけますでしょうか？

Answer 1

推測ですが、ホスティングではリリースビルドされて minify/uglify の結果クラス名が短くなってるのではないでしょうか。クラスや関数の名前に頼らないほうがいいと思います。

Comments

[gano]

ご回答ありがとうございました。
とても参考になりました。