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
150
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
110
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
330
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Is Xcode slowly dying out in 2025?
uetyo
1
240
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
300
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
470
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Why Our Code Smells
bkeepers
PRO
337
57k
A Tale of Four Properties
chriscoyier
160
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Review Best Practice
trishagee
69
18k
Automating Front-end Workflow
addyosmani
1370
200k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Navigating Team Friction
lara
187
15k
How STYLIGHT went responsive
nonsquared
100
5.6k
Designing Experiences People Love
moore
142
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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記法にも対応したい。 当初想定の構文解析器を実装してみたい(?) まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる!(※ ものによります)
ありがとうございました