はじめてのconsole.log

20170207
Meguro.es #8 発表資料

Transcript

1. ͸͡Ίͯͷconsole.log EDWARD FOX @Meguro.es 2017/02/07
2. Edward Fox - Developer @ Repro Inc. - RoR, JavaScript, AWS - Vue.js, HTTP/2, WebAssembly
3. ಥવͰ͕͢Έͳ͞Μ
4. console.logɺͯ͠·͔͢ʁ
5. JSΛॻ͘ਓͰ console.logΛ࣮ߦͨ͜͠ͱ ͕ͳ͍ਓ͸͍ͳ͍Ͱ͢ΑͶ
6. ࠓ೔࿩͢͜ͱ
7. consoleΦϒδΣΫτͷ ศརؔ਺ʹ͍ͭͯ
8. - console.tableͱ͔ - console.profileͱ͔
9. ৭ʑ͋ΔͷͰάά͍ͬͯͩ͘͞
10. ͓ΘΓ
11. Ͱ͸ͳ͘
12. ϒϥ΢βͷΠϯεϖΫλʹ console.log(‘foo’)ͱೖྗͯ͠ ͔Βɺfooͱग़ྗ͞ΕΔ·Ͱ
15. ௐ΂Δํ๏
16. 1.ϒϥ΢βͷιʔείʔυಡΉ 2. ϒϥ΢βΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏
17. 1.ϒϥ΢βͷιʔείʔυಡΉ 2. ϒϥ΢βΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏
18. ର৅͸WebKit ʢͷϛϥʔϦϙδτϦʣ https://github.com/WebKit/ webkit
19. C++ॳ৺ऀ͕งғؾͰಡΜ ͩͷͰɺؒҧ͍ͬͯͨΒڭ ͍͑ͯͩ͘͞ && ͍ͩͿ୺ં͍ͬͯΔͷ Ͱɺͦͷล͸͝צหΛ
20. ۦ͚଍Ͱ͍͖·͢
21. Ͳ͔͜ΒಡΉ΂͖͔ Θ͔Βͳ͍
22. ೖྗΛड͚औΔʹ΋ ΠϯεϖΫλͷUI͕ඞཁ
23. WebInspectorUI
24. jsͰॻ͔Ε͍ͯΔ͔Β ׂͱαΫαΫಡΊΔ
25. ConsoleObserver͕ ϢʔβʔͷೖྗΛ ؂ࢹ͍ͯ͠Δ
26. ೖྗΛؔ஌͢Δͱ LogManagerʹॲཧΛҕৡ
27. LogManager.messageWasAdded()
28. ͜ͷmessageΛड͚औΔ ΠϯλʔϓϦλʔ͕͍Δ ͦͷ໊΋Interpreter
29. Interpreter͔Βઌ͸ C++Ͱॻ͔Εͨ ϒϥ΢βͷωΠςΟϒ࣮૷
30. Interpreter͸ UI͔ΒͷೖྗΛ callFrameͱͯ͠଴ͬͯΔ
31. callFrame = InterpreterΛ ίʔϧͨ͠ɺJSͷίʔυ΍ ͦͷ࣮ߦ؀ڥͳͲ
32. InterpreterͰ͸ɺevalؔ਺͕ callFrameΛड͚औͬͯධՁ JSValueܕͷ஋Λฦ͢
33. ͜ͷͱ͖ ࣮ߦ؀ڥͷείʔϓʹ΋ͱ͍ͮͨ LexicalGlobalObjectͳͲ΋ੜ੒ strict modeͰͷ࣮ߦͱ͔΋ ͜ͷ࣌఺Ͱ൑ผͯ͠ॲཧΛม͑Δ
34. console.logͱ͍͏ JSͷίʔυΛC++ͷؔ਺ʹ Ϛοϐϯάͯ͠ ࣮ߦ͢Δඞཁ͕͋Δ
35. େྔͷϚΫϩ
39. putDirectNativeFunction- WithoutTransition()
40. JSίʔυͷ࣮ߦঢ়ଶΛࣔ͢ ExecStateΛ΋ͱʹ࣮ߦ
41. JSC_HOST_CALLͱ͍͏ ϚΫϩ͕͋Δ if CPU(X86) && COMPILER(GCC_OR_CLANG) Έ͍ͨͳίʔυ΋͋ͬͯ ຯΘ͍ਂ͍
42. ͔͜͜Βઌ͸ ConsoleObjectΫϥε ͷίʔυΛ௥͍·͢
43. ͞Βʹۦ͚଍Ͱ
44. consoleProtoFuncLog()
45. consoleLogWithLevel()
46. logWithLevel()
47. messageWithTypeAndLevel()
48. WTFLogAlways()
49. vprintf_stderr_with_trailing_ newline()
50. ʢϝιου໊ͷงғؾ͕ มΘͬͨ…ʁʣ
51. vprintf_stderr_common()
52. logToStderr()
53. fputs()
54. …!!!
55. ʹ͡Έग़Δ ௿ϨΠϠʔײ
56. ͕͜͜࠷ਂ෦͔ʁ
57. fputs()ͷ࣮૷͸ WebKitʹͳ͍
58. C++ʹ༻ҙ͞Ε͍ͯΔؔ਺
59. > ϑΝΠϧϙΠϯλfpʹ จࣈྻstrΛग़ྗͯ͠ ੒ޭ͢Ε͹ෛͰ͸ແ͍஋Λ ΤϥʔͰ͋Ε͹EOF(-1)Λฦ͢
60. ͭ·Γ
61. fputs()͢Δͱ ϑΝΠϧʢ͔Կ͔ʣ΁ͷ ग़ྗ͸৭Μͳͱ͜ΖΛ ܦ༝ͯ͠Χʔωϧͷ γεςϜίʔϧΛ࣮ߦ͢Δ
62. ग़ྗ͞Εͨ಺༰͸ ίʔϧ͞Εͨؔ਺Λ ͔͞ͷ΅ͬͯ஋Λฦ͢
64. console.log(‘foo’) —— ೖྗͱೖྗΛड͚औΔڥք WebInspector ConsoleObserver LogManager messageWasAdded —— JSͱC++ͷڥք Interpreter#eval JSC_NATIVE_FUNCTION_WITHOUT_TRANSITION JSFunction::Create consoleProtoFuncLog consoleLogWithLevel logWithLevel messageWithTypeAndLevel printConsoleMessageWithArguments WTFLogAlways vprintf_stderr_with_trailing_newline vprintf_stderr_common logToStderr fputs —— C++ͱCͷڥք? many C++ & C implementations —— CͱΧʔωϧͷڥք? Kernel system call
65. console.log(‘foo’) —— ೖྗͱೖྗΛड͚औΔڥք WebInspector ConsoleObserver LogManager messageWasAdded —— JSͱC++ͷڥք Interpreter#eval JSC_NATIVE_FUNCTION_WITHOUT_TRANSITION JSFunction::Create consoleProtoFuncLog consoleLogWithLevel logWithLevel messageWithTypeAndLevel printConsoleMessageWithArguments WTFLogAlways vprintf_stderr_with_trailing_newline vprintf_stderr_common logToStderr fputs —— C++ͱCͷڥք? many C++ & C implementations —— CͱΧʔωϧͷڥք? Kernel system call
68. Θ͔ͬͨ͜ͱ
69. ϒϥ΢β͸ڊେͳ ϥϯλΠϜ+ίϯύΠϥ
70. [native code] ා͘ͳ͍
73. ͓·͚ ʢ࣌ؒ͋ͬͨΒʣ
74. WebKitͷ δϫδϫ͘Δͱ͜Ζ
75. 1. UIͷ෦෼͕es6Ͱ ॻ͔Ε͍ͯΔ
76. = 1ͭͷϦϙδτϦʹ es6ࣗମͷ࣮૷ͱ es6ͷίʔυͱ es6ͷlintϑΝΠϧ͕͋Δ
77. 2. UIͷ෦෼ͷjsίʔυ͕ ͚ͬ͜͏console.assertΛ ࢖͍ͬͯΔ
78. = ΫϥΠΞϯτͰى͖Δࣄ ͸৴༻Ͱ͖ͳ͍͠ ҉໧తͳܕม׵΋ා͍͠ = ͦ͏ͩconsoleʹ ศརͳؔ਺͋Δ͔Β ࢖ͬͪΌ͓͏ͥ
79. 3. rubyͱ͔pythonͷ εΫϦϓτ͕ͨ·ʹ͍Δ
80. = ։ൃऀ͕༻ҙͨ͠ Ϗϧυ΍σόοά༻ͷ εΫϦϓτͳͲ = ͨͿΜ։ൃऀͷ޷ΈʹΑͬͯ rubyͱ͔pythonͰॻ͔Ε͍ͯΔ
81. ͓͠·͍