{"id":4160,"date":"2021-06-20T07:23:31","date_gmt":"2021-06-19T22:23:31","guid":{"rendered":"https:\/\/ecpplus.net\/weblog\/?p=4160"},"modified":"2021-06-22T10:53:59","modified_gmt":"2021-06-22T01:53:59","slug":"webassembly-with-rust","status":"publish","type":"post","link":"https:\/\/ecpplus.net\/weblog\/webassembly-with-rust\/","title":{"rendered":"WebAssembly \u3067 Rust \u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3059\u308b"},"content":{"rendered":"

WebAssembly \u3067 Rust \u30b3\u30fc\u30c9\u3092 JavaScript \u304b\u3089\u547c\u3073\u51fa\u3057\u3066\u307f\u307e\u3057\u305f\u3002JavaScript \u306eMarkdown\u6587\u5b57\u5217\u3092Rust \u306e Markdown \u30d1\u30fc\u30b5\u306b\u6e21\u3057\u3066 HTML \u3092\u5f97\u3066\u3001\u753b\u9762\u4e0a\u306b\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n

\u6e96\u5099<\/h2>\n

\u203b \u4e0b\u8a18\u306e Cloudflare Worker \u306e\u30b3\u30fc\u30c9\u304b\u3089\u6d3e\u751f\u3057\u3066\u5b9f\u88c5\u3057\u305f\u306e\u3067\u3001Cloudflare Worker \u7528\u306e\u30b3\u30fc\u30c9\u304c\u5c11\u3057\u6df7\u3058\u3063\u3066\u307e\u3059\u3002<\/p>\n

\n
\n
\n \n \n <\/a>\n <\/div>\n
\n
\n Cloudflare Workers \u3092 Rust \u3067\u4f7f\u3046<\/a>\n Cloudflare Workers \u3092 Rust \u3067\u4f7f\u3046\u65b9\u6cd5\u3067\u3059\u3002\u6700\u5c0f\u9650\u306e\u30b3\u30fc\u30c9\u3067\u3001\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304b\u3089\u30c7\u30d7\u30ed\u30a4\u307e\u3067\u884c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/small>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n

wrangler, wasm-pack \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
cargo install wrangler wasm-pack<\/code><\/pre>\n
wrangler generate<\/h3>\n
wrangler generate wasm-markdown-parser https:\/\/github.com\/cloudflare\/rustwasm-worker-template\/<\/code><\/pre>\n
\u3053\u308c\u306f Cloudflare Workers \u7528\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u3059\u304c\u3001WebAssembly \u306b\u5fc5\u8981\u306a\u3082\u306e\u304c\u5168\u3066\u5165\u3063\u3066\u307e\u3059\u3002(\u540c\u6642\u306b\u3001Cloudflare Worker \u3067\u3057\u304b\u4f7f\u308f\u306a\u3044\u30b3\u30fc\u30c9\u3082\u5c11\u3057\u5165\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u304c)<\/p>\n
\u5fc5\u8981\u6700\u5c0f\u9650\u306e\u30b3\u30fc\u30c9\u3067\u9032\u3081\u308b\u5834\u5408\u306f\u3001\u516c\u5f0f\u306e Rust \u304b\u3089 WebAssembly \u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b(developer.mozilla.org)<\/a> \u306b\u6cbf\u3063\u3066\u9032\u3081\u308b\u3068\u826f\u3055\u305d\u3046\u3067\u3059\u3002<\/p>\n
\u5b9f\u88c5<\/h2>\n
Rust\u5074<\/h3>\n
markdown \u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u8ffd\u52a0<\/h4>\n
crates\/markdown(GitHub)<\/a> \u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n
Cargo.toml \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
[dependencies]\nmarkdown = "0.3"<\/code><\/pre>\n
cargo build <\/code><\/pre>\n
lib.rs \u3092\u7de8\u96c6<\/h4>\n
src\/lib.rs<\/code> \u3067 JavaScript \u304b\u3089\u547c\u3076\u30b3\u30fc\u30c9\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n
extern crate cfg_if;\nextern crate markdown; \/\/ \u8ffd\u52a0\nextern crate wasm_bindgen;\n\n...\n\n#[wasm_bindgen]\nextern "C" {\n    \/\/ JavaScript \u306e console.log \u304c Rust \u304b\u3089\u547c\u3079\u308b\u3088\u3046\u306b(\u30c7\u30d0\u30c3\u30b0\u7528)\n    #[wasm_bindgen(js_namespace = console)]\n    fn log(s: &str);\n}\n\n#[wasm_bindgen]\npub fn to_html(md_string: &str) -> String {\n    let html: String = markdown::to_html(&md_string);\n    \/\/ debug\n    log(&format!(\n        "markdown is\\n {}\\n\\nhtml is\\n{}",\n        &md_string, &html\n    ));\n    html\n}<\/code><\/pre>\n
\u30d3\u30eb\u30c9<\/h4>\n
wasm-pack build --scope ecpplus<\/code><\/pre>\n
--scope ecpplus<\/code> \u3068\u3059\u308b\u3068\u3001 npm \u30d1\u30c3\u30b1\u30fc\u30b8\u5316\u3055\u308c\u308b\u3068\u304d\u306b\u30d1\u30c3\u30b1\u30fc\u30b8\u540d\u304c @ecpplus\/~<\/code> \u3068\u306a\u308a\u307e\u3059\u3002\u4f5c\u6210\u6642\u306b\u540d\u79f0\u3092 wasm-markdown-parser<\/code> \u3068\u3057\u3066\u308b\u306e\u3067\u3001\u30d5\u30eb\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u540d\u306f @ecpplus\/wasm-markdown-parser<\/code> \u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
npm \u30d1\u30c3\u30b1\u30fc\u30b8\u306f pkg<\/code> \u306e\u4e0b\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074 (JavaScript)<\/h3>\n
Rust \u5b9f\u88c5\u30b3\u30fc\u30c9\u306e\u547c\u3073\u51fa\u3057\u65b9<\/h4>\n
const js = import(".\/node_modules\/@ecpplus\/rustwasm-markdown-parser\/rustwasm_markdown_parser.js");\n\njs.then(js => {\n  const htmlString = js.to_html('# This is H1')\n  console.log(htmlString)\n})<\/code><\/pre>\n
\u3068\u3044\u3046\u3088\u3046\u306b\u3057\u3066\u3001WebAssembly \u5074\u3067\u5b9f\u88c5\u3057\u305f to_html<\/code> \u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n
HTML \u4e0a\u3067\u4f7f\u3063\u3066\u307f\u308b<\/h4>\n
\u30d5\u30a9\u30fc\u30e0\u306e\u5165\u529b\u5024\u3092 to_html<\/code> \u306b\u6e21\u3057\u3066\u753b\u9762\u4e0a\u306b\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u306e\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u305f \u2192 https:\/\/ecpplus.net\/wasm-markdown-parser\/<\/a><\/p>\n
\u6ce8\u610f\u70b9\u3068\u3057\u3066\u3001WebAssembly \u306e .wasm<\/code> \u30d5\u30a1\u30a4\u30eb\u306f\u3001 content-type \u3092 application\/wasm<\/code> \u306b\u3057\u306a\u3044\u3068\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u5b9f\u884c\u3059\u308b\u4e8b\u304c\u3067\u304d\u307e\u305b\u3093\u3002 Nginx \u306a\u3089 mime.types<\/code> \u306b\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3092\u8ffd\u52a0\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n
application\/wasm wasm;<\/code><\/pre>\n
\u5b9f\u88c5\u3057\u305f\u30b3\u30fc\u30c9\u3092 GitHub \u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\necpplus\/wasm-markdown-parser(GitHub)<\/a>\n
\u53c2\u8003<\/h2>\n