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
730
「無ければ作る」Backlogに欲しい機能を自分で作った話
JBUG札幌 #8
のLT資料です。
nsuz
May 25, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
ゆるい個人開発のススメ
kuroppe1819
10
990
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Fast JSX: Don't clone props object #28768
yossydev
1
120
SIMD Parallel Programming with the Vector API
josepaumard
0
180
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Code Review Best Practice
trishagee
55
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
What's new in Ruby 2.0
geeforr
337
31k
Six Lessons from altMBA
skipperchong
21
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing with Data
zakiwarfel
96
4.8k
Adopting Sorbet at Scale
ufuk
68
8.6k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
The Language of Interfaces
destraynor
151
23k
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記法にも対応したい。 当初想定の構文解析器を実装してみたい(?) まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる!(※ ものによります)
ありがとうございました