Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Contribute to Web
Search
Ryo Sakuma
August 10, 2017
Technology
0
510
Contribute to Web
Nihonbashi.js #2
Ryo Sakuma
August 10, 2017
Tweet
Share
More Decks by Ryo Sakuma
See All by Ryo Sakuma
Cool Math for Hot Music 輪読会 Sec.22
hashedhyphen
0
70
Cool Math for Hot Music 輪読会 Sec.19 Part 2
hashedhyphen
0
76
Cool Math for Hot Music 輪読会 Sec.19
hashedhyphen
0
45
Cool Math for Hot Music 輪読会 Sec.16 Part 2
hashedhyphen
0
98
Cool Math for Hot Music 輪読会 Sec.16 Part 1
hashedhyphen
0
180
Cool Math for Hot Music 輪読会 Sec.5
hashedhyphen
0
66
『プロフェッショナル SSL/TLS 読書会』 第 10 章
hashedhyphen
1
430
クラウド型電子カルテシステムと Microservices への歩み
hashedhyphen
3
1.2k
『プロフェッショナル SSL/TLS 読書会』 第 6 章
hashedhyphen
0
580
Other Decks in Technology
See All in Technology
ユーザー理解の爆速化とPdMの価値
kakehashi
PRO
1
110
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
100
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
300
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
2
3.1k
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
290
生成AIによる情報システムへのインパクト
taka_aki
1
210
robocopy の怖い話/scary-story-about-robocopy
emiki
0
420
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
1
130
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
570
Wasmで社内ツールを作って配布しよう
askua
0
160
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
220
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Adaptive Systems
keathley
43
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Bash Introduction
62gerente
613
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Modern Web Designer's Workflow
chriscoyier
695
190k
GraphQLとの向き合い方2022年版
quramy
49
14k
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
from Node to Browser Contribute to Web @Nihonbashi.js #2
Hello! const self = { name: 'Hash (@hashedhyphen)', lang: ['JS',
'Rust', 'Ruby', 'Scala'] };
“Contribute to Web” 1. Localization
1. Localization ❖ JavaScript ͱग़ձͬͨͷ 2 લ ❖ ᷿ͷຊޠใ HTML
ͱͷؔ࿈͔Γ ❖ গ͠ϚΠφʔʹͳΔͱӳޠυΩϡϝϯτ͚ͩ ❖ ͦΕ΄Ͳӳޠ͕ಘҙͰͳ͔ͬͨͷͰͭΒ͍
None
“༁͠Α͏ʂ”
1. Localization ❖ ຊޠใ͕ͳ͚ΕࣗͰ࡞Ε͍͍ ❖ MDN wiki ͳͷͰࣗ༝ʹຊޠهࣄΛ࡞ΕΔ ❖
ͪΖΜٕज़໘ͰษڧʹͳΔ ❖ ༁ = ਫ਼ಡ͢Δ͏ͪʹ࣍ୈʹӳޠ͕ා͘ͳ͘ͳΔ
None
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.js class Base {} class Derived extends Base {
hi() { console.log("hi"); } } const d = new Derived(); d.hi();
$ node quiz1.js hi
// quiz2.js class 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:14 d.hi(); ^ TypeError: d.hi is not
a function
2. Filing Issues - Node ❖ ͜Ε͕͢͞ʹόάͰ… ❖ GitHub Ͱ
Issue ใࠂ ❖ Node ͷ Nightly build Ͱ࠶ݱ͢Δ͜ͱΛ֬ೝ ❖ Issue ͷӳจߦΛॻ͘ͷʹ 30 ͙Β͍Μͩ ❖ ಡΉͷͱॻ͘ͷͱ·ͨผ…
None
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
Ͱ͍ͬͯͨΒ ❖ ຊޠೖྗͰࢠԻͱԻ͕࿈݁͞Εͳ͍ʂ
None
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
Ͱ࡞͍ͬͯͨͱ͖ͷ͜ͱ ❖ <li> ͱ Flexbox ͕ೖΕࢠʹͳͬͨϖʔδΛ Chrome Ͱදࣔ͢ΔͱҐஔ͕͓͔͘͠ͳΔ ❖ Issue 579601: li::marker with flexbox is placed on a slipped position ❖ ·ͩະमਖ਼
None
͜͜·ͰΛৼΓฦͬͯ ❖ 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 ͕࠾༻͞Ε͍ͯΔ
None
“Contribute to Web” Wrap up
Wrap up ❖ ͬͺΓ OSS ָ͍͠ʂ ❖ web ք۾Ͱͷ “OSS”
ͱ͍͏ͱࣄͰ͍ͬͯΔ ϥΠϒϥϦɾݴޠʹറΒΕ͕ͪ ❖ web dev ͳΒ Browser ʹΛ͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠