バニラJS開発ライブラリー事情

YUKI Hiroshi

2024-05-24

バニラ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など
バニラ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の必要性は皆無
（オチ）
バニラJS開発ライブラリー事情
Powered by Rabbit 3.0.3

Description

Nextbeat Tech Bar：第一回ライブラリ開発について考える会での発表資料です。

Text

Page: 1

バニラJS開発
ライブラリー事情
結城洋志 aka Piro
github.com/piroor
x.com/piro_or
株式会社クリアコード
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 2

活動1：シェルコマンド解説
漫画
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 3

活動2：Firefoxアドオン
Tree Style Tabなど
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 4

Firefox
アドオンを
バニラJSで

Page: 5

なんでバニラJS？
昔のFirefoxアドオンは
「動的なパッチ」だった
✓ Firefox本体のスクリプトの
名前空間に変数や関数を注入
✓ 静的解析しにくい
✓ 下手にライブラリーを使うと
名前空間汚染でFirefoxが壊れる
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 6

なぜライブラリー自作？(1)
✓ 値の型を自動判別して
nsIPrefBranchの適切な
メソッドを呼んで……
✓ nsITimerのインスタンス作って
nsIObserverとして自身を登録し
指定秒数でコールバックを……
ニッチすぎて既存の物が無い
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 7

なぜ自作？(2-1)
例：メニューUI
✓ キーボードで操作できない
（jQueryUI）
✓ キーボード操作の動作が怪しい
（React MUI）
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 8

なぜ自作？(2-2)
✓ 欲しいのはただ「OSのUIと同じ
振る舞いの階層メニューUI」
✓ キーボード操作、階層表示、
アクセスキー……
✓ XULでは<menu>と書くだけで
できていたのに……
✓ Mozillaの頑張りで目が肥えて
市井のライブラリーでは
満足できない体に
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 9

それでライブラリー自作
✓ わりと小規模
✓ webextensions-lib-configs：619行
✓ webextensions-lib-menu-ui：994行
✓ 実装は1ファイル完結が多い
✓ 他のライブラリーに非依存
✓ Firefox専用だからpolyfillも不要
✓ パッケージマネージャーいる？
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 10

ていうか……
採用しても早死にされそうで不安
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 11

そんなライブラリーの使い方
✓ Gitのサブモジュール
git submodule add <URL> submodules/<name>
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3

Page: 12

ビルド・パッケージング時
✓ 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

Page: 13

ライブラリーのロード
✓ <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

Page: 14

どうする
のが正解
なんです
か？

Page: 15

ちなみに、今の
Firefoxアドオン開発
✓ Chromiumと同様のモデル
（WebExtensions）
✓ 名前空間が完全に分離された
✓ ライブラリも安全に読み込める
✓ みんなTypeScriptで書いてる
今さらバニラJSの必要性は皆無
（オチ）
バニラJS開発 ライブラリー事情
Powered by Rabbit 3.0.3