あなたの知らない Function.prototype.toString() の世界

JSConf JP 2024 の発表資料です。

---

JavaScript には Function.prototype.toString() という API があります。この API を使うと、関数本体のソースコードを文字列として取得できます。 一見すると何の使い道があるか分からないかもしれません。しかし、関数本体のソースコードを取得できるということは、実行時に関数のソースコードを静的解析できることを意味します。また、関数をシリアライズしてどこかに転送した後、デシリアライズして実行するといったことも可能です。この特徴は、JavaScript に大きな力をもたらします。 このトークでは、 Function.prototype.toString() はどんな API なのか、どういう使い道があるのか、世の中のライブラリで利用されている実用的なものから、狂った使い方まで紹介します。

- リモート関数 (puppeteer の page.evaluate())
- ネイティブコード判定
- tempalte literal を使わない複数行文字列リテラル
- etc...

Transcript

1. あなたの知らない の世界 id:mizdra 2024/11/23 JSConf JP 2024 1 Function.prototype.toString()
2. 自己紹介 • mizdra (みずどら) • インターネット大好き • 株式会社はてな ◦ フロントエンドエキスパート ◦ 社内のフロントエンド啓発活動 2
3. 3 今日のテーマ
4. 4 Function.prototype. toString()
5. 5 Function.prototype. toString() Function.prototype.toString() • 多分あんまり知られてない • 今日は全員にこの API のことを知って帰ってもらえれば
6. 6 Function.prototype. toString() どんな API? • 関数のソースコードを取り出せる API • 関数 (例: add) に対して add.toString() を呼び出す ◦ add 関数のソースコードが得られる
7. 7 例: add 関数を toString()
8. 8 Function.prototype. toString() そんだけ? って感じだけど • 実は色々な用途がある • 著名ライブラリの中でも使われてる • 今日の内容 ◦ 実用的な使い方から ◦ 変わった使い方まで ◦ 色々紹介
9. 9 用途① 関数の転送
10. 10 Function.prototype. toString() 「関数の転送...?」 • 関数って送信できないのでは...? • 普通送信するには... ◦ serializable じゃないといけない • 関数は serializable じゃない
11. 11 Function.prototype.toString() 使えばできる
12. 12 Function.prototype. toString() 関数の転送の仕方 1. 送信側: fn.toString() 2. 送信側: 得られた文字列を送信 3. 受信側: const fn = eval(fnStr) 4. 受信側: fn()
13. 13 Puppeteer でやってる
14. 14 Puppeteer • Node.js 向けのヘッドレスブラウザ操作ライブラリ • Page#evaluate(fn, arg) ◦ 関数を引数に渡せる ◦ ブラウザのWebページ上で、関数を実行
15. 15 例: ヘッダーのテキストを取得する
16. 16 例: ヘッダーのテキストを取得する Node.js で実行
17. 17 例: ヘッダーのテキストを取得する 関数の中はブラウザで実行される。 DOM API が使える。 Node.js で実行
18. 18 ブラウザ上で関数を実行する仕組み • さっきと同じ ◦ 1. Node.js 側: fn.toString() ◦ 2. Node.js 側: それをブラウザに送信 ◦ 3. ブラウザ側: const fn = eval(fnStr) ◦ 4. ブラウザ側: fn() で実行 • ブラウザ上で fn() が実行される！
19. 19 用途② ネイティブコード判定
20. 20 Function.prototype. toString() ソースコードが取り出せると言うけど • 実は必ずしもそうではない • 例: alert ◦ 自分が書いた関数ではなく、組み込みの関数 ◦ toString() するとどうなる?
21. 21 組み込みの関数で toString() すると... 組み込み関数は 中身が見えないようになってる
22. 22 応用: ネイティブコード判定
23. 23 Function.prototype. toString() とはいえ • 実用的な用途思いつかなかった • 実用例調べたけどない ◦ 何かに使えると思うんだけど... ◦ 知ってる人いたら教えて下さい
24. 24 Function.prototype. toString() 余談: core-js • core-js の polyfill は JavaScript で書かれてるけど... ◦ ネイティブコードであるかのように偽装してる
25. 25 core-js のネイティブコード偽装 徹底して polyfill しててすごい
26. 26 用途③ Dependency Injection
27. 27 AngularJS の Dependency Injection • AngularJS: Viewフレームワーク ◦ 2009 年リリース、現在 EoL ◦ 注意: 後継とされる Angular とはだいぶ別物 ▪ 混同しないように！ • 引数を使い、Controller に Service を DI できる ◦ Function.prototype.toString() が使われてる
28. 28 例: AngularJS の Controller の定義
29. 29 例: AngularJS の Controller の定義 (DI される) Service を表す引数
30. 30 Dependency Injection のフロー ①toString() して関数のソースコードを取得
31. 31 Dependency Injection ② 引数リストから $scope, greeter の 2 つの Service に依存してることを推測
32. 32 Dependency Injection ② 引数リストから $scope, greeter の 2 つの Service に依存してることを推測 ③ランタイムが $scope, greeter を DI する
33. 33 荒業
34. 34 荒業すぎて minify すると壊れる
35. 35 minify すると壊れる • どういうことか ◦ minify 前: ($scope, greeter) => {...} ◦ minify 後: (a, b) => {...} • Service 名が推測できなくなる ◦ DI 失敗
36. 36 回避策 1. 文字列で Service 名を埋め込む ◦ `ctrl.$inject = ['$scope', 'greeter']` ◦ 自分で書いてるコードなら文字列形式に書き換えできるが... ▪ 3rd-party ライブラリ中のコードの書き換えは厳しい 2. 識別子だけ minify やめる ◦ `minifyOption: { minifyIdentifiers: false }` ◦ 弊社ではやってた
37. 37 何故こうなってるのか • 今だったら ◦ bundle して、minify するのが当たり前 ◦ minify すると壊れる、は考えられない • 当時は bundler なかった ◦ minify も今ほど気軽にできない • 当時の時代背景故、こうなってる
38. 38 用途④ お手製 template literal
39. 39 実は...
40. 40 荒業MAX な 応用例
41. 41 漢は黙ってjQuery / @potato4d https://speakerdeck.com/potato4d/han-hamo-tutejquery?slide=35
42. 42 まとめ • Function.prototype.toString() でできること ◦ 関数の転送 ◦ ネイティブコード判定 ◦ Dependency Injection ◦ お手製 template literal • 面白いことができるが、気軽に使うと大変なことに ◦ 乱用、ダメ。ゼッタイ。