つくったもの
何を解決したいのか
jQuery保守が続く現場、WordPress等でモダンFWを入れる機会がない環境、「jQueryならわかる」人たちに向けて作成しました。これは過去の自分がjQueryからVueへの移行をとん挫した経験がもとになっています。モダンフレームワークへの移行は『全部を一度に置き換える』と大工事になりがちで、そこで手が止まります、また会社にとってメリットが見えにくく、工数の確保も難しいという問題もあります。
bridgeyは、その移行を緩やかな傾斜にするための薄いヘルパーです。今の手の動かし方（$）をほぼ残したまま、状態管理とレンダリングだけをモダンエンジンに委ねます。
bridgey.jsの機能
bridgey が提供する機能は大きく分けるとたった2つです。
-
$$jQueryの書き味の命令的グルー。イベント登録・クラス操作・テキスト操作など、既存の手がそのまま動く入口です。 -
state/computed/mount… リアクティブな状態とコンポーネントのライフサイクル。これらは下のエンジン（Svelteなど）に委譲します。
逆に、提供しないものもはっきり決めています。ルーティング、スコープ付きCSS、独自のコンポーネント境界——これらは下のフレームワークの仕事であり、bridgey は肩代わりしません。薄いヘルパーに留めることこそが、この設計の肝だと考えています。
使い方
利用者が触るAPIは3つだけです。
// main.js
import { $$, state, mount } from "bridgey";
import App from "./App.svelte";
const app = mount(App, { target: "#app", props: { name: "bridgey" } });
// 命令的な構文はjQueryの書き味のまま
$$("#reset").on("click", () => app.set({ name: "world" }));
$$("#destroy").on("click", () => app.destroy()); // 購読もDOMもエンジンが片付ける
構造・制御構文・DOM更新は本物のSvelteが担当します。
<!-- App.svelte -->
<script>
export let name = "world";
let count = 0;
$: doubled = count * 2;
</script>
<button on:click={() => count++}>＋</button>
<span class:big={count >= 10}>{count}</span> / 2倍 {doubled}
{#if count > 10}<p>10超え</p>{/if}
学習コストは「jQuery＋α」。.svelte側は本物のSvelteそのものなので、ここで書いた知識はそのまま次のステップに引き継げます。
2つの入り方
① npm（本格運用）
npm install bridgey
② <script> で読み込む（CDN）
CDN版（裏側はVue.js）ならレガシー環境やWordPress環境でも使えます。
<script src="https://cdn.jsdelivr.net/npm/bridgey/dist/bridgey.vue.js"></script>
<script>
const App = { data: () => ({ n: 0 }), template: `<button @click="n++">{{ n }}</button>` };
mount(App, { target: "#app" }); // $$ / state / mount は window に
</script>
本番では bridgey@1 のようにメジャー固定推奨。
設計はエンジン差し替え式（現状）
bridgeyの本体は「レジストリ＋委譲」だけで、実処理は差し替え可能なエンジンに投げます。
利用者コード（$$ / state / mount） ← ここは常に不変
│
src/engine.js（ useEngine ）
│
┌───────────┴──────────┐
■svelteEngine ■ vueEngine
・state=writable ・state=ref/reactive
・computed=derived ・computed=computed
・mount=new Component ・mount=createApp
state / computed / mount は現在のエンジンへ委譲するので、利用者コードはSvelteでもVueでも変わりません。
あえて「提供しないもの」
ライブラリを薄い層に留めるため、以下の機能は持ちません。
- ルーティング / スコープCSS / 独自コンポーネント境界 → 下のフレームワーク（Svelte/Vue）の仕事
- jQueryとの共存機構を機能としては売らない（実装者の工夫で実現可能な為）
共存については「不可能」ではありません。Svelteはmountしたサブツリーだけを管理し外には触れないので、「カルーセル＝jQueryの領域 / フォーム＝Svelteの領域」とノードを分ければ共存できます（自己責任です）。
禁止するのは「同一ノードを両者に相乗りさせる」事だけです。
おわりに
最初に書いた通り、私自身がjQueryからVueの移行でとん挫した経験から作りました。
同じ場所で足を止めている人が、最初の一歩を踏み出す足場になれば幸いです。
フィードバック・Issue・「ここが分かりにくい」歓迎です。
GitHub: https://github.com/ysk/bridgeway-js