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.5k
「無ければ作る」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
230
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Catch Up: Go Style Guide Update
andpad
0
250
モテるデスク環境
mozumasu
3
1.3k
What's new in Spring Modulith?
olivergierke
1
170
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
NIKKEI Tech Talk#38
cipepser
0
210
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
161
23k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Embracing the Ebb and Flow
colly
88
4.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Done Done
chrislema
185
16k
For a Future-Friendly Web
brad_frost
180
10k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
The Language of Interfaces
destraynor
162
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
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記法にも対応したい。 当初想定の構文解析器を実装してみたい(?) まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる!(※ ものによります)
ありがとうございました