◆ minify で意図しない名前の衝突
◆ 開発中は npm パッケージを使って公開は CDN を使ったらバージョンが同じでも minify 後の名前が違う場合がある
  ◆ CDN にあるのはバンドルしてたりして別ビルドのことがある

JavaScript のプライベートプロパティ機能は完全に隠されてしまって外部からのアクセス手段がないので バグの回避や機能追加やデバッグなどに使えなくなるのでやめてほしいという意見でした
しかし今回プライベートプロパティを使ってほしいというケースに遭遇しました
これは想定してなかったです

名前が衝突

問題になるのは継承して使うのが前提になってるクラスです
個人的に継承はあまり好きじゃないので内部にインスタンスを持って必要なメソッドのみプロキシするような作りにすることが多いですが そうもいかないところもあります

単純に名前が衝突します
プライベートなものなのでドキュメントに記載されておらず 謎のエラーが出てるなと思ったら親クラスで使ってるプライベートプロパティと名前が同じになっていて 必要なプロパティを上書きしてる状態になってました

minify のせい

基本は _property1 みたいに _ プレフィックスがついたりある程度長い名前だったりして重複はまずないと思っていたのですが minify が影響してきます
a とか _ とか $ みたいな一文字化されるので 短い名前を使うと重複します
ドキュメントに記載してないプロパティはライブラリ名などをプレフィックスに使用して重複し辛いようにしてほしいですが minify の目的を考えると難しそうです

こういうときにはプライベートプロパティにしてくれてると助かりますね
プライベートでもアクセスしたいという場合はアクセスできない問題が出てきてしまいますけど

また この場合はエラーが出ても気づきにくかったりします
意図しない上書きで通常ありえない値になっているのでエラーメッセージから原因を想像しづらいです
devtools でエラーを見ても map ファイルがあることで minify 済みのコードが見えていないので変数名がエラーと一致しません

公開後に問題が起きた

今回 問題が発生したのは公開後でした
開発中は npm パッケージを使っていて 公開時には importmap を使って CDN からロードするようにしてました
npm パッケージの方も minify 済みでしたが 同じバージョンでも CDN の方とは minify 後のコードは同じではなく minify で割り当てられる名前が異なっていました
そのせいで CDN を使ったときだけ名前が衝突して動かなくなってました
同じバージョンと言っても実際に使うコードで確認しないといけないですね

アップデートでも

ビルドごとに minify 後の変数名が変わるということを考えると パッケージのバージョンを上げるときも動かなくなる可能性があります
CDN だと 2 系の最新を使う みたいに完全なバージョンを指定しないこともできますが これも危険ですね

TypeScript

ところで TypeScript では回避できるのでしょうか?
minify 済みを使うのですから外部の CDN からロードしたモジュールです
.d.ts ファイルがあっても記載されている型情報に minify 済みのプロパティはなさそうなので 検知できない気がします


そもそも class を継承しなければ起きない問題なので やっぱり class は極力使いたくないです