JavaScript のプライベートプロパティが嬉しいとき
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ minify で意図しない名前の衝突
◆ 開発中は npm パッケージを使って公開は CDN を使ったらバージョンが同じでも minify 後の名前が違う場合がある
◆ CDN にあるのはバンドルしてたりして別ビルドのことがある
◆ 開発中は npm パッケージを使って公開は CDN を使ったらバージョンが同じでも minify 後の名前が違う場合がある
◆ CDN にあるのはバンドルしてたりして別ビルドのことがある
JavaScript のプライベートプロパティ機能は完全に隠されてしまって外部からのアクセス手段がないので バグの回避や機能追加やデバッグなどに使えなくなるのでやめてほしいという意見でした
しかし今回プライベートプロパティを使ってほしいというケースに遭遇しました
これは想定してなかったです
個人的に継承はあまり好きじゃないので内部にインスタンスを持って必要なメソッドのみプロキシするような作りにすることが多いですが そうもいかないところもあります
単純に名前が衝突します
プライベートなものなのでドキュメントに記載されておらず 謎のエラーが出てるなと思ったら親クラスで使ってるプライベートプロパティと名前が同じになっていて 必要なプロパティを上書きしてる状態になってました
a とか _ とか $ みたいな一文字化されるので 短い名前を使うと重複します
ドキュメントに記載してないプロパティはライブラリ名などをプレフィックスに使用して重複し辛いようにしてほしいですが minify の目的を考えると難しそうです
こういうときにはプライベートプロパティにしてくれてると助かりますね
プライベートでもアクセスしたいという場合はアクセスできない問題が出てきてしまいますけど
また この場合はエラーが出ても気づきにくかったりします
意図しない上書きで通常ありえない値になっているのでエラーメッセージから原因を想像しづらいです
devtools でエラーを見ても map ファイルがあることで minify 済みのコードが見えていないので変数名がエラーと一致しません
開発中は npm パッケージを使っていて 公開時には importmap を使って CDN からロードするようにしてました
npm パッケージの方も minify 済みでしたが 同じバージョンでも CDN の方とは minify 後のコードは同じではなく minify で割り当てられる名前が異なっていました
そのせいで CDN を使ったときだけ名前が衝突して動かなくなってました
同じバージョンと言っても実際に使うコードで確認しないといけないですね
CDN だと 2 系の最新を使う みたいに完全なバージョンを指定しないこともできますが これも危険ですね
minify 済みを使うのですから外部の CDN からロードしたモジュールです
.d.ts ファイルがあっても記載されている型情報に minify 済みのプロパティはなさそうなので 検知できない気がします
そもそも class を継承しなければ起きない問題なので やっぱり class は極力使いたくないです
しかし今回プライベートプロパティを使ってほしいというケースに遭遇しました
これは想定してなかったです
名前が衝突
問題になるのは継承して使うのが前提になってるクラスです個人的に継承はあまり好きじゃないので内部にインスタンスを持って必要なメソッドのみプロキシするような作りにすることが多いですが そうもいかないところもあります
単純に名前が衝突します
プライベートなものなのでドキュメントに記載されておらず 謎のエラーが出てるなと思ったら親クラスで使ってるプライベートプロパティと名前が同じになっていて 必要なプロパティを上書きしてる状態になってました
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 は極力使いたくないです