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
500
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
69
Cool Math for Hot Music 輪読会 Sec.19 Part 2
hashedhyphen
0
67
Cool Math for Hot Music 輪読会 Sec.19
hashedhyphen
0
44
Cool Math for Hot Music 輪読会 Sec.16 Part 2
hashedhyphen
0
95
Cool Math for Hot Music 輪読会 Sec.16 Part 1
hashedhyphen
0
170
Cool Math for Hot Music 輪読会 Sec.5
hashedhyphen
0
65
『プロフェッショナル SSL/TLS 読書会』 第 10 章
hashedhyphen
1
410
クラウド型電子カルテシステムと Microservices への歩み
hashedhyphen
3
1.2k
『プロフェッショナル SSL/TLS 読書会』 第 6 章
hashedhyphen
0
560
Other Decks in Technology
See All in Technology
Databricksで完全履修!オールインワンレイクハウスは実在した!
akuwano
0
140
Part2 GitHub Copilotってなんだろう
tomokusaba
0
250
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
quiver
0
300
AI 코딩 에이전트 더 똑똑하게 쓰기
nacyot
0
490
AWSを利用する上で知っておきたい名前解決のはなし_彩の国埼玉支部#1
nagisa53
2
230
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
akitok_
1
270
C++26アップデート 2025-03
faithandbrave
0
1.2k
Winning at PHP in Production in 2025
beberlei
1
270
OPENLOGI Company Profile
hr01
0
63k
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
190
Gateway H2 モジュールで スマートホーム入門
minoruinachi
0
130
Dataverseの検索列について
miyakemito
1
170
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Writing Fast Ruby
sferik
628
61k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
690
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
BBQ
matthewcrist
88
9.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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 ʹΛ͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠