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