「無ければ作る」Backlogに欲しい機能を自分で作った話

JBUG札幌 #8のLT資料です。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. ありがとうございました
    

    View Slide