「無ければ作る」Backlogに欲しい機能を自分で作った話 ネオス株式会社　鈴木直柔 JBUG札幌 #8

自己紹介 鈴木 直柔（すずき なおなり） ネオス株式会社 リードアーキテクト バックエンド&フロントエンドエンジニア

Backlog記法をリアルタイムプレビューしたい ↓こういうイメージ

ということで・・・つくってみました！

Chrome拡張『Backlog Realtime Preview』 特徴 外部通信無し。 構文解析にサードパーティライブラリを使用していない。 コア部分はRustで書いたWebAssembly。

Chrome拡張『Backlog Realtime Preview』 構成 UI: TypeScript + React Backlog記法パーサ: Rust（Wasm） Wasmはバンドルサイズが膨らむのが問題視されがちだが、Chrome拡張だと都度 の読み込みは発生しないので、Chrome拡張とWasmは相性が良いのでは！？ バンドラ: Vite CRXJSというChrome拡張開発のためのViteプラグインが便利。Chrome拡張のマニ フェストの静的解析もできる。

Backlog記法パーサの開発 先達の同種のツール『VS Code Backlog Wiki Preview』は、Backlog記法をMarkdown記法に 変換 → Markdownパーサライブラリに食わせてレンダリング、というアプローチ。 自分は「独自にBacklog記法の構文解析器をつくってみたい！💪🏼」という野望を持って開発開 始。

Backlog記法パーサの開発 当初の想定 1. 字句解析 2. 構文解析により抽象構文木を生成 3. 抽象構文木からHTMLを生成 しかし、ちょっとやってみるとかなり難しい！ 文法として成立していない場合にエラーにするのではなくそのまま出力しなければならない ので、文法上のトークンになるのかそれともただの文字列なのかをバックトラックしながら 解析する、などなど・・。　→　断念

Backlog記法パーサの開発 実際の実装 1. 各文法を正規表現で検査し、合致したら文字列操作により直接HTMLに変換。 前後関係にも依存するので、状態を持ちながら検査することになるが、文法の数が多くない のでそんなに難しくない。 課題としては、文法の数ぶんドキュメントを走査することになるので、当初想定と比べると 性能が劣後する。しかし、実用の範囲では問題にならないので良しとする。

対応済みの記法 太字 斜体 打ち消し線 色 URL 見出し 箇条書き 箇条書き（数字） 表 行末にhをつけるとその行に色がつく セル内の頭に~をつけるとそのセルに色がつく 引用文 行頭に > をつけるパターン {quote} ~ {/quote}のパターン インラインコード コードブロック 改行（&br;）

実演 では、実際にブラウザで動かすところを見て頂きましょう！

今後 Markdown記法にも対応したい。 当初想定の構文解析器を実装してみたい（？） まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる！（※ ものによります）

ありがとうございました