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
バニラJS開発ライブラリー事情
Search
YUKI "Piro" Hiroshi
May 24, 2024
0
200
バニラJS開発ライブラリー事情
[Nextbeat Tech Bar:第一回ライブラリ開発について考える会](
https://nextbeat.connpass.com/event/312789/)での発表資料です
。
YUKI "Piro" Hiroshi
May 24, 2024
Tweet
Share
More Decks by YUKI "Piro" Hiroshi
See All by YUKI "Piro" Hiroshi
既存のコードを変更する時の心得 ~ どこを見ればいいかの勘所 ~
piroor
1
2.1k
Linuxコマンド解説まんがのつくりかた
piroor
2
6k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
A better future with KSS
kneath
238
17k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Practical Orchestrator
shlominoach
189
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Adaptive Systems
keathley
43
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 バニラJS開発 ライブラリー事情 結城洋志 aka
Piro github.com/piroor x.com/piro_or 株式会社クリアコード
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 活動1:シェルコマンド解説 漫画
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 活動2:Firefoxアドオン Tree Style Tabなど
Firefox アドオンを バニラJSで
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 なんでバニラJS? 昔のFirefoxアドオンは 「動的なパッチ」だった Firefox本体のスクリプトの
名前空間に変数や関数を注入 ✓ 静的解析しにくい ✓ 下手にライブラリーを使うと 名前空間汚染でFirefoxが壊れる ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 なぜライブラリー自作?(1) 値の型を自動判別して nsIPrefBranchの適切な メソッドを呼んで……
✓ nsITimerのインスタンス作って nsIObserverとして自身を登録し 指定秒数でコールバックを…… ✓ ニッチすぎて既存の物が無い
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 なぜ自作?(2-1) 例:メニューUI キーボードで操作できない (jQueryUI)
✓ キーボード操作の動作が怪しい (React MUI) ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 なぜ自作?(2-2) 欲しいのはただ「OSのUIと同じ 振る舞いの階層メニューUI」 キーボード操作、階層表示、
アクセスキー…… ✓ XULでは<menu>と書くだけで できていたのに…… ✓ ✓ Mozillaの頑張りで目が肥えて 市井のライブラリーでは 満足できない体に ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 それでライブラリー自作 わりと小規模 webextensions-lib-configs:619行 ✓
webextensions-lib-menu-ui:994行 ✓ ✓ 実装は1ファイル完結が多い 他のライブラリーに非依存 ✓ Firefox専用だからpolyfillも不要 ✓ ✓ パッケージマネージャーいる? ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 ていうか…… 採用しても早死にされそうで不安
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 そんなライブラリーの使い方 Gitのサブモジュール git submodule
add <URL> submodules/<name> ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 ビルド・パッケージング時 Makefileのmake rule中で ファイルをコピーするだけ
xpi: cp submodules/webextensions-lib-configs/Configs.js extlib/ zip -r -9 treestyletab.xpi manifest.json ... extlib ✓ コピー後のファイルは .gitignore、.eslintignoreで 除外 ✓
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 ライブラリーのロード <script src="..."> で
同じ名前空間にロード ✓ または、ES Modulesのimport ✓ コピー後に小加工して両対応 xpi: cp submodules/webextensions-lib-configs/Configs.js extlib/ echo 'export default Configs;' >> extlib/Configs.js ... ✓
どうする のが正解 なんです か?
バニラJS開発 ライブラリー事情 Powered by Rabbit 3.0.3 ちなみに、今の Firefoxアドオン開発 Chromiumと同様のモデル (WebExtensions)
名前空間が完全に分離された ✓ ライブラリも安全に読み込める ✓ みんなTypeScriptで書いてる ✓ ✓ 今さらバニラJSの必要性は皆無 (オチ)