はじめてのconsole.log

Transcript

1. 1.

   ͸͡Ίͯͷconsole.log EDWARD FOX @Meguro.es 2017/02/07

2. 2.

   Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,

   AWS - Vue.js, HTTP/2, WebAssembly
3. 3.

   ಥવͰ͕͢Έͳ͞Μ

4. 4.

   console.logɺͯ͠·͔͢ʁ

5. 5.

   JSΛॻ͘ਓͰ console.logΛ࣮ߦͨ͜͠ͱ ͕ͳ͍ਓ͸͍ͳ͍Ͱ͢ΑͶ

6. 6.

   ࠓ೔࿩͢͜ͱ

7. 7.

   consoleΦϒδΣΫτͷ ศརؔ਺ʹ͍ͭͯ

8. 8.

   - console.tableͱ͔ - console.profileͱ͔

9. 9.

   ৭ʑ͋ΔͷͰάά͍ͬͯͩ͘͞

10. 10.

    ͓ΘΓ

11. 11.

    Ͱ͸ͳ͘

12. 12.

    ϒϥ΢βͷΠϯεϖΫλʹ console.log(‘foo’)ͱೖྗͯ͠ ͔Βɺfooͱग़ྗ͞ΕΔ·Ͱ

13. 13.

    None
14. 14.

    None
15. 15.

    ௐ΂Δํ๏

16. 16.

    1.ϒϥ΢βͷιʔείʔυಡΉ 2. ϒϥ΢βΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏

17. 17.

    1.ϒϥ΢βͷιʔείʔυಡΉ 2. ϒϥ΢βΛࣗલͰίϯύΠϧ ͯ͠ɺεςοϓ࣮ߦͯ͠௥͏

18. 18.

    ର৅͸WebKit ʢͷϛϥʔϦϙδτϦʣ https://github.com/WebKit/ webkit

19. 19.

    C++ॳ৺ऀ͕งғؾͰಡΜ ͩͷͰɺؒҧ͍ͬͯͨΒڭ ͍͑ͯͩ͘͞ && ͍ͩͿ୺ં͍ͬͯΔͷ Ͱɺͦͷล͸͝צหΛ

20. 20.

    ۦ͚଍Ͱ͍͖·͢

21. 21.

    Ͳ͔͜ΒಡΉ΂͖͔ Θ͔Βͳ͍

22. 22.

    ೖྗΛड͚औΔʹ΋ ΠϯεϖΫλͷUI͕ඞཁ

23. 23.

    WebInspectorUI

24. 24.

    jsͰॻ͔Ε͍ͯΔ͔Β ׂͱαΫαΫಡΊΔ

25. 25.

    ConsoleObserver͕ ϢʔβʔͷೖྗΛ ؂ࢹ͍ͯ͠Δ

26. 26.

    ೖྗΛؔ஌͢Δͱ LogManagerʹॲཧΛҕৡ

27. 27.

    LogManager.messageWasAdded()

28. 28.

    ͜ͷmessageΛड͚औΔ ΠϯλʔϓϦλʔ͕͍Δ ͦͷ໊΋Interpreter

29. 29.

    Interpreter͔Βઌ͸ C++Ͱॻ͔Εͨ ϒϥ΢βͷωΠςΟϒ࣮૷

30. 30.

    Interpreter͸ UI͔ΒͷೖྗΛ callFrameͱͯ͠଴ͬͯΔ

31. 31.

    callFrame = InterpreterΛ ίʔϧͨ͠ɺJSͷίʔυ΍ ͦͷ࣮ߦ؀ڥͳͲ

32. 32.

    InterpreterͰ͸ɺevalؔ਺͕ callFrameΛड͚औͬͯධՁ JSValueܕͷ஋Λฦ͢

33. 33.

    ͜ͷͱ͖ ࣮ߦ؀ڥͷείʔϓʹ΋ͱ͍ͮͨ LexicalGlobalObjectͳͲ΋ੜ੒ strict modeͰͷ࣮ߦͱ͔΋ ͜ͷ࣌఺Ͱ൑ผͯ͠ॲཧΛม͑Δ

34. 34.

    console.logͱ͍͏ JSͷίʔυΛC++ͷؔ਺ʹ Ϛοϐϯάͯ͠ ࣮ߦ͢Δඞཁ͕͋Δ

35. 35.

    େྔͷϚΫϩ

36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    putDirectNativeFunction- WithoutTransition()

40. 40.

    JSίʔυͷ࣮ߦঢ়ଶΛࣔ͢ ExecStateΛ΋ͱʹ࣮ߦ

41. 41.

    JSC_HOST_CALLͱ͍͏ ϚΫϩ͕͋Δ if CPU(X86) && COMPILER(GCC_OR_CLANG) Έ͍ͨͳίʔυ΋͋ͬͯ ຯΘ͍ਂ͍

42. 42.

    ͔͜͜Βઌ͸ ConsoleObjectΫϥε ͷίʔυΛ௥͍·͢

43. 43.

    ͞Βʹۦ͚଍Ͱ

44. 44.

    consoleProtoFuncLog()

45. 45.

    consoleLogWithLevel()

46. 46.

    logWithLevel()

47. 47.

    messageWithTypeAndLevel()

48. 48.

    WTFLogAlways()

49. 49.

    vprintf_stderr_with_trailing_ newline()

50. 50.

    ʢϝιου໊ͷงғؾ͕ มΘͬͨ…ʁʣ

51. 51.

    vprintf_stderr_common()

52. 52.

    logToStderr()

53. 53.

    fputs()

54. 54.

    …!!!

55. 55.

    ʹ͡Έग़Δ ௿ϨΠϠʔײ

56. 56.

    ͕͜͜࠷ਂ෦͔ʁ

57. 57.

    fputs()ͷ࣮૷͸ WebKitʹͳ͍

58. 58.

    C++ʹ༻ҙ͞Ε͍ͯΔؔ਺

59. 59.

    > ϑΝΠϧϙΠϯλfpʹ จࣈྻstrΛग़ྗͯ͠ ੒ޭ͢Ε͹ෛͰ͸ແ͍஋Λ ΤϥʔͰ͋Ε͹EOF(-1)Λฦ͢

60. 60.

    ͭ·Γ

61. 61.

    fputs()͢Δͱ ϑΝΠϧʢ͔Կ͔ʣ΁ͷ ग़ྗ͸৭Μͳͱ͜ΖΛ ܦ༝ͯ͠Χʔωϧͷ γεςϜίʔϧΛ࣮ߦ͢Δ

62. 62.

    ग़ྗ͞Εͨ಺༰͸ ίʔϧ͞Εͨؔ਺Λ ͔͞ͷ΅ͬͯ஋Λฦ͢

63. 63.

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

    None
67. 67.

    None
68. 68.

    Θ͔ͬͨ͜ͱ

69. 69.

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

70. 70.

    [native code] ා͘ͳ͍

71. 71.

    None
72. 72.

    None
73. 73.

    ͓·͚ ʢ࣌ؒ͋ͬͨΒʣ

74. 74.

    WebKitͷ δϫδϫ͘Δͱ͜Ζ

75. 75.

    1. UIͷ෦෼͕es6Ͱ ॻ͔Ε͍ͯΔ

76. 76.

    = 1ͭͷϦϙδτϦʹ es6ࣗମͷ࣮૷ͱ es6ͷίʔυͱ es6ͷlintϑΝΠϧ͕͋Δ

77. 77.

    2. UIͷ෦෼ͷjsίʔυ͕ ͚ͬ͜͏console.assertΛ ࢖͍ͬͯΔ

78. 78.

    = ΫϥΠΞϯτͰى͖Δࣄ ͸৴༻Ͱ͖ͳ͍͠ ҉໧తͳܕม׵΋ා͍͠ = ͦ͏ͩconsoleʹ ศརͳؔ਺͋Δ͔Β ࢖ͬͪΌ͓͏ͥ

79. 79.

    3. rubyͱ͔pythonͷ εΫϦϓτ͕ͨ·ʹ͍Δ

80. 80.

    = ։ൃऀ͕༻ҙͨ͠ Ϗϧυ΍σόοά༻ͷ εΫϦϓτͳͲ = ͨͿΜ։ൃऀͷ޷ΈʹΑͬͯ rubyͱ͔pythonͰॻ͔Ε͍ͯΔ

81. 81.

    ͓͠·͍