
2026/08/03 17:29
bonsai:Janestreet の UI ライブラリ
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Bonsai は OCaml で記述された高性能なリアクティブな Web UI ライブラリであり、開発者が状態とレンダリングプリミティブを「a la carte」で合成して複雑なアプリケーションを構築することを可能にします。Elm を模倣し、コンポーネントを純粋な関数的状態機械として扱うことで、必要に応じてのみインターフェースを更新し、最大効率を実現する設計を採用しています。最も顕著な利点は、フロントエンドとバックエンドのコード間で型を共有できる点であり、これはエラーを大幅に削減するとともに、既存のターミナル上のビジネスロジックを Web インターフェースへの移行を簡素化します。Bonsai は Jane Street 内で企業ディレクトリやトレーディングモニタなどの多様なツールで内部で使用されており、ターミナルベースアプリケーション(
Bonsai_term)およびプロトタイプ VR 版(Bonsai_vr)もサポートする成長中のエコシステムの一部です。この統合されたアーキテクチャにより、組織はプラットフォーム横断で一貫性のあるコードベースを維持しながら、自動化された全アプリテストや高度な DOM 操作ツールといった先進的な機能を活用できます。これらのテスト機能により、Web ブラウザを実行せずに現実に近いユーザーインタラクションを検証することが可能になります。さらに、Bonsai は同じ型を使用することで既存のターミナル UI ビジネスロジックを Web への移植をサポートし、ppx_html(JSX に類似)および ppx_css を通じて HTML と CSS の記述のための強力なテンプレート言語サポートを提供します。
Text to translate:
Bonsai is a high-performance, reactive web UI library written in OCaml that enables developers to construct complex applications by composing state and rendering primitives
a la carte, separating state management from rendering logic. Drawing inspiration from Elm, it treats components as purely functional state machines, ensuring the interface updates incrementally only when necessary for maximum efficiency. The most significant advantage lies in its ability to share types between frontend and backend code, which drastically reduces errors and simplifies migrating existing terminal business logic directly to web interfaces. Internally used by Jane Street for diverse tools like corporate directories and trading monitors, Bonsai is part of a growing ecosystem that also supports terminal-based applications (Bonsai_term) and a prototype virtual reality version (Bonsai_vr). This unified architecture allows organizations to maintain consistent codebases across platforms while leveraging advanced features such as automated whole-app testing and specialized DOM manipulation tools. These testing capabilities empower teams to verify realistic user interactions without even launching a web browser. Additionally, Bonsai supports porting existing terminal UI business logic to the web by using the same types and includes powerful templating language support via ppx_html (similar to JSX) and ppx_css for writing HTML and CSS.本文
邦ザイ(Bonsai)とは?
**邦ザイ(Bonsai)**は、OCaml を用いて高性能でリアクティブな Web アプリケーションを構築するための UI ライブラリです。
特徴と背景
- 設計の影響: Elm の影響を受けつつも独自の進化を遂げている。
- 社内採用状況: ジャーン・ストリート社内のほぼすべての Web アプリケーションで採用されている。
- 社内ディレクトリーシステム
- 取引システムの監視・操作ツールなど、幅広い用途に対応する。
- 基本動作:
- コンポーネントは不変的な関数的な状態機械として実装される。
- **インクリメンタリズム(漸進的更新)**により、値の変化がない部分の再計算を抑制し、パフォーマンスを最適化する。
なぜ邦ザイなのか?
柔軟なアーキテクチャ
- 他のフレームワークが状態管理やレンダリングをコンポーネントに束ねがちなのに対し、邦ザイは基礎機能を**「必要な分だけ組み合わせる(à la carte)」**形で提供している。
- React のように全画面再描画を防ぎつつ、複雑なビジネスロジックへの部分的更新も可能にする仕組みを持つ。
明示的な状態管理
- 状態はコンポーネントと独立して扱われるため、ライフサイクルやスコーピングに関する API が豊富。
- 例: タブインターフェース内で複数の状態を持つコンポーネントを組み込みたい場合、自動的に対応するため手動での状態持ち上げ不要。
OCaml の利点
- 共通言語と型システム: バックエンドとフロントエンドで同じ言語・型を活用可能。
- コードベースの管理容易性と可読性の向上。
- 型の活用によりミスを大幅に減らす。
- 既存資産の再利用: ターミナル UI で構築されたシステムやビジネスロジックを Web 向けに移行しやすくする。
追加機能
- 強力なテンプレート言語(HTML/JSX 風)。
- コンポーネント固有のスタイルシートサポート。
- アプリ全体を自動的にテストする仕組み。
テスト能力:表現豊かな UI 検証
邦ザイは、プログラム的に UI を操作し DOM の変化を監視しながら、現実的なテストを書ける点が強力です。ブラウザを開かずにコンポーネント全体の挙動を確認可能です。
テスト例:ユーザー入力によるメッセージ更新
以下のコードは、テキストボックスへの入力内容を「こんにちは」に追加する挙動を検証します。
let%expect_test "shows hello to a specified user" = let handle = Handle.create (Result_spec.vdom Fn.id) hello_textbox in Handle.show handle; [%expect {| <div> <input oninput> </input> <span> hello </span> </div |}]; Handle.input_text handle ~get_vdom:Fn.id ~selector:"input" ~text:"Bob"; Handle.show_diff handle; [%expect {| <div> <input oninput> </input> - <span> hello </span> + <span> hello Bob </span> </div |}];
テストの特徴:
- 多段階のアサーション:
ブロックを複数使用し、セットアップとヘルパーコードをスコープ内に収める。expect - 差分表示: 変更点のみを強調して表示(例:
,- hello
)。+ hello Bob - 詳細な可視化: HTML 属性やクラス名の变化も検出可能。
- 完全なシミュレーション: サーバー呼び出しのモックを含め、状態そのものの変化も検証できる。
ドキュメントと学習リソース
邦ザイの実践的な学習には以下の資料が最適です:
入門資料
- 「Bonasi 入門(Bonsai Quick Start)」: 実際に触りながら学べるガイド。
- 「邦ザイでの思考法(Thinking in Bonsai)」: フレームワーク特有の考え方を学ぶ。
- API ドキュメント:
ファイルを参照。cont.mli
その他の情報源
- ハウツー記事シリーズ: トピックス別にまとまった実践的な解説。
- 歴史紹介シリーズ: 邦ザイの発展過程を短編形式で紹介。
- Podcast「シグナルズ&スレッド(Signals & Threads)」:
- UI フレームワーク構築に関するエピソード。
- トレーダー向けツールの構築における邦ザイの利点について論じられている。
- 例示ウェブサイトライブラリ: 実際の利用事例を閲覧可能。
ライブラリのエコシステム
「邦ザイ」自体は、より汎用的な漸進的かつ結合可能な状態機械の構築を可能にするコアライブラリであり、その上で様々な UI やツールが実装されています。
ライブララインアップ
| カテゴリ | ライブラリ名 | 概要 |
|---|---|---|
| 汎用ライブラリ | | 状態機械構築の基礎。 例示、コンポーネント、テスト、ベンチマークを提供。 |
| Web UI | | ブラウザベースのインタラクティブ UI 構築。 例示、コンポーネント、テストに対応。 |
| ターミナル UI | | ターミナルベースのインタラクティブ UI 構築。 例示、コンポーネント、テストに対応。 |
| VR UI (プロトタイプ) | | リアクティブな仮想現実(VR)UI の構築用(エイプリルフールネタ)。 |
必須プリプロセッサ
Web アプリケーションでよく利用されるツール:
: JSX に似た HTML を記述するためのプリプロセッサ。ppx_html
: CSS を記述するためのプリプロセッサ。ppx_css