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
110
バニラ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
1.9k
Linuxコマンド解説まんがのつくりかた
piroor
2
5.7k
Featured
See All Featured
Being A Developer After 40
akosma
68
580k
Mobile First: as difficult as doing things right
swwweet
218
8.7k
Making the Leap to Tech Lead
cromwellryan
126
8.7k
In The Pink: A Labor of Love
frogandcode
139
22k
Testing 201, or: Great Expectations
jmmastey
32
6.8k
The Cost Of JavaScript in 2023
addyosmani
27
4.2k
KATA
mclloyd
18
12k
Debugging Ruby Performance
tmm1
70
11k
Done Done
chrislema
178
15k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
128
32k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
324
21k
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の必要性は皆無 (オチ)