Save 37% off PRO during our Black Friday Sale! »

はじめてのconsole.log

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
February 07, 2017

 はじめてのconsole.log

20170207
Meguro.es #8 発表資料

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

February 07, 2017
Tweet

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