Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「無ければ作る」Backlogに欲しい機能を自分で作った話
Search
nsuz
May 25, 2023
Programming
0
1.4k
「無ければ作る」Backlogに欲しい機能を自分で作った話
JBUG札幌 #8
のLT資料です。
nsuz
May 25, 2023
Tweet
Share
More Decks by nsuz
See All by nsuz
Python 3.13で進化したtype predicateについてと、タグ付きユニオンを使ったtype narrowingについて
nsuz
0
210
Other Decks in Programming
See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
240
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
AIでLINEスタンプを作ってみた
eycjur
1
230
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
print("Hello, World")
eddie
2
530
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
130
Navigating Dependency Injection with Metro
zacsweers
3
1k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Code Review Best Practice
trishagee
70
19k
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Facilitating Awesome Meetings
lara
55
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Invisible Side of Design
smashingmag
301
51k
Transcript
「無ければ作る」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記法にも対応したい。 当初想定の構文解析器を実装してみたい(?) まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる!(※ ものによります)
ありがとうございました