JBUG札幌 #8のLT資料です。
「無ければ作る」Backlogに欲しい機能を自分で作った話ネオス株式会社 鈴木直柔JBUG札幌 #8
View Slide
自己紹介鈴木 直柔(すずき なおなり)ネオス株式会社 リードアーキテクトバックエンド&フロントエンドエンジニア
Backlog記法をリアルタイムプレビューしたい↓こういうイメージ
ということで・・・つくってみました!
Chrome拡張『Backlog Realtime Preview』特徴外部通信無し。構文解析にサードパーティライブラリを使用していない。コア部分はRustで書いたWebAssembly。
Chrome拡張『Backlog Realtime Preview』構成UI: TypeScript + ReactBacklog記法パーサ: Rust(Wasm)Wasmはバンドルサイズが膨らむのが問題視されがちだが、Chrome拡張だと都度の読み込みは発生しないので、Chrome拡張とWasmは相性が良いのでは!?バンドラ: ViteCRXJSという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記法にも対応したい。当初想定の構文解析器を実装してみたい(?)まとめ本家に無くても自力で開発すれば欲しい機能を追加できる!(※ものによります)
ありがとうございました