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
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Kiroで始めるAI-DLC
kaonash
2
620
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
RDoc meets YARD
okuramasafumi
4
170
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
140
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Deep Dive into Kotlin Flow
jmatsu
1
360
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Bash Introduction
62gerente
615
210k
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Docker and Python
trallard
46
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
How STYLIGHT went responsive
nonsquared
100
5.8k
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記法にも対応したい。 当初想定の構文解析器を実装してみたい(?) まとめ 本家に無くても自力で開発すれば欲しい機能を追加できる!(※ ものによります)
ありがとうございました