長年 Rubyist に親しまれてきた Rubular の使い心地を引き継ぎつつ、現代の Ruby / Rails / Wasm を使って作り直した正規表現エディタ Rubree を公開しました。
Rubular は非常に便利なツールですが、技術的には次のような課題がありました。
- 動作環境が Ruby 2.5.9 と少し古く、速度や保守の面で制約がある
- OSS ではなく、拡張や内部仕様の調査が難しい
- マッチングがサーバー依存で、入力のたびにバックエンド処理が必要
- Regexper のような鉄道図による正規表現の視覚化ができない
- 置換処理のプレビューができない
そこで Rubree では、Ruby × Rails × Wasm を使って UI と内部処理を再設計し、ブラウザで軽快に使える現代的な正規表現エディタを目指しました。
🔍 Rubree でできること
■ ブラウザ内での正規表現評価（Wasm）
評価処理はすべて Wasm 化した Ruby がブラウザ内で実行します。
ネットワーク待ちがなく、画面の反応も素直な印象になっています。
■ 正規表現の構造可視化（鉄道図）
regexp_parser で正規表現を構文解析し、
railroad_diagrams で鉄道図（SVG）として描画しています。
「この正規表現、何がどうつながっていたんだっけ？」という時の見通し改善に役立ちます。
■ 置換結果の確認
置換処理もブラウザ上で実行し、その結果を即座にプレビューできます。
■ Ruby コードスニペット生成
入力した正規表現から、Ruby のコードをそのまま生成できます。
■ 共有用 URL の生成
画面右上の共有アイコンから、現在の入力内容を Base64 化して URL に含められます。
チャットなどで共有すれば、相手側で同じ状態が再現されます。
🔧 使い方
初回起動
- https://aim2bpg.github.io/rubree/ にアクセス
- 「Get started」 をクリック
- Wasm の読み込みにより、10 秒ほど 時間がかかります
2 回目以降
- ブラウザ側のキャッシュ状況により、まれに数秒ほど読み込みが入る場合があります。Wasm の特性というよりブラウザの挙動によるものですので、ご理解いただければ幸いです
基本的な流れ
- 正規表現を入力
- テキストを入力
- マッチ結果・置換結果・構造図を確認
例文を試す
- Try this example：サンプルを自動入力
- サイコロアイコン：ランダムな例文を表示
- Regex Examples：例文一覧から選択
鉄道図の拡大・共有
- 虫眼鏡アイコン：拡大表示
- クリップアイコン：SVG を画像としてコピー
🧱 技術スタック
Rubree は Ruby 3.3 + Rails 8.0 をベースにしつつ、
Wasmify Rails を活用してブラウザで動作可能な形に移植しています。
対応していないバージョンについて
-
Ruby 3.4：Wasm 版 Ruby に
bigdecimalの課題があるため -
Rails 8.1：
jsongem のネイティブ拡張が Wasm 上でビルド非対応のため
通常のサーバーアプリとして動かす方法であれば回避できます。
⚙️ Backend
- Ruby 3.3
- Rails 8.0
- Regexp::Parser
🎨 Frontend
- Hotwire
- TailwindCSS
- RailroadDiagrams
🛠 Development
- Foreman
- Lefthook
🧹 Lint / Testing
- Rubocop / ERB Lint / Biome
- RSpec
- Playwright
- Octocov
🚀 Build / Deployment
- Wasmify Rails
- GitHub Pages
🤖 Shift-left Security
- Dependabot
- Gitleaks
- Brakeman
▶️ CI/CD
- GitHub Actions
🧩 技術的な背景
- 2022 年、フィヨルドブートキャンプの卒業制作として着手
- 「Rubular の OSS 版がほしい」という声がきっかけ
- RubyKaigi 2025 の LT などを通じて、
regexp_parserとrailroad_diagramsの組み合わせに方向性が定まり、開発を再開 - AST 解析 → SVG 化 → Wasm で実行という流れを確立
- Rails アプリをそのまま Wasm 化する構成でブラウザ動作を実現
🚀 最後に
Rubree は、
Rubyist だけでなく、従来から Rubular を使ってきた方や、これから正規表現を学ぶ方にも便利に使っていただけるワンストップ型ツール
です。
コードの確認、ちょっとしたテスト、学習など、様々な場面で活用していただければ嬉しいです。
ご質問や機能追加のリクエストなどは GitHub Issues にお気軽にお寄せください。
👉 https://github.com/aim2bpg/rubree/issues