はじめてのconsole.log

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ͱग़ྗ͞ΕΔ·Ͱ

13. None
14. None

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. େྔͷϚΫϩ

36. None
37. None
38. None

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. ग़ྗ͞Εͨ಺༰͸ ίʔϧ͞Εͨؔ਺Λ ͔͞ͷ΅ͬͯ஋Λฦ͢

63. None

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
66. None
67. None

68. Θ͔ͬͨ͜ͱ

69. ϒϥ΢β͸ڊେͳ ϥϯλΠϜ+ίϯύΠϥ

70. [native code] ා͘ͳ͍

71. None
72. None

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. ͓͠·͍