JavaScriptだってプライベートがほしい

Transcript

1. JavaScriptだってプライベートがほしい
2. あ・・・ありのまま ES2018の仕様を話すぜ！ 「JavaScriptにはPrivate Class Fieldがない」 な・・・　何を言っているのか わからねーと思うが おれも　何を言ってるのか　わからなかった・・・ 頭がどうにかなりそうだった・・・ ReactだとかTypeScriptだとか そんなチャチなもんじゃあ　断じてねえ もっと恐ろしいものの片鱗を　味わったぜ・・・
3. そもそもJavaScriptにClassがないじゃん？ って思われるかもしれませんが ES2015でクラス構文が定義されました
4. ただし、オブジェクト指向継承モデルを導入したわけではありません プロトタイプベース継承の糖衣構文です 「特別な関数」という扱いです なので、クラス式という書き方もできます
5. 例） let Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } calcArea() { return this.height * this.width; } };
6. 初期段階では他の言語では標準である機能については めんどくさかったのか、あと回しになってました（議論はしてた？） なので先程のクラスの変数はすべてpublicです
7. 例） class Engineer { constructer(name, type) { this.name = name; this.type = type; } speak() { console.log(`${this.name} is ${this.type} Engineer.`) } } const kaneko = new Engineer('Kaneko', 'Front End'); kaneko.speak(); / / Kaneko is Front End Engineer. kaneko.type = 'Unity'; kaneko.speak(); / / Kaneko is Unity Engineer.
9. JavaScriptにもPrivate Class Fieldを 求める声は2017年になってproposalとなりました https:/ /github.com/tc39/proposal-class-fields それまではいろんな手段をつかってきました
10. 例1） 運用でカバー 公開を意図しないフィールドには _ をつけるなど const Engineer = ((name, type) => { constructer(name, type) { this._name = name; this._type = type; } speak() { console.log(`${this._name} is ${this._type} Engineer.`) } })
11. 例2）Soft Private const Engineer = ((name, type) => { const privateName = Symbol() const privateType = Symbol() return class EngineerClass { constructor(name, type) { this[privateName] = name; this[privateType] = type; } speak() { console.log(`${this[privateName]} is ${this[privateType]} Engineer.`) } } })()
12. ようやくproposalがStage 3になりました！ Chrome 74で実装済みです！
13. 例） class Engineer { #name = ''; #type = ''; constructer(name, type) { this.#name = name; this.#type = type; } speak() { console.log(`${this.#name} is ${this.#type} Engneer.`) } } const kaneko = new Engineer('Kaneko', 'Front End'); kaneko.speak(); / / Kaneko is Front End Engineer. kaneko.#type = 'Unity'; / / SyntaxError kaneko.speak(); / / Kaneko is Front End Engineer.
14. この#を使った構文にたどり着くまでに 紆余曲折がありました ２年もかかりました
15. JavaScriptでもprivateを使おうとしてたのか 予約語にはなってます しかしJavaScriptでは動的にプロパティが定義できるため 毎回、privateなのかpublicなのか判定する必要が出てきてしまいます
16. 例） class Engineer { private name = '' private type = '' constructer(name, type) { this.name = name; this.type = type; } } consta kaneko = new Engineer('kaneko', 'Front End'); kaneko.type = 'Unity'; / / public変数として定義される kaneko.speak(); / / Kaneko is Front End Engineer.
17. #以外の記号も検討されましたが ASI hazardsやshorthandなどを考慮して却下されました
18. こうしてJavaScriptは2019年になって 念願のプライベートを手に入れるかもしれません （まだStage 3）