Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

nsuz
May 25, 2023

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

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

nsuz

May 25, 2023
Tweet

Other Decks in Programming

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