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
68
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
AI-in-the-Enterprise|OpenAIが公開した「AI導入7つの教訓」——ChatGPTで変わる企業の未来とは?
customercloud
PRO
0
150
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
2
550
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
290
DjangoCon Europe 2025 Keynote - Django for Data Science
wsvincent
0
510
大規模サーバーレスプロジェクトのリアルな零れ話
maimyyym
3
160
Part1 GitHubってなんだろう?その2
tomokusaba
2
560
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
1
240
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
150
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
fukubaka0825
9
2.4k
Previewでもここまで追える! Azure AI Foundryで始めるLLMトレース
tomodo_ysys
2
470
3D生成AIのための画像生成
kosukeito
2
610
C++26アップデート 2025-03
faithandbrave
0
1.2k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
85
4.7k
Why Our Code Smells
bkeepers
PRO
336
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Code Review Best Practice
trishagee
67
18k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
344
40k
Fireside Chat
paigeccino
37
3.4k
Writing Fast Ruby
sferik
628
61k
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 ʹΛ͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠