Nihonbashi.js #2
from Node to BrowserContribute to Web @Nihonbashi.js #2
View Slide
Hello!const self = {name: 'Hash (@hashedhyphen)',lang: ['JS', 'Rust', 'Ruby', 'Scala']};
“Contribute to Web”1. Localization
1. Localization❖ JavaScript ͱग़ձͬͨͷ 2 લ❖ ᷿ͷຊޠใ HTML ͱͷؔ࿈͔Γ❖ গ͠ϚΠφʔʹͳΔͱӳޠυΩϡϝϯτ͚ͩ❖ ͦΕ΄Ͳӳޠ͕ಘҙͰͳ͔ͬͨͷͰͭΒ͍
“༁͠Α͏ʂ”
1. Localization❖ ຊޠใ͕ͳ͚ΕࣗͰ࡞Ε͍͍❖ MDN wiki ͳͷͰࣗ༝ʹຊޠهࣄΛ࡞ΕΔ❖ ͪΖΜٕज़໘ͰษڧʹͳΔ❖ ༁ = ਫ਼ಡ͢Δ͏ͪʹ࣍ୈʹӳޠ͕ා͘ͳ͘ͳΔ
1. Localization❖ MDN (Browser JS API, Security, CSS)❖ Mozilla Security Blog ຊޠ൛❖ webappsec-specjp
“Contribute to Web”2. Filing Issues - Node
2. Filing Issues - NodeಥવͰ͕͢͜͜ͰΫΠζͰ࣍͢ͷίʔυͷ࣮ߦ݁ՌԿͰ͠ΐ͏͔ʁʢ࣮ߦڥɿNode v8.3.0ʣ
// quiz1.jsclass Base {}class Derived extends Base {hi() {console.log("hi");}}const d = new Derived();d.hi();
$ node quiz1.jshi
// quiz2.jsclass Derived extends Buffer {constructor(n) {super(n);}hi() {console.log("hi");}}const d = new Derived(8);d.hi();
$ node quiz2.js/Users/hh/quiz2.js:14d.hi();^TypeError: d.hi is not a function
2. Filing Issues - Node❖ ͜Ε͕͢͞ʹόάͰ…❖ GitHub Ͱ Issue ใࠂ❖ Node ͷ Nightly build Ͱ࠶ݱ͢Δ͜ͱΛ֬ೝ❖ Issue ͷӳจߦΛॻ͘ͷʹ 30 ͙Β͍Μͩ❖ ಡΉͷͱॻ͘ͷͱ·ͨผ…
2. Filing Issues - Node❖ 1:44 ʹ Issue ใࠂ❖ 2:50 ʹ࠷ॳͷฦ৴ + Self assigned❖ 3:12 ʹमਖ਼Ҋͷύον͕ϦϯΫ͞ΕΔʢ͍ʂʣ
2. Filing Issues - Node❖ ࣌ظతʹ Node v5 ͔Β v6 ͷసظ❖ new Buffer ΛΊͯ Buffer.from ʹ͢ΔͳͲ❖ ͜ͷमਖ਼͕ master ʹೖΔ͜ͱͳ͔͕ͬͨɺBuffer Λ extends ͢Δ͜ͱكʁ
“Contribute to Web”3. Filing Issues- Browser
3. Filing Issues - Browser❖ ͋Δ TweetDeck Λ Firefox Ͱ͍ͬͯͨΒ❖ ຊޠೖྗͰࢠԻͱԻ͕࿈݁͞Εͳ͍ʂ
3. Filing Issues - Browser❖ ະ֬ఆจࣈ͕ textarea.value ͳͲʹೖͬͨ߹ͷಈ࡞ WHATWG Ͱະఆٛtextarea.addEventListener("input", _evt => {textarea.value = textarea.value;});࣮ࡍʹͱͳ͍ͬͯͨͱਪଌ͞ΕΔٖࣅίʔυfront side ϏϧυϓϩηεͷෳࡶԽʹΑͬͯฆΕࠐΜ͔ͩʁ
3. Filing Issues - Browser❖ TweetDeck νʔϜଆͷςετෆ͕ݪҼ❖ ৄࡉɿͣͬ͘هɿ TweetDeckͰFirefox͔Βຊޠ͕ೖྗͰ͖ͳ͘ͳ͍ͬͯΔ݅❖ Gecko ͱ Twitter ͷ։ൃऀ͕ΓऔΓ͢Δڳͳల։
3. Filing Issues - Browser❖ ཤྺॻΛ HTML + CSS Ͱ࡞͍ͬͯͨͱ͖ͷ͜ͱ❖ ͱ Flexbox ͕ೖΕࢠʹͳͬͨϖʔδΛChrome Ͱදࣔ͢ΔͱҐஔ͕͓͔͘͠ͳΔ❖ Issue 579601: li::marker with flexbox is placed on aslipped position❖ ·ͩະमਖ਼
͜͜·ͰΛৼΓฦͬͯ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯτ͡Όͳ͔ͬͨͷʁ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑
͜͜·ͰΛৼΓฦͬͯ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯτ͡Όͳ͔ͬͨͷʁ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑❖ ͔͜͜Β͕ຊͰ͢
“Browser ͷ JS API ʹܞΘͬͨ”
“Contribute to Web”4. Browser Inside
4. Browser Inside❖ Gecko inside #7ɿύονΛ࡞Ζ͏ϋϯζΦϯ❖ Gecko (Firefox) ͷίϛολʔͱҰॹʹύονΛ ࡞ΔϋϯζΦϯ❖ Web Animations API ʹ͓͍ͯΞχϝʔγϣϯͷҠಈํΛ੍ޚ͢Δ࣮ͷ͓ख͍❖ ͪΖΜ Bugzilla ͰӳޠͰίϛϡχέʔγϣϯ
࣮ࡍʹॻ͍ͨ C++ ίʔυʢ7 ߦʣͪΖΜطʹ͓હཱ͍͍͍ͯͯͨͩͯͨ͠
࣮ࡍʹॻ͍ͨ JS ͷςετίʔυʢ56 ߦʣ
4. Browser Inside❖ Browser ͓ͦΒ͘ੈքͰҰ൪ڊେͳ C++ ͷ OSS ϓϩδΣΫτͳͷͰʁʢݸਓͷҙݟʣ❖ ੈքதͷਓ͕͍ͬͯΔͷʹࣗͷίʔυ͕ ΘΕ͍ͯΔͬͯͪΐͬͱخ͍͠
4. Browser Inside❖ ΠϕϯτޙԿݸ͔νέοτΛΞαΠϯ͍͍ͯͨͩͨ͠Γ❖ JS ͷςετίʔυΛϦϑΝΫλϦϯάͨ͠Γ❖ ͏গ͍͠͠ C++ ͷίʔυΛॻ͍ͨΓ❖ e.g. Ξχϝʔγϣϯؔ࿈ͷ devtools ͷόάमਖ਼
4. Browser Inside❖ Firefox DevTools ͷόάमਖ਼❖ DevTools HTML (XML) + CSS + JS❖ ࣮ Firefox DevTools ʹ React ͕࠾༻͞Ε͍ͯΔ
“Contribute to Web”Wrap up
Wrap up❖ ͬͺΓ OSS ָ͍͠ʂ❖ web ք۾Ͱͷ “OSS” ͱ͍͏ͱࣄͰ͍ͬͯΔϥΠϒϥϦɾݴޠʹറΒΕ͕ͪ❖ web dev ͳΒ Browser ʹΛ͚͍͖͍ͯͨ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠