Wasmで動くRust製マークダウンパーサーを自作した話

Wasmで動くRust製マークダウンパーサーを自作した話 0Yu 隅田川.dev

0yu(おゆ,ぜろゆー) 好きな技術 • Webフロントエンド、Rust 趣味 • 映画鑑賞・旅行・ゲーム etc • 最近はハイラルの勇者をしています
自己紹介っっっz yud0uhu 2

• Rustと言語処理系の勉強のため、簡易的なマークダウンパーサーをスクラッチで実装した • 生成したWASMをNuxt3+Viteの環境で動かしたはじめに

字句解析 • テキストを字句の列(トークン)に分解すること • 字句解析を行うプログラムを字句解析器 (lexerまたはtokenizer)と呼ぶ言語処理系の概要

構文解析 • トークン列を抽象構文木(abstract syntax treeまたはAST)に変換する • 抽象構文木とは、言語の構文を解釈し、データ構造を取り出した(抽象化した)木構造のこと言語処理系の概要

意味解析 • 構文木の意味を解析する • コンパイラでは、この段階で中間コードを生成する言語処理系の概要

最適化 • 中間コードを変形して、効率のよいプログラムに変換すること • コンパイラでは、パースしたソースコードから無駄な処理を分析し、コード最適化を行う言語処理系の概要

コード生成 • 抽象構文木を入力とし、ターゲットとなる言語のコードを生成する • コンパイラでは、この段階で中間コードをネイティブコード(ターゲットのCPUが解釈できる実行形式のバイナリコード)に変換する言語処理系の概要

マークダウンテキストを入力としトークンに分割(字句解析) →ASTに変換(構文解析) →HTMLを生成(コード生成) できるようにするパーサーの構成

• 字句の列(トークン)を定義する • 入力されたテキストをトークンに分割する字句解析器(Lexer)の実装

実装するマークダウンタグ • 見出し(<h1>~<h6>) • 太字(<b>) • 斜体(<i>) • 引用(<blockquotes>) •
リスト(<ul>,<li>) 字句解析器(Lexer)の実装

トークンを定義する • Heading,Bold,Italic,BlockQu otes,Lists の5つのトークンを定義する字句解析器(Lexer)の実装

字句解析(Tokenize)する • 字句解析は関数lexが担う • 字句解析のための文字列操作はイテレータで行う ◦ イテレータとは、複数個の要素の集まり(配列・リストなど)から、次の要素
を一つずつ順に取り出すインターフェースのこと字句解析器(Lexer)の実装

fn next(&mut self) -> Option<Self::Item> • nextはイテレータを消費するメソッド • 呼び出されるたびにイテレータを消費してSome に包まれた一要素を
返し、繰り返しが終わるとNoneを返す ◦ next()で入力された文字列を一つずつ取り出し、変数cに格納する字句解析器(Lexer)の実装

• 見出しタグの判定では、頭文字が#と (半角スペース)で始まる語句を識別できるようにしたい • 変数cが#、in_boldがfalse(太字ではない)でin_italicがfalse(斜体ではない)のときにのみ処理するようなパターンマッチングを書く字句解析器(Lexer)の実装

• peekはイテレータを消費する前に、前もって参照を返す(新たなイテレータPeekable<T>を返す)メソッド • 行頭に#が連続して出現する時(chars.peek()とSome(&'#')が等しい時)、一文字ずつ文字列を読み進めながら、levelを1ずつ加算字句解析器(Lexer)の実装

• levelの値に応じて見出しのレベルを判定 • 適切なToken::Headingをtokensに追加し、見出しをトークン化字句解析器(Lexer)の実装

• 半角スペースの後に続くテキストがTokenの値に正しく解釈されるようにしたい • 現在の文字が半角スペースのときにのみ、charsから文字を取り出す処理を書く字句解析器(Lexer)の実装

• トークンから抽象構文木(AST)を構築する • ASTはノードが集まってできた木構造 ◦ Heading(見出し)タグは、Heading Level(見出しレベル)ノードとText(文字列)ノードが集まってASTを構築する構文解析器(Parser)の実装

• トークン配列からASTNodeを構築構文解析器(Parser)の実装

• Token::Headingをパースして、AstNode::Headingに変換構文解析器(Parser)の実装

• 構築されたASTをHTMLに変換する ◦ AstNode型のスライスを参照するast: &[AstNode]を引数に持ち、Stringを返す関数generate_htmlを定義コード生成器(Generator)の実装

• パターンマッチング→ASTのノードをhtmlタグにフォーマットし、 result配列に追加する処理を愚直に書くコード生成器(Generator)の実装

• 関連関数text_to_tokenで呼び出すレンダリング

• wasm-packでビルドする ◦ Cargo.tomlで環境設定を行う WASMの生成

• lib.rsに#[wasm_bindgen]アトリビュートを付与 WASMの生成

• % rustup target add wasm32-unknown-unknownでターゲットアーキテクチャを追加して% wasm-pack buildする •
target/wasm32-unknown-unknown/release に、最適化されたビルドバイナリが出力される WASMの生成

Wasmで動くRust製マークダウンパーサーを自作した話

Wasmで動くRust製マークダウンパーサーを自作した話

yud0uhu

More Decks by yud0uhu

Other Decks in Programming

Featured

Transcript