{"id":45148,"date":"2022-11-12T01:26:47","date_gmt":"2024-01-01T23:48:06","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/"},"modified":"2024-04-29T00:13:41","modified_gmt":"2024-04-28T16:13:41","slug":"45148-2","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/","title":{"rendered":""},"content":{"rendered":"<p>WebAssembly \u306f\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u306b\u5bfe\u5fdc\u53ef\u80fd\u306a VM \u306e\u898f\u683c\u3067\u3042\u308a\u3001\u5916\u90e8\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u304b\u3089\u547c\u3073\u51fa\u3057\u3066\u4f7f\u3046\u4e8b\u304c\u60f3\u5b9a\u3055\u308c\u3066\u3044\u308b\u3002<br \/>\n\u672c\u8a18\u4e8b\u3067\u306f WebAssembly \u3068\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3001\u4f8b\u3048\u3070 String \u306e\u53d7\u3051\u6e21\u3057\u65b9\u6cd5\u7b49\u306b\u3064\u3044\u3066\u8a18\u8ff0\u3059\u308b\u3002<br \/>\n\u6700\u5f8c\u306b\u3001\u4e0a\u8a18\u3092\u8e0f\u307e\u3048\u305f\u4e0a\u3067 WebAssembly \u3092\u4f7f\u3063\u305f\u30b3\u30fc\u30c9\u306e\u300c\u826f\u3044\u8a2d\u8a08\u300d\u306b\u3064\u3044\u3066\u3082\u63d0\u6848\u3092\u3057\u3066\u307f\u305f\u3002<\/p>\n<p>\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066 Rust \u3068 JavaScript \u306e\u30b3\u30fc\u30c9\u3092\u4f7f\u3046\u304c\u3001\u3053\u308c\u3089\u306e\u77e5\u8b58\u304c\u7121\u304f\u3068\u3082\u8a18\u4e8b\u306e\u672c\u8cea\u90e8\u5206\u306f\u7406\u89e3\u53ef\u80fd\u3068\u8003\u3048\u3066\u3044\u308b\u3002<\/p>\n<p>\uff08\u3053\u308c\u306f\u793e\u5185\u52c9\u5f37\u4f1a\u3067\u884c\u3063\u305f\u30c7\u30e2\u3084\u89e3\u8aac\u306e\u5185\u5bb9\u3092\u8ee2\u6a5f\u3057\u305f\u3082\u306e\u3067\u3059\u3002<br \/>\n\u30c7\u30e2\u306e\u5185\u5bb9\u306f\u8a18\u4e8b\u57f7\u7b46\u6642\u70b9\u306e\u7269\u306a\u306e\u3067\u3001\u4f9d\u5b58\u3059\u308b\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u306b\u3088\u308a\u7d50\u679c\u304c\u5909\u308f\u308b\u53ef\u80fd\u6027\u304c\u6709\u308a\u307e\u3059\u304c\u3001\u3054\u5bb9\u8d66\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n<h1>\u524d\u56de\u306e\u5fa9\u7fd2<\/h1>\n<p>\u524d\u56de\u306e\u52c9\u5f37\u4f1a\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001WEBASSEMBLY &#8211; What&#8217;s the right thing to write? \u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>System Call \u3068 User Land<\/h2>\n<p>OS \u306e\u4e0a\u3067\u52d5\u304f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u51e6\u7406\u306f\u5927\u304d\u304f 2 \u7a2e\u985e\u306b\u5206\u304b\u308c\u308b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">OS \u3078\u306e\u30ea\u30af\u30a8\u30b9\u30c8 (System Call)<\/ul>\n<\/li>\n<\/ul>\n<p>Input \/ Output<br \/>\nMemory \u78ba\u4fdd\u3001\u89e3\u653e<br \/>\n&#8230;<\/p>\n<p>CPU \u3068 Memory \u3092\u76f4\u63a5\u3064\u304b\u3063\u305f\u8a08\u7b97 (User Land \u4e0a\u306e\u51e6\u7406)<\/p>\n<p>\u56db\u5247\u6f14\u7b97<br \/>\n\u78ba\u4fdd\u6e08\u307f\u306e Memory \u3078\u306e\u30a2\u30af\u30bb\u30b9 (Read \/ Write)<br \/>\n&#8230;<\/p>\n<h2>WebAssembly \u306e\u65b9\u91dd<\/h2>\n<p>WebAssembly \u3068\u306f\u3001\u591a\u304f\u306e\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30fc\u3067\u52d5\u4f5c\u3059\u308b\u4e8b\u3092\u76ee\u6307\u3057\u305f VM \u306e\u4ed5\u69d8\u3067\u3042\u308b\u3002<br \/>\n\u3057\u304b\u3057 System Call \u3092\u884c\u3046\u3068\u3001\u305d\u306e\u51e6\u7406\u306f OS \u4f9d\u5b58\u3068\u306a\u3063\u3066\u3057\u307e\u3044\u30dd\u30fc\u30bf\u30d3\u30ea\u30c6\u30a3\u30fc\u3092\u4e0b\u3052\u308b\u3002<\/p>\n<p>\u305d\u308c\u3092\u9632\u3050\u305f\u3081\u3001WebAssembly \u306f User Land \u4e0a\u306e\u51e6\u7406\u3057\u304b\u51fa\u6765\u306a\u3044\u3088\u3046\u306b\u898f\u683c\u3067\u5b9a\u3081\u3089\u308c\u3066\u3044\u308b\u3002<br \/>\n\u305d\u3057\u3066 System Call \u304c\u4f7f\u3048\u306a\u3044\u3068\u3044\u3046\u5236\u9650\u3092\u88dc\u3046\u305f\u3081\u306b WebAssembly \u306f\u4ed6\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u3068\u9023\u643a\u3057\u3066\u52d5\u304f\u4e8b\u3092\u524d\u63d0\u3068\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>WebAssembly \u306e\u4f7f\u3044\u65b9\u3068\u3057\u3066\u306f\u3001\u4e0b\u8a18\u306e 2 \u901a\u308a\u306b\u306a\u308b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">WebAssembly \u3067\u306f System Call \u3092\u4f7f\u308f\u306a\u3044\u90e8\u5206\u306e\u30b3\u30fc\u30c9\u3060\u3051\u3092\u8a18\u8f09\u3001\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u304b\u3089\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u69d8\u306b\u4f7f\u7528\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">System Call \u3092\u5b9f\u884c\u3059\u308b\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u95a2\u6570\u3092 WebAssembly \u306b Export \u3057\u3001WebAssembly \u304b\u3089\u305d\u308c\u3089\u306e\u95a2\u6570\u3092\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u306e\u69d8\u306b\u5b9f\u884c\u3059\u308b<\/ul>\n<h1>\u30c7\u30e2\u74b0\u5883<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Debian 11 (WSL2 on Windows11)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Rust<\/ul>\n<\/li>\n<\/ul>\n<p>Cargo 1.69.0<br \/>\nrustup 1.26.0<\/p>\n<p>JavaScript<\/p>\n<p>nodejs v16.20.0<br \/>\nnpm 8.19.4<\/p>\n<p>wasm-bindgen 0.2.86<br \/>\nbinaryen version_113<br \/>\nwabt 1.0.33<br \/>\nFirefox 102.11.0esr (64-bit)<\/p>\n<h1>Hello World<\/h1>\n<p>\u9069\u5f53\u306a\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3066 rust-webpack \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3053\u3068\u3067 Hello World \u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u6210\u53ef\u80fd\u3060\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>hello_world\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>hello_world\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<span class=\"nv\">$ <\/span>npm run start\r\n<\/code><\/pre>\n<p>\u3053\u3053\u307e\u3067\u5b9f\u884c\u3059\u308b\u3068\u3001Web Browser \u304c\u7acb\u3061\u4e0a\u304c\u308a\u7a7a\u767d\u306e\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3060\u308d\u3046\u3002<br \/>\n\u3053\u3053\u3067\u30c7\u30a3\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3067\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u7acb\u3061\u4e0a\u3052\u3066\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u898b\u308b\u3068\u3001&#8221;Hello World!&#8221; \u3068\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u3002<\/p>\n<p>\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u3068\u304d\u306f\u3001Ctrl-C \u3067\u4e00\u65e6\u505c\u6b62\u3057\u3066\u3001\u4f55\u56de\u304b npm run start \u3059\u308b\u3068\u4e0a\u624b\u304f\u3044\u304f\u3053\u3068\u304c\u6709\u308b\u3002<br \/>\n(npm \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30d0\u30b0\u304b\uff1f)<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/20-0.png\" alt=\"hello_world.png\" \/><\/div>\n<p>\u3053\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3060\u304c\u3001\u5b9f\u306f\u8272\u3005\u3068\u96e3\u3057\u3044\u3002<br \/>\n\u305d\u3053\u3067\u5148\u306b\u5225\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u3064\u3044\u3066\u8aac\u660e\u3059\u308b\u3002<\/p>\n<p>\u78ba\u8a8d\u304c\u7d42\u308f\u3063\u305f\u3089 Browser \u3092\u9589\u3058\u3066 npm run start \u30b3\u30de\u30f3\u30c9\u3092 Ctrl-C \u3067\u505c\u6b62\u3057\u3066\u826f\u3044\u3002<\/p>\n<h1>add 1<\/h1>\n<p>WebAssembly (Rust) \u3067\u6574\u6570\u306e\u8db3\u3057\u7b97\u3092\u3059\u308b\u95a2\u6570\u3092\u66f8\u304d\u3001JavaScript \u304b\u3089\u305d\u308c\u3092\u547c\u3073\u51fa\u3059\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u8003\u3048\u3066\u307f\u308b\u3002<\/p>\n<p>\u5148\u307b\u3069\u306e Hello World \u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u5f8c\u304b\u3089\u89e3\u8aac\u3059\u308b\u305f\u3081\u306b\u6b8b\u3057\u3066\u304a\u304d\u305f\u3044\u306e\u3067\u3001\u540c\u69d8\u306b\u65b0\u3057\u304f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308b\u4e8b\u304b\u3089\u958b\u59cb\u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>addition\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>addition\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306b\u3088\u308a\u30d5\u30a1\u30a4\u30eb\u3084\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u3044\u304f\u3064\u304b\u4f5c\u3089\u308c\u308b\u3002\u3053\u306e\u4e2d\u3067 src\/lib.rs \u3068\u3044\u3046\u306e\u304c Rust \u3067\u66f8\u304b\u308c\u305f WebAssembly \u306e\u30b3\u30fc\u30c9\u3060\u3002<br \/>\n\u521d\u671f\u72b6\u614b\u3067\u306f Hello World \u306e\u70ba\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u304c\u66f8\u304b\u308c\u3066\u3044\u308b\u3002<\/p>\n<p>\u3061\u306a\u307f\u306b\u3001Cargo.toml \u3068\u3044\u3046\u306e\u304c Rust \u306e\u305f\u3081\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3067\u3042\u308b\u3002<br \/>\nRust \u95a2\u9023\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u3053\u306e 2 \u500b\u3060\u3051\u3067\u3001\u6b8b\u308a\u306f JavaScript \u306b\u95a2\u308f\u308b\u30d5\u30a1\u30a4\u30eb\u3067\u3042\u308b\u3002<\/p>\n<p>\u3053\u306e src\/lib.rs \u3092\u4e00\u56de\u5168\u3066\u6d88\u3057\u3001\u4e0b\u8a18\u306e 4 \u884c\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[no_mangle]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">add_1<\/span><span class=\"p\">(<\/span><span class=\"n\">a<\/span><span class=\"p\">:<\/span> <span class=\"nb\">i32<\/span><span class=\"p\">,<\/span> <span class=\"n\">b<\/span><span class=\"p\">:<\/span> <span class=\"nb\">i32<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">i32<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">a<\/span> <span class=\"o\">+<\/span> <span class=\"n\">b<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u3067 Rust \u306e\u65b9\u306f\u5b8c\u6210\u3060\u304c\u3001\u3044\u304f\u3064\u304b\u89e3\u8aac\u3057\u3066\u304a\u304f\u3002<\/p>\n<h2>no_mangle \u3068\u306f\u4f55\u304b\uff1f<\/h2>\n<p>Rust \u306f\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u3068\u5b9f\u884c\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u308b\u304c\u3001\u5b9f\u884c\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u3067\u306f\u95a2\u6570\u3084\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306f unique \u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<br \/>\n\u3057\u304b\u3057\u7570\u306a\u308b module \u306b\u540c\u540d\u306e\u95a2\u6570\u304c\u6709\u308b\u4e8b\u306a\u3069\u306f\u3001\u826f\u304f\u3042\u308b\u3053\u3068\u3060\u3002<br \/>\n\u305d\u3053\u3067\u3001Rust \u3067\u306f\u30b3\u30f3\u30d1\u30a4\u30eb\u6642\u306b\u95a2\u6570\u540d\u3092 rename \u3057\u3001\u5b9f\u884c\u30d5\u30a1\u30a4\u30eb\u5168\u4f53\u3067 unique \u306b\u306a\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<p>C++ \u3067\u3082\u540c\u69d8\u306e\u4ed5\u7d44\u307f\u304c\u3042\u308b\u304c\u3001\u3053\u306e\u3088\u3046\u306a\u4ed5\u7d44\u307f\u3092 mangle \u3068\u3044\u3046\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001mangle \u3059\u308b\u3068\u540d\u524d\u304c\u5909\u308f\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\uff08\u4eca\u56de\u306f JavaScript\uff09\u304b\u3089\u547c\u3073\u51fa\u3059\u4e8b\u304c\u51fa\u6765\u306a\u304f\u306a\u308b\u3002<br \/>\n\u305d\u3053\u3067\u3001\u300c\u3053\u306e\u95a2\u6570\u3060\u3051\u306f mangle \u3059\u308b\u306a\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u95a2\u6570\u306e\u4e0a\u306b #[no_mangle] \u3068\u66f8\u3044\u305f\u3002<\/p>\n<h2>\u95a2\u6570 add_1 \u306e\u5185\u5bb9<\/h2>\n<p>\u95a2\u6570\u306e\u5185\u5bb9\u306f\u898b\u3066\u306e\u901a\u308a\u3060\u304c\u3001\u5f15\u6570\u3068\u3057\u3066 i32 (32 bit \u7b26\u53f7\u4ed8\u6574\u6570) \u3092 2 \u500b\u3068\u308a\u3001\u305d\u306e\u5408\u8a08\u5024\u306e i32 \u3092\u8fd4\u3059\u3002<\/p>\n<h2>JavaScript \u304b\u3089\u306e\u547c\u3073\u51fa\u3057\u3068\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n<p>\u6b21\u306f\u3053\u306e\u95a2\u6570\u3092 JavaScript \u304b\u3089\u8fd4\u3059\u5fc5\u8981\u304c\u3042\u308b\u3002<br \/>\n\u307e\u305a\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u4e0a\u3067\u30c7\u30a3\u30ec\u30af\u30c8\u30ea addition \u304b\u3089 npm run start \u3092\u5b9f\u884c\u3059\u308b\u3002<br \/>\n\u3059\u308b\u3068 Web Browser \u304c\u7acb\u3061\u4e0a\u304c\u308a\u7a7a\u767d\u306e\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u3001\u30b3\u30de\u30f3\u30c9\u306f\u5b9f\u884c\u4e2d\u306e\u307e\u307e\u6b62\u307e\u308b\u3002<\/p>\n<p>\u3053\u3053\u3067\u65b0\u3057\u3044\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u7acb\u3061\u4e0a\u3052\u3001pkg\/index.js \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u306e\u672b\u5c3e\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306b 1 \u884c\u3092 \u8ffd\u8a18 \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">echo<\/span> <span class=\"s1\">'console.log(wasm.add_1(7, 12));'<\/span> <span class=\"o\">&gt;&gt;<\/span> pkg\/index.js\r\n<\/code><\/pre>\n<p>\u3053\u306e\u72b6\u614b\u3067 Web Browser \u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u898b\u308b\u3068 &#8220;19&#8221; \u3068\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3060\u3002<\/p>\n<p>pkg\/index.js \u306f\u30d3\u30eb\u30c9\u306e\u5ea6\u306b\u65b0\u898f\u306b\u4f5c\u6210\u3055\u308c\u3001\u672c\u6765\u306f\u30e6\u30fc\u30b6\u30fc\u304c\u5909\u66f4\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u306a\u3044\u3002<br \/>\n\u52d5\u4f5c\u78ba\u8a8d\u3059\u308b\u70ba\u306b\u306f npm run start \u3092\u5b9f\u884c\u3059\u308b\u306e\u304c\u4e00\u756a\u7c21\u5358\u3060\u304c\u3001\u305d\u3046\u3059\u308b\u3068 pkg\/index.js \u306e\u5909\u66f4\u3082\u6d88\u3048\u3066\u3057\u307e\u3046\u3002<\/p>\n<p>\u3088\u308a\u826f\u3044\u65b9\u6cd5\u306f\u5f8c\u8ff0\u3059\u308b\u304c\u3001\u4eca\u56de\u306f\u3053\u306e\u3088\u3046\u306a\u7f8e\u3057\u304f\u306a\u3044\u65b9\u6cd5\u3067\u7de8\u96c6\u3059\u308b\u4e8b\u3092\u3054\u5bb9\u8d66\u3044\u305f\u3060\u304d\u305f\u3044\u3002<br \/>\n\u78ba\u8a8d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001Web Browser \u3092\u9589\u3058\u3066\u3000npm run start \u30b3\u30de\u30f3\u30c9\u306f Ctrl-C \u3067\u7d42\u4e86\u3057\u3066\u826f\u3044\u3002<\/p>\n<h2>WebAssembly \u306e Primitive \u306a\u578b<\/h2>\n<p>\u898f\u683c\u4e0a\u3001WebAssembly \u306e Primitive \u306a\u578b\uff08VM \u304c\u76f4\u63a5\u4f7f\u7528\u53ef\u80fd\u306a\u578b\uff09\u306f\u4e0b\u8a18\u306e 6 \u7a2e\u985e\u3060\u3051\u3067\u3042\u308b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">32 bit \u7b26\u53f7\u4ed8\u6574\u6570<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">32 bit \u6d6e\u52d5\u5c0f\u6570\u70b9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">64 bit \u7b26\u53f7\u4ed8\u6574\u6570<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">64 bit \u6d6e\u52d5\u5c0f\u6570\u70b9<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">128 bit byte \u5217<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u62bd\u8c61\u30dd\u30a4\u30f3\u30bf\u30fc<\/ul>\n<p>\uff082023 \u5e74 6 \u6708 21 \u65e5\u4fee\u6b63\u3002Primitive \u306a\u578b\u306b 128 bit byte \u5217\u3068\u62bd\u8c61\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u8ffd\u52a0\u3002\u7406\u7531\u306f\u3001\u521d\u56de\u4f5c\u6210\u6642\u306b\u5931\u5ff5\u3057\u3066\u3044\u305f\u305f\u3081\u3002\uff09<br \/>\n\uff082023 \u5e74 7 \u6708 23 \u65e5\u4fee\u6b63\u3002\u7b26\u53f7\u7121\u3057\u6574\u6570\u306f\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u4f9d\u5b58\u3067\u3042\u308a\u3001WebAssembly \u306e\u898f\u683c\u3068\u3057\u3066\u306f\u4e0d\u6b63\u3060\u3063\u305f\uff09<\/p>\n<p>JavaScript \u3068 WebAssembly \u9593\u3067\u3082\u3001\u3053\u308c\u3089\u306e\u5024\u306f\u76f4\u63a5\u53d7\u3051\u6e21\u3057\u3067\u304d\u308b\u3002<br \/>\n\u5b9f\u969b\u306b\u4e0a\u8a18\u306e\u30c7\u30e2\u3067\u306f wasm.add_1(7, 12) \u306e\u69d8\u306b\u5f15\u6570\u306b number \u3092\u6307\u5b9a\u3057\u305f\u3002<\/p>\n<p>JavaScript \u306e number \u306f 64 bit \u306e\u6d6e\u52d5\u5c0f\u6570\u70b9\u3067\u3042\u308b\u3002<br \/>\n\u3053\u308c\u3092 WebAssembly \u306e\u6574\u6570\u3068\u3057\u3066\u6e21\u3059\u3068\u304d\u306f\u3001\u6574\u6570\u90e8\u5206\u306e\u4e0b\u4f4d 32 bit \u306e\u307f\u3092\u6e21\u3059\u3002<br \/>\nJavaScript \u306e BigInt \u306f bit \u6570\u5236\u9650\u7121\u3057\u306e\u6574\u6570\u3060\u304c\u3001\u3053\u308c\u3092 WebAssembly \u306e\u6574\u6570\u3068\u3057\u3066\u6e21\u3059\u3068\u304d\u306f\u6574\u6570\u90e8\u5206\u306e\u4e0b\u4f4d 64 bit \u306e\u307f\u3092\u6e21\u3059\u3002<br \/>\n(\u6841\u3042\u3075\u308c\u6ce8\u610f)<\/p>\n<p>\u86c7\u8db3\u3060\u304c\u3001WebAssembly \u306f ASCII \u30b3\u30fc\u30c9\u306e\u3088\u3046\u306a 8 bit \u6574\u6570\u3092\u76f4\u63a5\u6271\u3046\u4e8b\u306f\u3067\u304d\u306a\u3044\u3002<br \/>\nRust \u3067\u305d\u306e\u3088\u3046\u306a\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u305f\u5834\u5408\u3001\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u304c 32 bit \u6574\u6570\u3068 bit \u6f14\u7b97\u3067\u9811\u5f35\u3063\u3066\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u63db\u3048\u3066\u3044\u308b\u306f\u305a\u3060\u3002<\/p>\n<h1>add 2<\/h1>\n<p>\u5148\u307b\u3069\u4f5c\u3063\u305f add_1 \u3068\u3044\u3046\u95a2\u6570\u3060\u304c\u3001\u6298\u89d2\u306a\u306e\u3067 WebAssembly \u95a2\u9023\u306e\u30c4\u30fc\u30eb\u3092\u7528\u3044\u3066 rust-webpack \u6d41\u306e\u3084\u308a\u65b9\u306b\u5c11\u3057\u8fd1\u3065\u3051\u3066\u307f\u308b\u3002<\/p>\n<p>\u5148\u307b\u3069\u306e src\/lib.rs \u3092\u4e00\u56de\u524a\u9664\u3057\u3001\u4e0b\u8a18\u306e 6 \u884c\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">add_2<\/span><span class=\"p\">(<\/span><span class=\"n\">a<\/span><span class=\"p\">:<\/span> <span class=\"nb\">i32<\/span><span class=\"p\">,<\/span> <span class=\"n\">b<\/span><span class=\"p\">:<\/span> <span class=\"nb\">i32<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">i32<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">a<\/span> <span class=\"o\">+<\/span> <span class=\"n\">b<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>wasm_bindgen<\/h2>\n<p>\u95a2\u6570 add_1 \u3067\u306f\u4e0a\u306b #[no_mangle] \u3068\u3044\u3046\u6587\u5b57\u5217\u3092\u66f8\u3044\u3066\u3044\u305f\u304c\u3001\u4eca\u56de\u306f #[wasm_bindgen] \u3068\u3044\u3046\u6587\u5b57\u5217\u3092\u66f8\u3044\u305f\u3002<\/p>\n<p>\u3053\u306e\u8868\u8a18\u306f\u95a2\u9023\u30c4\u30fc\u30eb\u306b\u3088\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3088\u3063\u3066\u4f7f\u7528\u53ef\u80fd\u306b\u306a\u308b\u3002<br \/>\n\u3053\u306e\u8868\u8a18\u3092\u7528\u3044\u308b\u3068\u3001\u4fbf\u5229\u306a JavaScript \u306e\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u3092\u4f5c\u308b\u306a\u3069\u8272\u3005\u3068\u304a\u4e16\u8a71\u3057\u3066\u304f\u308c\u308b\u3002<br \/>\n\uff08\u3068\u306f\u3044\u3048\u3001\u4eca\u56de\u306f\u6574\u6570\u3057\u304b\u6271\u308f\u306a\u3044\u306e\u3067\u5927\u3057\u305f\u4e8b\u306f\u3057\u306a\u3044\u304c\uff09<\/p>\n<p>\u305d\u306e\u4ed6\u3001\u95a2\u6570\u306e\u4e2d\u8eab\u306f add_1 \u3068\u540c\u3058\u3067\u3042\u308b\u3002<\/p>\n<h2>JavaScript \u304b\u3089\u306e\u547c\u3073\u51fa\u3057\u3068\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n<p>\u5148\u307b\u3069\u3068\u540c\u69d8\u306b\u3001\u52d5\u4f5c\u78ba\u8a8d\u3092\u3057\u3066\u307f\u308b\u3002<br \/>\n\u307e\u305a\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea addition \u3067 npm run start \u3092\u5b9f\u884c\u3059\u308b\u3002<br \/>\n\u3059\u308b\u3068 Web Browser \u304c\u7acb\u3061\u4e0a\u304c\u308a\u30b3\u30de\u30f3\u30c9\u306f\u5b9f\u884c\u4e2d\u306e\u307e\u307e\u6b62\u307e\u308b\u3002<\/p>\n<p>\u3053\u3053\u3067\u65b0\u3057\u3044\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u7acb\u3061\u4e0a\u3052\u3001pkg\/index.js \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u306e\u672b\u5c3e\u306b\u4e0b\u8a18\u306e 2 \u884c\u3092 \u8ffd\u8a18 \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">add_2<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/index_bg.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nf\">add_2<\/span><span class=\"p\">(<\/span><span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">))<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e\u72b6\u614b\u3067 Web Browser \u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u898b\u308b\u3068 &#8220;6&#8221; \u3068\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3060\u3002<br \/>\n\u78ba\u8a8d\u304c\u7d42\u308f\u3063\u305f\u3089\u3001Web Browser \u3092\u9589\u3058\u3066\u3000npm run start \u30b3\u30de\u30f3\u30c9\u306f Ctrl-C \u3067\u7d42\u4e86\u3057\u3066\u826f\u3044\u3002<\/p>\n<p>\u305d\u3057\u3066 pkg\/index_bg.js \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u898b\u308b\u3068 add_2 \u3068\u3044\u3046 JavaScript \u306e\u95a2\u6570\u304c\u4f5c\u3089\u308c\u3066\u3044\u308b\u306f\u305a\u3060\u3002<br \/>\n\u79c1\u306e\u74b0\u5883\u3067\u306f\u3001\u4e0b\u8a18\u306e\u69d8\u306a\u95a2\u6570\u304c\u4f5c\u3089\u308c\u3066\u3044\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">typeof<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">number<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">expected a number argument<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"cm\">\/**\r\n* @param {number} a\r\n* @param {number} b\r\n* @returns {number}\r\n*\/<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">add_2<\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_2<\/span><span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">ret<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e JavaScript \u306e add_2 \u306e\u5b9f\u614b\u306f\u3001\u5f15\u6570\u304c number \u3067\u3042\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u305f\u4e0a\u3067 Rust \u3067\u4f5c\u6210\u3057\u305f\u95a2\u6570 add_2 \u3092\u547c\u3076\u3060\u3051\u3067\u3042\u308b\u3002<br \/>\n\uff08add_1 \u306e\u6642\u306f\u3001\u3053\u306e\u69d8\u306a\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u306f\u4f5c\u3089\u308c\u306a\u304b\u3063\u305f\u3002\uff09<\/p>\n<h1>String \u3092\u8fd4\u3059<\/h1>\n<p>\u7d9a\u3044\u3066 String \u3092\u8fd4\u3059\u95a2\u6570\u3092\u4f5c\u308a\u305f\u3044\u306e\u3060\u304c\u3001\u305d\u306e\u524d\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306a\u7591\u554f\u3092\u6301\u305f\u306a\u3044\u3060\u308d\u3046\u304b\uff1f<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\uff08Rust \u3082\u542b\u3081\u3066\u591a\u304f\u306e\u8a00\u8a9e\u3067\uff09String \u306f Memory \u3092\u78ba\u4fdd\u3057\u3001\u305d\u3053\u306b\u30c7\u30fc\u30bf\u3092\u8a18\u8f09\u3059\u308b\u3002\u3057\u304b\u3057\u3001\u524d\u8ff0\u306e\u3088\u3046\u306b Memory \u78ba\u4fdd\u306f System Call \u3067\u3042\u308a WebAssembly \u3067\u306f\u884c\u3048\u306a\u3044\u306f\u305a\u3067\u3042\u308b<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>Rust \u306e String \u3092\u3001JavaScript \u306f\u6271\u3048\u308b\u306e\u304b\uff1f<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>Rust \u3067 String \u3092\u6700\u5f8c\u306b\u4f7f\u3063\u305f\u5f8c\u3067\u78ba\u4fdd\u3057\u305f Memory \u3092\u89e3\u653e\u3057\u306a\u3051\u308c\u3070\u3044\u3051\u306a\u3044\u3002\u3057\u304b\u3057\u6700\u5f8c\u306b\u4f7f\u3046\u306e\u304c JavaScript \u306e\u5834\u5408\u3001Memory Leak \u304c\u767a\u751f\u3057\u306a\u3044\u3060\u308d\u3046\u304b\uff1f<\/ol>\n<p>\u5148\u306b WebAssembly \u306e Memory \u78ba\u4fdd\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3001\u305d\u308c\u4ee5\u5916\u306f\u30c7\u30e2\u3092\u884c\u3063\u3066\u304b\u3089\u89e3\u8aac\u3059\u308b\u3002<\/p>\n<h2>WebAssembly \u4e0a\u306e Memory \u78ba\u4fdd<\/h2>\n<p>WebAssembly \u3067\u306f Memory \u306e\u78ba\u4fdd\u304c\u51fa\u6765\u306a\u3044\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001JavaScript \u306f ArrayBuffer \u3084 SharedArrayBuffer \u7b49\u3067\u4e88\u3081\u78ba\u4fdd\u3057\u305f Memory \u3092 WebAssembly \u306e VM \u306b\u6e21\u3059\u4e8b\u304c\u53ef\u80fd\u3060\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u3044\u308b\u6642\u70b9\u3067\u3001\u6e21\u3059\u4e8b\u304c\u51fa\u6765\u308b Memory \u306f\u6700\u5927\u3067 2 GB \u3067\u3042\u308b\u3002<br \/>\n\u3053\u308c\u306f WebAssembly \u304c 32 bit CPU \u3092\u60f3\u5b9a\u3057\u3066\u3044\u308b\u304b\u3089\u3060\u3002<\/p>\n<p>WebAssembly \u306f\u3001\u57fa\u672c\u7684\u306b\u3053\u306e\u6e21\u3055\u308c\u305f 2 GB \u306e\u4e2d\u3067 Memory \u3092\u3084\u308a\u7e70\u308a\u3059\u308b\u3002<\/p>\n<p>\u3053\u306e WebAssembly \u306b\u6e21\u3055\u308c\u305f Memory \u3092\u300c\u7dda\u5f62 Memory\u300d\u3068\u547c\u3076\u3002<br \/>\n\uff08WebAssembly \u3067\u5b9a\u7fa9\u3055\u308c\u305f\u56fa\u6709\u540d\u8a5e\u3060\u3002\uff09<\/p>\n<h3>2 GB \u3082 Memory \u3092\u78ba\u4fdd\u3057\u3066\u5927\u4e08\u592b\u306a\u306e\u304b\uff1f<\/h3>\n<p>\u86c7\u8db3\u304b\u3082\u3057\u308c\u306a\u3044\u304c Web Browser \u3067\u4f7f\u7528\u3059\u308b JavaScript \u306e\u4e2d\u3067 2 GB \u3082 Memory \u3092\u78ba\u4fdd\u3059\u308b\u3068\u5fc3\u914d\u306b\u306a\u308b\u4eba\u3082\u5c45\u308b\u304b\u3082\u3057\u308c\u306a\u3044\u3002<br \/>\n\u30bf\u30d6\u3092 10 \u500b\u958b\u3044\u3066\u3001\u5404\u30bf\u30d6\u3067 WebAssembly \u3092\u4f7f\u3063\u305f\u3089 OS \u306f 20 GB \u306e Memory \u3092\u6d88\u8cbb\u3059\u308b\u306e\u3067\u306f\u306a\u3044\u304b\uff1f<\/p>\n<p>\u7d50\u8ad6\u304b\u3089\u8a00\u3046\u3068\u3001\uff08\u591a\u304f\u306e\u5834\u5408\u306f\uff09\u5927\u4e08\u592b\u3060\u3002<\/p>\n<p>\u6700\u8fd1\u306e OS \u306f\u3001\u30d7\u30ed\u30bb\u30b9\u304c Memory \u3092\u78ba\u4fdd\u3057\u305f\u3060\u3051\u3067\u306f\u4f55\u3082\u3057\u306a\u3044\u3002<br \/>\n\u30d7\u30ed\u30bb\u30b9\u304c\u521d\u3081\u3066\u305d\u306e Memory \u306b\u30a2\u30af\u30bb\u30b9 (Read or Write) \u3057\u305f\u6642\u306b\u3001\u5b9f\u969b\u306b Memory \u3092\u5272\u308a\u5f53\u3066\u308b\u3002<\/p>\n<p>\u4f8b\u3048\u3070 64 bit \u306e Linux \u306e\u5834\u5408\u3001OS \u306f page \u3068\u547c\u3070\u308c\u308b 4096 Byte \u5358\u4f4d\u306e\u584a\u3067 Memory \u3092\u7ba1\u7406\u3057\u3066\u3044\u308b\u3002<br \/>\nJavaScript \u3068 WebAssembly \u306e\u6319\u52d5\u306f\u4f8b\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308b\u3060\u308d\u3046\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>JavaScript \u304c 2 GB \u306e ArrayBuffer \u3092\u4f5c\u308a\u3001WebAssembly VM \u306b\u6e21\u3059\uff08OS \u306e Memory \u4f7f\u7528\u91cf\u306f\u5909\u308f\u3089\u306a\u3044\uff09<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>WebAssembly \u304c String \u4f5c\u6210\u306e\u305f\u3081\u3001\u5148\u982d 10 byte \u306b\u66f8\u304d\u8fbc\u307f\u3092\u3057\u3088\u3046\u3068\u3059\u308b<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>OS \u304c JavaScript\uff08\u306e\u4e2d\u306e WebAssembly\uff09\u306e\u305f\u3081\u306b\u3001ArrayBuffer \u5148\u982d\u306e 4096 byte \u306e Memory \u3092\u5272\u308a\u5f53\u3066\u308b<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>OS \u306e Memory \u4f7f\u7528\u91cf\u304c 4096 byte \u5897\u3048\u308b<\/ol>\n<p>\u300c2 GB \u78ba\u4fdd\u3059\u308b\u300d\u3068\u3044\u3046\u306e\u306f\u300c\u6700\u5927\u3067 2 GB \u307e\u3067\u4f7f\u7528\u53ef\u80fd\u300d\u3068\u3044\u3046\u69d8\u306b\u89e3\u91c8\u3057\u3066\u826f\u3044\u3002<br \/>\n\u3053\u3053\u3067\u306f\u3001\u3053\u308c\u4ee5\u4e0a\u306e\u8aac\u660e\u306f\u884c\u308f\u306a\u3044\u306e\u3067\u6c17\u306b\u306a\u308b\u4eba\u306f\u5225\u9014\u8abf\u3079\u3066\u6b32\u3057\u3044\u3002<\/p>\n<h2>WebAssembly \u3068 JavaScript \u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u53d7\u3051\u6e21\u3057<\/h2>\n<p>\u4e0a\u8a18\u306e\u69d8\u306b\u3001JavaScript \u306f WebAssembly \u306b\u7dda\u5f62 Memory \u3092\u6e21\u3059\u4e8b\u304c\u51fa\u6765\u308b\u3002<br \/>\n\u3053\u306e\u7dda\u5f62 Memory \u306f\u3001JavaScript \u3068 WebAssembly \u306e\u4e21\u65b9\u304b\u3089\u30a2\u30af\u30bb\u30b9 (Read \/ Write) \u53ef\u80fd\u3060\u3002<\/p>\n<p>String \u306e\u69d8\u306a WebAssembly \u306e Primitive \u3067\u306f\u7121\u3044\u578b\u3092 WebAssembly \u3068 JavaScript \u3067\u53d7\u3051\u6e21\u3057\u3059\u308b\u969b\u306f\u3001\u57fa\u672c\u7684\u306b\u3053\u306e\u7dda\u5f62 Memory \u3092\u4f7f\u3046\u4e8b\u306b\u306a\u308b\u3002<\/p>\n<h2>String \u3092\u8fd4\u3059\u30d7\u30ed\u30b0\u30e9\u30e0\u4f5c\u6210<\/h2>\n<p>\u65b0\u3057\u304f rust-webpack \u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>string\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>string\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<\/code><\/pre>\n<p>\u6b21\u306b\u3001String \u3092\u8fd4\u3059 Rust \u306e\u95a2\u6570\u3092\u4f5c\u6210\u3059\u308b\u3002<br \/>\n\u5177\u4f53\u7684\u306b\u306f\u3001src\/lib.rs \u306e\u5185\u5bb9\u3092\u4e00\u56de\u5168\u3066\u524a\u9664\u3057\u3001\u4e0b\u8a18\u306e\u5185\u5bb9\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">hello<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">String<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"s\">\"Hello\"<\/span><span class=\"nf\">.to_string<\/span><span class=\"p\">();<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u95a2\u6570 hello \u306f\u5f15\u6570\u3092\u53d6\u3089\u305a\u3001 &#8220;Hello&#8221; \u3068\u3044\u3046 String \u3092\u4f5c\u6210\u3057\u3066\u8fd4\u3059\u3002<br \/>\nadd_2 \u3068\u540c\u69d8\u3001\u8272\u3005\u3068\u304a\u4e16\u8a71\u3057\u3066\u6b32\u3057\u3044\u306e\u3067\u95a2\u6570\u306e\u4e0a\u306b #[wasm_bindgen] \u3068\u3044\u3046\u6587\u5b57\u5217\u3092\u52a0\u3048\u305f\u3002<\/p>\n<p>\u3053\u306e\u72b6\u614b\u3067\u30d3\u30eb\u30c9\u3059\u308b\u3068\u3001add_2 \u306e\u69d8\u306b pkg\/index_bg.js \u306b JavaScript \u306e\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u304c\u51fa\u6765\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npm run build\r\n<\/code><\/pre>\n<p>\u79c1\u306e\u74b0\u5883\u3067\u306f\u3001\u4e0b\u8a18\u306e\u69d8\u306a\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u304c\u51fa\u6765\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cm\">\/**\r\n* @returns {string}\r\n*\/<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">hello<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">deferred1_0<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">deferred1_1<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">retptr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">hello<\/span><span class=\"p\">(<\/span><span class=\"nx\">retptr<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">var<\/span> <span class=\"nx\">r0<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getInt32Memory0<\/span><span class=\"p\">()[<\/span><span class=\"nx\">retptr<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">4<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\r\n        <span class=\"kd\">var<\/span> <span class=\"nx\">r1<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getInt32Memory0<\/span><span class=\"p\">()[<\/span><span class=\"nx\">retptr<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">4<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">];<\/span>\r\n        <span class=\"nx\">deferred1_0<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">r0<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"nx\">deferred1_1<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">r1<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nf\">getStringFromWasm0<\/span><span class=\"p\">(<\/span><span class=\"nx\">r0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">r1<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_free<\/span><span class=\"p\">(<\/span><span class=\"nx\">deferred1_0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">deferred1_1<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8a73\u7d30\u306b\u8ffd\u3046\u3068\u65e5\u304c\u66ae\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u7c21\u5358\u306b\u6d41\u308c\u3060\u3051\u8aac\u660e\u3059\u308b\u3002<\/p>\n<p>\u6700\u521d\u306f\u4e0b\u8a18\u306e 2 \u884c\u306b\u6ce8\u76ee\u3057\u3066\u6b32\u3057\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"kd\">const<\/span> <span class=\"nx\">retptr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">hello<\/span><span class=\"p\">(<\/span><span class=\"nx\">retptr<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>wasm.__wbindgen_add_to_stack_pointer(-16); \u3068\u3044\u3046\u306e\u306f WebAssembly \u4e0a\u306e\u95a2\u6570\u3067\u3001\u3053\u3053\u3067\u306f\u7dda\u5f62 Memory \u304b\u3089 16 byte \u78ba\u4fdd\u3057\u3001\u305d\u306e\u30a2\u30c9\u30ec\u30b9\u3092\u8fd4\u3059\u3002<br \/>\n\u30a2\u30c9\u30ec\u30b9\u306f\u305f\u3060\u306e\u6574\u6570\u306a\u306e\u3067\u3001JavaScript \u3068 WebAssembly \u306f\u76f4\u63a5\u53d7\u3051\u6e21\u3057\u3067\u304d\u308b\u3002<\/p>\n<p>\u6b21\u306e wasm.hello(retptr); \u3060\u304c\u3001\u3053\u308c\u306f\u79c1\u305f\u3061\u306e\u66f8\u3044\u305f\u95a2\u6570 hello \u3092\u95a2\u9023\u30c4\u30fc\u30eb\u304c\u66f8\u304d\u63db\u3048\u305f\u7269\u3060\u3002<br \/>\n\uff08\u79c1\u305f\u3061\u306e\u66f8\u3044\u305f hello \u306f\u5f15\u6570\u3092\u53d6\u3089\u306a\u304b\u3063\u305f\u3002\uff09<br \/>\n\u3053\u306e\u66f8\u304d\u63db\u3048\u306f Rust \u306e\u95a2\u6570\u306e\u4e0a\u306b\u66f8\u3044\u305f #[wasm_bindgen] \u306e\u8a2d\u5b9a\u306b\u3088\u3063\u3066\u884c\u308f\u308c\u305f\u3002<\/p>\n<p>WebAssembly \u306f\u6587\u5b57\u5217\u3092\u76f4\u63a5 JavaScript \u306b\u8fd4\u3059\u4e8b\u306f\u3067\u304d\u306a\u3044\u3002<br \/>\n\u305d\u3053\u3067\u66f8\u304d\u63db\u3048\u3089\u308c\u305f\u95a2\u6570 hello \u306f\u4e0b\u8a18\u306e\u3088\u3046\u306a\u632f\u308b\u821e\u3044\u3092\u3059\u308b\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u7dda\u5f62 Memory \u304b\u3089\u5fc5\u8981\u306a\u5206\u3060\u3051 Memory \u3092\u78ba\u4fdd\u3057\u3001\u305d\u3053\u306b &#8220;Hello&#8221; \u3068\u3044\u3046\u6587\u5b57\u5217\u3092\u4f5c\u308b<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\u5f15\u6570\u3067\u6e21\u3055\u308c\u305f retptr \u306e\u30a2\u30c9\u30ec\u30b9\u3067\u8a18\u8f09\u3055\u308c\u305f Memory \u4e0a\u306b\u3001\u4f5c\u6210\u3057\u305f\u6587\u5b57\u5217\u306e\u5148\u982d\u30a2\u30c9\u30ec\u30b9\u3084\u305d\u306e\u9577\u3055\u7b49\u3092\u6574\u6570\u3067\u4fdd\u5b58\u3059\u308b<\/ol>\n<p>\u6b21\u306b\u3001\u4e0b\u8a18\u306e\u884c\u306b\u6ce8\u76ee\u3057\u3066\u6b32\u3057\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"k\">return<\/span> <span class=\"nf\">getStringFromWasm0<\/span><span class=\"p\">(<\/span><span class=\"nx\">r0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">r1<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>JavaScript \u306f retptr \u4e0a\u306e\u30a2\u30c9\u30ec\u30b9\u304b\u3089 WebAssembly \u304c\u4f5c\u6210\u3057\u305f String \u3092\u8aad\u307f\u53d6\u308a\u3001\u305d\u3053\u304b\u3089 JavaScript \u306e String \u3092\u4f5c\u6210\u3057\u3066\u8fd4\u3059\u3002<\/p>\n<p>getStringFromWasm0 \u306f\u540c\u3058\u30d5\u30a1\u30a4\u30eb\uff08pkg\/index_bg.js\uff09\u306e\u5225\u306e\u5834\u6240\u306b\u5b9a\u7fa9\u3055\u308c\u305f\u95a2\u6570\u3067\u3001retptr \u4e0a\u306e\u30a2\u30c9\u30ec\u30b9\u304b\u3089 WebAssembly \u304c\u4f5c\u6210\u3057\u305f\u6587\u5b57\u5217\u3092\u8aad\u307f\u3001\u6587\u5b57\u30b3\u30fc\u30c9\u3092 UTF-8 \u304b\u3089 UTF-16 \u306b\u5909\u63db\u3057\u3066\u8fd4\u3059\u3002\uff08Rust \u306e String \u306f UTF-8\u3001JavaScript \u306e String \u306f UTF-16 \u3067\u3042\u308b\u3002\uff09<\/p>\n<p>\u6700\u5f8c\u306b finally \u306e\u4e2d\u8eab\u3060\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_free<\/span><span class=\"p\">(<\/span><span class=\"nx\">deferred1_0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">deferred1_1<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u3053\u3067\u306f\u3001retptr \u3068\u3057\u3066\u78ba\u4fdd\u3057\u305f 16 byte \u306e Memory \u3068\u3001 WebAssembly \u306e String \u3068\u3057\u3066\u78ba\u4fdd\u3057\u305f Memory \u306e\u89e3\u653e\u3092\u884c\u3063\u3066\u3044\u308b\u3002<\/p>\n<h2>\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n<p>hello \u3082\u5148\u307b\u3069\u306e add_2 \u3068\u540c\u69d8\u306e\u65b9\u6cd5\u3067\u52d5\u4f5c\u78ba\u8a8d\u304c\u53ef\u80fd\u3067\u3042\u308b\u3002<br \/>\n\u8208\u5473\u304c\u3042\u3063\u305f\u3089\u3001\u624b\u3092\u52d5\u304b\u3057\u3066\u6b32\u3057\u3044\u3002<\/p>\n<h1>\u5f15\u6570\u306b String \u3092\u53d6\u308b<\/h1>\n<p>Rust \u306e\u65b9\u306f\u76f8\u5909\u308f\u3089\u305a\u95a2\u6570\u306e\u4e0a\u306b #[wasm_bindgen] \u3068\u66f8\u304f\u3060\u3051\u3067\u3001\u5f8c\u306f\u666e\u901a\u306b Rust \u306e\u95a2\u6570\u3092\u66f8\u3051\u3070\u3088\u3044\u3002<br \/>\n\u5f8c\u306f\u95a2\u9023\u30c4\u30fc\u30eb\u304c\u3088\u308d\u3057\u304f\u3084\u3063\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>JavaScript \u306e\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u306f\u3001\u5148\u307b\u3069\u306e hello \u306e\u623b\u308a\u5024\u3068\u9006\u306e\u3088\u3046\u306a\u4e8b\u3092\u884c\u3046\u3002<br \/>\n\u6642\u9593\u306e\u90fd\u5408\u4e0a\u3001\u30c7\u30e2\u306f\u7701\u7565\u3059\u308b\u3002<\/p>\n<h1>WebAssembly \u306e Memory \u95a2\u9023\u306e\u4ed5\u69d8<\/h1>\n<p>Memory \u306b\u95a2\u9023\u3059\u308b WebAssembly \u306e\u4ed5\u69d8\u3060\u304c\u3001\u666e\u901a\u306e C \u8a00\u8a9e\u3084 Rust \u3068\u306f\u5c11\u3057\u7570\u306a\u3063\u3066\u3044\u308b\u3002<\/p>\n<p>WebAssembly \u7279\u6709\u306e\u4ed5\u69d8\u306b\u3064\u3044\u3066\u8efd\u304f\u7d39\u4ecb\u3057\u3066\u304a\u304f\u3002<\/p>\n<p>(\u666e\u6bb5\u30dd\u30a4\u30f3\u30bf\u30fc\u3084\u53c2\u7167\u3092\u4f7f\u308f\u306a\u3044\u4eba\u306f\u3001\u3053\u306e\u7ae0\u306f\u8aad\u307f\u98db\u3070\u3057\u3066\u304f\u3060\u3055\u3044\u3002)<\/p>\n<h2>\u30ed\u30fc\u30ab\u30eb\u5909\u6570\u306e\u30dd\u30a4\u30f3\u30bf\u30fc\u306f\u4f7f\u7528\u4e0d\u53ef\u80fd\u3067\u3042\u308b<\/h2>\n<p>WebAssembly \u3067\u306f\u3001\u7dda\u5f62 Memory \u4ee5\u5916\u306e\u30dd\u30a4\u30f3\u30bf\u30fc\u306f\u57fa\u672c\u7684\u306b\u4f7f\u3046\u4e8b\u304c\u51fa\u6765\u306a\u3044\u3002<\/p>\n<p>C \u8a00\u8a9e\u3084 Rust \u3067\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u66f8\u3044\u3066\u3044\u308b\u3068\u30ed\u30fc\u30ab\u30eb\u5909\u6570\u306e\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u4f7f\u3046\u4e8b\u304c\u3042\u308b\u304c\u3001WebAssembly \u3067\u306f\u305d\u306e\u3088\u3046\u306a\u4e8b\u306f\u3067\u304d\u306a\u3044\u3002<\/p>\n<p>\u305d\u306e\u3088\u3046\u306a\u51e6\u7406\u3092\u66f8\u3044\u305f\u5834\u5408\u3001WebAssembly \u306e\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u304c\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u63db\u3048\u3066\u3044\u308b\u306f\u305a\u3060\u3002<br \/>\n\uff08\u671f\u5f85\u3059\u308b\u307b\u3069\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u51fa\u306a\u3044\u304b\u3082\u3057\u308c\u306a\u3044\u3002\uff09<\/p>\n<h2>Null \u30dd\u30a4\u30f3\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u3067\u3042\u308b<\/h2>\n<p>Address \u306e 0 \u756a\u5730\u306f Null \u30dd\u30a4\u30f3\u30bf\u30fc\u3068\u547c\u3070\u308c\u3001\u30a2\u30af\u30bb\u30b9\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u901a\u5e38\u306f Segmentation Fault \u304c\u767a\u751f\u3059\u308b\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001WebAssembly \u304b\u3089\u898b\u305f 0 \u756a\u5730\u306f\u7dda\u5f62 Memory \u306e\u6700\u521d\u306e\u30a2\u30c9\u30ec\u30b9\u3067\u3042\u308b\u3002<br \/>\n\u30d7\u30ed\u30b0\u30e9\u30e0\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3082\u30a8\u30e9\u30fc\u306f\u767a\u751f\u3057\u306a\u3044\u3002<\/p>\n<p>\uff08null \u30c1\u30a7\u30c3\u30af\u81ea\u4f53\u306f\u53ef\u80fd\u306a\u306e\u3067\u3001\u4f7f\u308f\u306a\u3051\u308c\u3070\u826f\u3044\u3060\u3051\u3060\u3002\u5927\u304d\u306a\u5f71\u97ff\u306f\u7121\u3044\u3060\u308d\u3046\u3002\uff09<\/p>\n<h2>Alignment \u3092\u8003\u616e\u3057\u306a\u3044<\/h2>\n<p>\u901a\u5e38\u3001Memory \u306b\u5024\u3092\u4fdd\u5b58\u3059\u308b\u969b\u306b\u306f CPU \u304c\u52b9\u7387\u7684\u306b\u30c7\u30fc\u30bf\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306b Alignment \u3068\u547c\u3070\u308c\u308b\u7269\u3092\u6c17\u306b\u3059\u308b\u3002<br \/>\n\u4f8b\u3048\u3070 4 byte \u306e\u6574\u6570\u3092\u4fdd\u5b58\u3059\u308b\u306a\u3089\u3070\u3001\u305d\u306e\u30a2\u30c9\u30ec\u30b9\u306f 4 \u306e\u500d\u6570\u3067\u3042\u308b\u65b9\u304c CPU \u306f\u7d20\u65e9\u304f\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u306e\u3060\u3002<br \/>\n\uff08\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u304c\u610f\u8b58\u3057\u3066\u3044\u306a\u304f\u3068\u3082\u3001\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u304c\u8003\u616e\u3057\u3066\u3044\u308b\u306f\u305a\u3060\u3002\uff09<\/p>\n<p>\u3057\u304b\u3057\u3001WebAssembly \u306f\u3053\u306e Alignment \u3092\u8003\u616e\u3057\u306a\u3044\u3002<br \/>\n\uff08\u304a\u305d\u3089\u304f\u3001Memory \u3078\u306e\u30a2\u30af\u30bb\u30b9\u306f\u5c11\u3057\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u60aa\u304f\u306a\u308b\u3060\u308d\u3046\u3002\uff09<\/p>\n<h2>Memory \u95a2\u9023\u306e\u51e6\u7406\u306b\u30cf\u30fc\u30c9\u30a6\u30a7\u30a2\u306e\u529b\u3092\u501f\u308a\u308b\u4e8b\u304c\u3067\u304d\u306a\u3044<\/h2>\n<p>\u4f8b\u3048\u3070\u6700\u8fd1\u306e CPU \u306b\u306f MPU \u3068\u547c\u3070\u308c\u308b Memory \u64cd\u4f5c\u306b\u95a2\u3059\u308b\u5c02\u7528\u306e Unit \u304c\u5b58\u5728\u3059\u308b\u3002<br \/>\nWebAssembly \u3067\u306f\u3001\u57fa\u672c\u7684\u306b\u305d\u306e\u3088\u3046\u306a\u30cf\u30fc\u30c9\u30a6\u30a7\u30a2\u306e\u529b\u3092\u501f\u308a\u308b\u4e8b\u304c\u3067\u304d\u306a\u3044\u3002<\/p>\n<p>\u7279\u306b C \u8a00\u8a9e\u306e realloc \u306e\u3088\u3046\u306a\u95a2\u6570\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u60aa\u304f\u306a\u308b\u3060\u308d\u3046\u3002<\/p>\n<h1>struct \u3092\u8fd4\u3059<\/h1>\n<p>class \u306e\u69d8\u306a\u7269\u3092 Rust \u3067\u306f struct \u3068\u547c\u3076\u3002<\/p>\n<p>\u5148\u307b\u3069\u3001String \u3092\u8fd4\u3059 Rust \u306e\u95a2\u6570\u306e\u30c7\u30e2\u3092\u884c\u3063\u305f\u3002<br \/>\nString \u306f Rust \u306e struct \u3067\u306f\u3042\u308b\u306e\u3060\u304c\u3001String \u306f\u3084\u306f\u308a\u7279\u5225\u3067\u3042\u308b\u3002<br \/>\n\u3082\u3063\u3068\u4e00\u822c\u7684\u306b\u3001\u72ec\u81ea\u306e struct \u3092\u8fd4\u3059\u95a2\u6570\u3092\u4f5c\u3063\u3066\u307f\u308b\u3002<\/p>\n<p>\u3044\u3064\u3082\u306e\u3088\u3046\u306b\u3001\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308b\u4e8b\u304b\u3089\u59cb\u3081\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>rust_struct\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>rust_struct\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<\/code><\/pre>\n<p>\u307e\u305f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b src\/lib.rs \u3092\u4e00\u56de\u5168\u3066\u524a\u9664\u3057\u3001\u4e0b\u8a18\u306e\u5185\u5bb9\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">struct<\/span> <span class=\"n\">Person<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">name_<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"n\">age_<\/span><span class=\"p\">:<\/span> <span class=\"nb\">u32<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">impl<\/span> <span class=\"n\">Person<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">new<\/span><span class=\"p\">(<\/span><span class=\"n\">name<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"n\">age<\/span><span class=\"p\">:<\/span> <span class=\"nb\">u32<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"k\">Self<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">Self<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"n\">name_<\/span><span class=\"p\">:<\/span> <span class=\"n\">name<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"n\">age_<\/span><span class=\"p\">:<\/span> <span class=\"n\">age<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">};<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">name<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"k\">self<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">String<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">self<\/span><span class=\"py\">.name_<\/span><span class=\"nf\">.clone<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">age<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"k\">self<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">u32<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">self<\/span><span class=\"py\">.age_<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4e0a\u304b\u3089\u8efd\u304f\u8aac\u660e\u3059\u308b\u3002<\/p>\n<p>\u4e0b\u8a18\u306e\u90e8\u5206\u306b\u6ce8\u76ee\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">struct<\/span> <span class=\"n\">Person<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">name_<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"n\">age_<\/span><span class=\"p\">:<\/span> <span class=\"nb\">u32<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u3053\u3067\u306f Person \u3068\u3044\u3046 struct \u306e\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u308b\u3002<br \/>\nPerson \u306f\u4e0b\u8a18\u306e 2 \u500b\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3092\u6301\u3063\u3066\u3044\u308b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">name_ (String \u578b)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">age_ (\u7b26\u53f7\u306a\u3057 32 bit \u6574\u6570)<\/ul>\n<p>\u307e\u305f\u3001\u5b9a\u7fa9\u306e\u4e0a\u306b #[wasm_bindgen] \u3068\u8a18\u8f09\u3057\u3066\u3042\u308b\u3088\u3046\u306b\u3001\u3053\u306e struct \u306f JavaScript \u304b\u3089\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u95a2\u9023\u30c4\u30fc\u30eb\u304c\u4e16\u8a71\u3092\u3084\u3044\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u6b21\u306e 2 \u884c\u3060\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[wasm_bindgen]<\/span>\r\n<span class=\"k\">impl<\/span> <span class=\"n\">Person<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"o\">...<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u3053\u304b\u3089 Person \u306e method \u3092\u5b9a\u7fa9\u3057\u3066\u3044\u304f\u306e\u3060\u304c\u3001\u4e0a\u306b #[wasm_bindgen] \u3068\u66f8\u3044\u3066\u3042\u308b\u3088\u3046\u306b\u3001\u3053\u3053\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u5168\u3066\u306e\u95a2\u6570\u306f JavaScript \u304b\u3089\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u95a2\u9023\u30c4\u30fc\u30eb\u304c\u4e16\u8a71\u3092\u3084\u3044\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>\u6b21\u306b\u3001\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u95a2\u6570\u3092 1 \u500b\u305a\u3064\u898b\u3066\u307f\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">new<\/span><span class=\"p\">(<\/span><span class=\"n\">name<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"n\">age<\/span><span class=\"p\">:<\/span> <span class=\"nb\">u32<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"k\">Self<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">Self<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"n\">name_<\/span><span class=\"p\">:<\/span> <span class=\"n\">name<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"n\">age_<\/span><span class=\"p\">:<\/span> <span class=\"n\">age<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">};<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u306f\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u3060\u3002<br \/>\n\u5f15\u6570 name \u3068 age \u3092\u3068\u308a\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u306b\u30bb\u30c3\u30c8\u3057\u3066\u8fd4\u3059\u3002<\/p>\n<p>\u6b8b\u308a\u306e method \u306f 2 \u500b\u307e\u3068\u3081\u3066\u7d39\u4ecb\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">name<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"k\">self<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">String<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">self<\/span><span class=\"py\">.name_<\/span><span class=\"nf\">.clone<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">age<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"k\">self<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">u32<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">self<\/span><span class=\"py\">.age_<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3069\u3061\u3089\u3082\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3092\u8fd4\u3057\u3066\u3044\u308b\u3060\u3051\u3060\u3002<br \/>\n\uff08\u901a\u5e38 getter \u3068\u547c\u3070\u308c\u308b method \u3067\u3042\u308b\u3002\uff09<\/p>\n<p>\u86c7\u8db3\u3060\u304c\u3001name \u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u306e\u53c2\u7167\u3067\u306f\u306a\u304f\u3001\u6df1\u3044\u30b3\u30d4\u30fc\u3092\u4f5c\u3063\u3066\u8fd4\u3057\u3066\u3044\u308b\u3002<br \/>\n\u73fe\u72b6\u3067\u306f\u3001\u95a2\u9023\u30c4\u30fc\u30eb\u3092\u4f7f\u3063\u3066 String \u306e\u53c2\u7167\u3092\u8fd4\u3059\u95a2\u6570\u3092 Rust \u304b\u3089 JavaScript \u306b\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3059\u308b\u4e8b\u306f\u3067\u304d\u306a\u3044\u305f\u3081\u3060\u3002<\/p>\n<p>\u305f\u3060\u3057\u3001\u3053\u306e\u5236\u9650\u306b\u306f WebAssembly \u306e\u4ed5\u69d8\u306f\u5168\u304f\u95a2\u4fc2\u7121\u3044\u3002<br \/>\n\u4eca\u5f8c\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3067\u6539\u5584\u3055\u308c\u308b\u3060\u308d\u3046\u3057\u3001\u305d\u308c\u307e\u3067\u306f JavaScript \u306e\u30e9\u30c3\u30d1\u30fc\u95a2\u6570\u3092\u81ea\u524d\u3067\u4f5c\u308b\u306a\u3069\u306e\u65b9\u6cd5\u3067\u5bfe\u5fdc\u3059\u308b\u4e8b\u3082\u53ef\u80fd\u3067\u3042\u308b\u3002<\/p>\n<p>\u3055\u3066\u3001JavaScript \u5074\u306f\u3069\u3046\u306a\u308b\u3060\u308d\u3046\u304b\uff1f<\/p>\n<p>\u79c1\u306e\u74b0\u5883\u3067\u306f\u3001pkg\/index_bg.js \u306b\u4e0b\u8a18\u306e\u3088\u3046\u306a JavaScript \u306e Class \u304c\u51fa\u6765\u3066\u3044\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cm\">\/**\r\n*\/<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Person<\/span> <span class=\"p\">{<\/span>\r\n\r\n    <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cannot invoke `new` directly<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"kd\">static<\/span> <span class=\"nf\">__wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">ptr<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">ptr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ptr<\/span> <span class=\"o\">&gt;&gt;&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">obj<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">(<\/span><span class=\"nx\">Person<\/span><span class=\"p\">.<\/span><span class=\"nx\">prototype<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">obj<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ptr<\/span><span class=\"p\">;<\/span>\r\n\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">obj<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"nf\">__destroy_into_raw<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ptr<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">ptr<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"nf\">free<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ptr<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">__destroy_into_raw<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbg_person_free<\/span><span class=\"p\">(<\/span><span class=\"nx\">ptr<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"cm\">\/**\r\n    * @param {string} name\r\n    * @param {number} age\r\n    * @returns {Person}\r\n    *\/<\/span>\r\n    <span class=\"kd\">static<\/span> <span class=\"k\">new<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">age<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ptr0<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">passStringToWasm0<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbindgen_malloc<\/span><span class=\"p\">,<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbindgen_realloc<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">len0<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">WASM_VECTOR_LEN<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"nx\">age<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">person_new<\/span><span class=\"p\">(<\/span><span class=\"nx\">ptr0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">len0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">age<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">Person<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">ret<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n        <span class=\"cm\">\/**\r\n    * @returns {string}\r\n    *\/<\/span>\r\n    <span class=\"nf\">name<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">deferred1_0<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">deferred1_1<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Attempt to use a moved value<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"kd\">const<\/span> <span class=\"nx\">retptr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">person_name<\/span><span class=\"p\">(<\/span><span class=\"nx\">retptr<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"kd\">var<\/span> <span class=\"nx\">r0<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getInt32Memory0<\/span><span class=\"p\">()[<\/span><span class=\"nx\">retptr<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">4<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\r\n            <span class=\"kd\">var<\/span> <span class=\"nx\">r1<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getInt32Memory0<\/span><span class=\"p\">()[<\/span><span class=\"nx\">retptr<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">4<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">];<\/span>\r\n            <span class=\"nx\">deferred1_0<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">r0<\/span><span class=\"p\">;<\/span>\r\n            <span class=\"nx\">deferred1_1<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">r1<\/span><span class=\"p\">;<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"nf\">getStringFromWasm0<\/span><span class=\"p\">(<\/span><span class=\"nx\">r0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">r1<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_add_to_stack_pointer<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbindgen_free<\/span><span class=\"p\">(<\/span><span class=\"nx\">deferred1_0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">deferred1_1<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"cm\">\/**\r\n    * @returns {number}\r\n    *\/<\/span>\r\n    <span class=\"nf\">age<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Attempt to use a moved value<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">person_age<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">&gt;&gt;&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5168\u90e8\u8aad\u3080\u3068\u9577\u3044\u306e\u3067\u3001\u91cd\u8981\u306a\u70b9\u3060\u3051\u9806\u306b\u898b\u3066\u3044\u3053\u3046\u3002<\/p>\n<p>\u307e\u305a\u306f Constructor \u304c\u4f7f\u7528\u3067\u304d\u306a\u304f\u306a\u3063\u3066\u3044\u308b\u4e8b\u306b\u6ce8\u76ee\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cm\">\/**\r\n*\/<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Person<\/span> <span class=\"p\">{<\/span>\r\n\r\n    <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cannot invoke `new` directly<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4ee3\u308f\u308a\u306b new \u3068\u3044\u3046\u95a2\u6570\u304c\u4f5c\u3089\u308c\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"cm\">\/**\r\n    * @param {string} name\r\n    * @param {number} age\r\n    * @returns {Person}\r\n    *\/<\/span>\r\n    <span class=\"kd\">static<\/span> <span class=\"k\">new<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">age<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ptr0<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">passStringToWasm0<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbindgen_malloc<\/span><span class=\"p\">,<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbindgen_realloc<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">len0<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">WASM_VECTOR_LEN<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"nx\">age<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">person_new<\/span><span class=\"p\">(<\/span><span class=\"nx\">ptr0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">len0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">age<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">Person<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">ret<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u524d\u8ff0\u306e\u3088\u3046\u306b\u3001WebAssembly \u3068 JavaScript \u304c WebAssembly \u306e primitive \u3067\u306f\u306a\u3044\u578b\u306e\u5024\u3092\u3084\u308a\u53d6\u308a\u3059\u308b\u306b\u306f\u7dda\u5f62 Memory \u3092\u4f7f\u3046\u3057\u304b\u306a\u3044\u3002<\/p>\n<p>\u95a2\u9023\u30c4\u30fc\u30eb\u306f\u7dda\u5f62 Memory \u4e0a\u306b Person \u3092\u4f5c\u6210\u3059\u308b Rust \u306e\u95a2\u6570 person_new \u3092\u4f5c\u6210\u3057\u3066\u304a\u308a\u3001\u3053\u306e JavaScript \u306e\u95a2\u6570\u306f person_new \u3092\u547c\u3093\u3067\u3001\u305d\u306e\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u53d6\u5f97\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>JavaScript \u306e Person class \u306e\u5b9f\u614b\u306f\u3001\u3053\u306e WebAssembly \u306e Memory \u4e0a\u306e\u30dd\u30a4\u30f3\u30bf\u30fc\u306e\u30e9\u30c3\u30d1\u30fc\u3067\u3042\u308b\u3002<\/p>\n<p>\u88dc\u8db3\u3057\u3066\u304a\u304f\u3068\u3001\u5143\u306e Rust \u306e\u95a2\u6570\u3067\u3042\u308b Person::new \u306f\u666e\u901a\u306f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u30b9\u30bf\u30c3\u30af\u4e0a\u306b\u4f5c\u6210\u3059\u308b\u3002<br \/>\n\uff08\u3053\u3046\u3044\u3046\u4e8b\u304c\u51fa\u6765\u308b\u3068\u3053\u308d\u304c C \u8a00\u8a9e\u3084 Rust \u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u512a\u308c\u3066\u3044\u308b\u7406\u7531\u306e 1 \u3064\u3067\u3042\u308b\u3002\uff09<br \/>\nperson_new \u306f\u3053\u306e\u5229\u70b9\u3092\u6bba\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u5f53\u7136\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u60aa\u5f71\u97ff\u304c\u51fa\u308b\u3060\u308d\u3046\u3002<\/p>\n<p>\u6b21\u306b free \u3068\u3044\u3046\u898b\u6163\u308c\u306a\u3044\u95a2\u6570\u3092\u898b\u3066\u307f\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"nf\">free<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ptr<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">__destroy_into_raw<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">__wbg_person_free<\/span><span class=\"p\">(<\/span><span class=\"nx\">ptr<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u306f\u95a2\u9023\u30c4\u30fc\u30eb\u304c\u4f5c\u3063\u305f\u7269\u3067\u3001JavaScript \u306e\u30c7\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u306b\u3042\u305f\u308b\u3002<br \/>\n\uff08\u79c1\u305f\u3061\u306f\u3001Rust \u4e0a\u306b\u3053\u306e\u3088\u3046\u306a\u95a2\u6570\u306f\u4f5c\u6210\u3057\u3066\u3044\u306a\u3044\u3002\uff09<br \/>\n\u5185\u90e8\u3067 Rust \u306e Person \u306e\u30c7\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u3092\u5b9f\u884c\u3001JavaScript \u306e Person class \u304c\u4fdd\u6301\u3057\u3066\u3044\u308b\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u89e3\u653e\u3057\u3001\u6700\u5f8c\u306b\u4fdd\u6301\u3057\u3066\u3044\u308b\u30dd\u30a4\u30f3\u30bf\u30fc\u306b null \u3092\u30bb\u30c3\u30c8\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>\u3053\u308c\u3092\u5b9f\u884c\u3057\u306a\u3044\u3068\u3001Rust \u306e Person \u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3067\u3042\u308b name_ \u304c\u78ba\u4fdd\u3057\u305f memory \u3084 Person \u81ea\u4f53\u304c\u4fdd\u7ba1\u3055\u308c\u3066\u3044\u308b Memory \u304c\u89e3\u653e\u3055\u308c\u306a\u3044\u3002<\/p>\n<p>JavaScript \u306b\u306f Person \u3092\u4f7f\u3044\u7d42\u308f\u3063\u305f\u5f8c\u306b free \u3092\u81ea\u52d5\u3067\u5b9f\u884c\u3059\u308b\u4ed5\u7d44\u307f\u306a\u3069\u7121\u3044\u3002<br \/>\n\u5fd8\u308c\u305a\u306b\u5fc5\u305a\u5b9f\u884c\u3059\u308b\u3088\u3046\u3001\u6ce8\u610f\u3057\u3088\u3046\u3002<\/p>\n<p>\u6b21\u306b\u95a2\u6570 age \u3092\u898b\u3066\u307f\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"cm\">\/**\r\n    * @returns {number}\r\n    *\/<\/span>\r\n    <span class=\"nf\">age<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Attempt to use a moved value<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nf\">_assertNum<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wasm<\/span><span class=\"p\">.<\/span><span class=\"nf\">person_age<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">__wbg_ptr<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">ret<\/span> <span class=\"o\">&gt;&gt;&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u521d\u306b\u3001JavaScript \u306e Person \u304c free \u3055\u308c\u3066\u3044\u306a\u3044\u4e8b\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3044\u308b\u304c\u3001\u305d\u308c\u4ee5\u5916\u306f Rust \u306e method \u3092\u547c\u3093\u3067\u3044\u308b\u3060\u3051\u3060\u3002<\/p>\n<p>\u95a2\u6570 name \u306f\u540c\u69d8\u306a\u306e\u3067\u8aac\u660e\u3092\u7701\u7565\u3059\u308b\u3002<\/p>\n<h1>Hello World \u306e\u89e3\u8aac<\/h1>\n<p>\u6750\u6599\u304c\u305d\u308d\u3063\u305f\u306e\u3067\u6700\u521d\u306e Hello World \u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u89e3\u8aac\u3059\u308b\u3002<\/p>\n<p>\u79c1\u306e\u74b0\u5883\u3067\u306f\u3001Hello World \u306e Rust \u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u4e0b\u8a18\u306e\u69d8\u306b\u306a\u3063\u3066\u3044\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">console<\/span><span class=\"p\">;<\/span>\r\n\r\n\r\n<span class=\"c1\">\/\/ When the `wee_alloc` feature is enabled, this uses `wee_alloc` as the global<\/span>\r\n<span class=\"c1\">\/\/ allocator.<\/span>\r\n<span class=\"c1\">\/\/<\/span>\r\n<span class=\"c1\">\/\/ If you don't want to use `wee_alloc`, you can safely delete this.<\/span>\r\n<span class=\"nd\">#[cfg(feature<\/span> <span class=\"nd\">=<\/span> <span class=\"s\">\"wee_alloc\"<\/span><span class=\"nd\">)]<\/span>\r\n<span class=\"nd\">#[global_allocator]<\/span>\r\n<span class=\"k\">static<\/span> <span class=\"n\">ALLOC<\/span><span class=\"p\">:<\/span> <span class=\"nn\">wee_alloc<\/span><span class=\"p\">::<\/span><span class=\"n\">WeeAlloc<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">wee_alloc<\/span><span class=\"p\">::<\/span><span class=\"nn\">WeeAlloc<\/span><span class=\"p\">::<\/span><span class=\"n\">INIT<\/span><span class=\"p\">;<\/span>\r\n\r\n\r\n<span class=\"c1\">\/\/ This is like the `main` function, except for JavaScript.<\/span>\r\n<span class=\"nd\">#[wasm_bindgen(start)]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">main_js<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JsValue<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ This provides better error messages in debug mode.<\/span>\r\n    <span class=\"c1\">\/\/ It's disabled in release mode so it doesn't bloat up the file size.<\/span>\r\n    <span class=\"nd\">#[cfg(debug_assertions)]<\/span>\r\n    <span class=\"nn\">console_error_panic_hook<\/span><span class=\"p\">::<\/span><span class=\"nf\">set_once<\/span><span class=\"p\">();<\/span>\r\n\r\n\r\n    <span class=\"c1\">\/\/ Your code goes here!<\/span>\r\n    <span class=\"nn\">console<\/span><span class=\"p\">::<\/span><span class=\"nf\">log_1<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"nn\">JsValue<\/span><span class=\"p\">::<\/span><span class=\"nf\">from_str<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello world!\"<\/span><span class=\"p\">));<\/span>\r\n\r\n    <span class=\"nf\">Ok<\/span><span class=\"p\">(())<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u91cd\u8981\u306a\u90e8\u5206\u3060\u3051\u89e3\u8aac\u3057\u3066\u3044\u304f\u3002<br \/>\n\u6700\u521d\u306b\u3001\u4e0b\u8a18\u306e\u884c\u306b\u6ce8\u76ee\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ When the `wee_alloc` feature is enabled, this uses `wee_alloc` as the global<\/span>\r\n<span class=\"c1\">\/\/ allocator.<\/span>\r\n<span class=\"c1\">\/\/<\/span>\r\n<span class=\"c1\">\/\/ If you don't want to use `wee_alloc`, you can safely delete this.<\/span>\r\n<span class=\"nd\">#[cfg(feature<\/span> <span class=\"nd\">=<\/span> <span class=\"s\">\"wee_alloc\"<\/span><span class=\"nd\">)]<\/span>\r\n<span class=\"nd\">#[global_allocator]<\/span>\r\n<span class=\"k\">static<\/span> <span class=\"n\">ALLOC<\/span><span class=\"p\">:<\/span> <span class=\"nn\">wee_alloc<\/span><span class=\"p\">::<\/span><span class=\"n\">WeeAlloc<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">wee_alloc<\/span><span class=\"p\">::<\/span><span class=\"nn\">WeeAlloc<\/span><span class=\"p\">::<\/span><span class=\"n\">INIT<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u7dda\u5f62 Memory \u3092\u78ba\u4fdd\u3001\u89e3\u653e\u3059\u308b\u95a2\u6570\u306f\u3001\u4e00\u901a\u308a\u63c3\u3063\u3066\u304a\u308a\u666e\u6bb5\u306f\u610f\u8b58\u3059\u308b\u5fc5\u8981\u306f\u7121\u3044\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u5f53\u7136\u306e\u4e8b\u3060\u304c\u3053\u308c\u3089\u306e\u95a2\u6570\u306e\u5206\u3060\u3051 WebAssembly \u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f\u30d0\u30a4\u30ca\u30ea\u30b5\u30a4\u30ba\u306f\u5897\u3048\u3066\u3057\u307e\u3046\u3002<br \/>\nBrowser \u4e0a\u306e JavaScript \u3067\u52d5\u4f5c\u3059\u308b\u5834\u5408\u306f WebAssembly \u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u5fc5\u8981\u304c\u6709\u308b\u306e\u3067\u3001\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u3068\u30c8\u30fc\u30bf\u30eb\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u60aa\u304f\u306a\u3063\u3066\u3057\u307e\u3046\u3002<\/p>\n<p>\u305d\u306e\u305f\u3081\u3001\u3053\u308c\u3089\u306e Memory \u95a2\u9023\u306e\u95a2\u6570\u306b\u3064\u3044\u3066\u300c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u60aa\u3044\u304c\u30d0\u30a4\u30c8\u30b5\u30a4\u30ba\u306e\u5c0f\u3055\u3044\u5b9f\u88c5\u300d\u3092\u5225\u306b\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306f\u81ea\u7531\u306b\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u3002<\/p>\n<p>\u3053\u306e\u300c\u30d0\u30a4\u30c8\u30b5\u30a4\u30ba\u304c\u5c0f\u3055\u3044\u5b9f\u88c5\u300d\u3092\u4f7f\u3046\u306b\u306f Cargo.toml \u3068\u3044\u3046 Rust \u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u7de8\u96c6\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u304c\u3001\u672c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u306f\u8a73\u7d30\u306f\u7701\u7565\u3059\u308b\u3002<\/p>\n<p>\u6b21\u306f\u3001main_js \u3068\u3044\u3046\u95a2\u6570\u306e\u6700\u521d\u306e\u90e8\u5206\u306b\u6ce8\u76ee\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ This is like the `main` function, except for JavaScript.<\/span>\r\n<span class=\"nd\">#[wasm_bindgen(start)]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">main_js<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JsValue<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"o\">...<\/span>\r\n<\/code><\/pre>\n<p>\u4eca\u307e\u3067\u306e\u30c7\u30e2\u3067\u306f\u95a2\u6570\u306e\u4e0a\u306b #[wasm_bindgen] \u3068\u8a18\u8f09\u3057\u3066\u3044\u305f\u304c\u3001\u3053\u306e\u95a2\u6570\u306e\u4e0a\u306b\u306f #[wasm_bindgen(start)] \u3068\u66f8\u3044\u3066\u3042\u308b\u3002<\/p>\n<p>\u3053\u306e\u3088\u3046\u306b (start) \u3068\u66f8\u304f\u3068\u3001rust-webpack \u304c\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u3068\u304d\u306b pkg\/index.js \u306e\u4e2d\u3067\u3053\u306e\u95a2\u6570\u3092\u5b9f\u884c\u3057\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>\u4eca\u307e\u3067\u52d5\u4f5c\u78ba\u8a8d\u306e\u969b\u306b\u300c npm run start \u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u305f\u5f8c\u3001\u5225\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u8d77\u52d5\u3057\u3066 pkg\/index.js \u3092\u7de8\u96c6\u300d\u3068\u3044\u3046\u4f5c\u696d\u3092\u884c\u3063\u3066\u3044\u305f\u304c\u3001\u3053\u306e\u6a5f\u80fd\u3092\u7528\u3044\u308c\u3070\u3053\u3093\u306a\u4e8b\u3092\u3059\u308b\u5fc5\u8981\u306f\u7121\u3044\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u3001\u95a2\u6570 main_js \u306e\u4e2d\u306e\u4e0b\u8a18\u306e\u884c\u306b\u6ce8\u76ee\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"c1\">\/\/ Your code goes here!<\/span>\r\n    <span class=\"nn\">console<\/span><span class=\"p\">::<\/span><span class=\"nf\">log_1<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"nn\">JsValue<\/span><span class=\"p\">::<\/span><span class=\"nf\">from_str<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello world!\"<\/span><span class=\"p\">));<\/span>\r\n<\/code><\/pre>\n<p>\u4eca\u307e\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3067\u306f JavaScript \u304b\u3089 console.log \u95a2\u6570\u3092\u547c\u3093\u3067\u3044\u305f\u304c\u3001JavaScript \u304b\u3089 WebAssembly \u306b\u95a2\u6570\u3092 export \u3059\u308b\u4e8b\u3067 WebAssembly \u304b\u3089 JavaScript \u306e\u95a2\u6570\u3092\u547c\u3073\u51fa\u3059\u4e8b\u3082\u53ef\u80fd\u3060\u3002<\/p>\n<p>console.log \u306e\u3088\u3046\u306a JavaScript \u306e\u4ee3\u8868\u7684\u306a\u95a2\u6570\u306f\u3001\u6700\u521d\u304b\u3089\u305d\u306e\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u6e96\u5099\u3055\u308c\u3066\u3044\u308b\u3002<\/p>\n<p>\u300c&#8221;Hello world!&#8221; \u3068\u3044\u3046\u6587\u5b57\u5217\u3092 JavaScript \u306e String \u306b\u5909\u63db\u3057\u3066 console.log \u3067\u8868\u793a\u3059\u308b\u300d\u3068\u3044\u3046\u4e8b\u3092 1 \u884c\u3067\u884c\u3063\u3066\u3044\u308b\u306e\u3060\u3002<\/p>\n<h1>Canvas \u3092\u7528\u3044\u3066\u56f3\u5f62\u3092\u63cf\u304f<\/h1>\n<p>\u8868\u984c\u306e\u901a\u308a\u3001HTML \u306e Canvas \u306b WebAssembly \u304b\u3089\u56f3\u5f62\u3092\u66f8\u3044\u3066\u307f\u308b\u3002<br \/>\n\u306a\u304a\u3001\u3053\u306e\u7ae0\u81ea\u4f53\u306f\u5927\u3057\u305f\u4e8b\u306f\u8a00\u3063\u3066\u3044\u306a\u3044\u3002<br \/>\nJavaScript \u3092\u66f8\u304d\u306a\u308c\u3066\u3044\u306a\u3044\u4eba\u306f\u30b6\u30c3\u30af\u30ea\u3068\u659c\u3081\u306b\u8aad\u3093\u3067\u307b\u3057\u3044\u3002<\/p>\n<p>\u3044\u3064\u3082\u306e\u901a\u308a\u3001\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>triangle\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>triangle\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<\/code><\/pre>\n<p>\u6b21\u306b\u3001\u4eca\u307e\u3067\u7a7a\u767d\u3060\u3063\u305f html \u306b canvas \u3092\u8a2d\u7f6e\u3059\u308b\u3002<\/p>\n<p>static\/index.html \u3092\u4e0b\u8a18\u306e\u69d8\u306b\u5909\u66f4\u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html&gt;<\/span>\r\n  <span class=\"nt\">&lt;head&gt;<\/span>\r\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;title&gt;<\/span>My Rust + Webpack project!<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\r\n  <span class=\"nt\">&lt;body&gt;<\/span>\r\n    <span class=\"nt\">&lt;canvas<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"canvas\"<\/span> <span class=\"na\">tabindex=<\/span><span class=\"s\">\"0\"<\/span> <span class=\"na\">height=<\/span><span class=\"s\">\"200\"<\/span> <span class=\"na\">width=<\/span><span class=\"s\">\"200\"<\/span><span class=\"nt\">&gt;<\/span>Your browser does not support the canvas.<span class=\"nt\">&lt;\/canvas&gt;<\/span>\r\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"index.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u884c\u3063\u305f\u3053\u3068\u306f\u3001canvas \u30bf\u30b0\u3092\u633f\u5165\u3057\u305f\u3060\u3051\u3060\u3002<\/p>\n<p>\u305d\u306e\u5f8c src\/lib.rs \u3092\u4e00\u56de\u5168\u3066\u524a\u9664\u3057\u3001\u4e0b\u8a18\u306e\u5185\u5bb9\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"n\">JsCast<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ This is like the `main` function, except for JavaScript.<\/span>\r\n<span class=\"nd\">#[wasm_bindgen(start)]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">main_js<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JsValue<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">window<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nf\">window<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">document<\/span> <span class=\"o\">=<\/span> <span class=\"n\">window<\/span><span class=\"nf\">.document<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">canvas<\/span> <span class=\"o\">=<\/span> <span class=\"n\">document<\/span>\r\n        <span class=\"nf\">.get_element_by_id<\/span><span class=\"p\">(<\/span><span class=\"s\">\"canvas\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">HtmlCanvasElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">context<\/span> <span class=\"o\">=<\/span> <span class=\"n\">canvas<\/span>\r\n        <span class=\"nf\">.get_context<\/span><span class=\"p\">(<\/span><span class=\"s\">\"2d\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">CanvasRenderingContext2d<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.move_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">100.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.begin_path<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">200.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">200.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">200.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">100.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.close_path<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.stroke<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.fill<\/span><span class=\"p\">();<\/span>\r\n\r\n    <span class=\"nf\">Ok<\/span><span class=\"p\">(())<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u307e\u305f\u3001\u4eca\u56de\u306f Rust \u3067\u4f7f\u7528\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u8a2d\u5b9a\u3092\u5c11\u3057\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/p>\n<p>\u5177\u4f53\u7684\u306b\u306f\u3001Cargo.toml \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u306e [dependencies.web-sys] \u306e features \u3068\u3044\u3046\u9805\u76ee\u3092\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5909\u66f4\u3059\u308b\u3002<\/p>\n<p>\u3053\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f Rust \u306e\u7d39\u4ecb\u3067\u306f\u306a\u3044\u306e\u3067\u3001\u8a73\u7d30\u306f\u8aac\u660e\u3057\u306a\u3044\u3002<br \/>\n\u5143\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u306e diff \u7d50\u679c\u3060\u3051\u8cbc\u308a\u4ed8\u3051\u3066\u304a\u304f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>diff <span class=\"nt\">-U<\/span> 2 Cargo.toml.back Cargo.toml\r\n@@ <span class=\"nt\">-34<\/span>,7 +34,7 @@\r\n <span class=\"o\">[<\/span>dependencies.web-sys]\r\n version <span class=\"o\">=<\/span> <span class=\"s2\">\"0.3.22\"<\/span>\r\n<span class=\"nt\">-features<\/span> <span class=\"o\">=<\/span> <span class=\"o\">[<\/span><span class=\"s2\">\"console\"<\/span><span class=\"o\">]<\/span>\r\n+features <span class=\"o\">=<\/span> <span class=\"o\">[<\/span><span class=\"s2\">\"Window\"<\/span>, <span class=\"s2\">\"Document\"<\/span>, <span class=\"s2\">\"HtmlCanvasElement\"<\/span>, <span class=\"s2\">\"CanvasRenderingContext2d\"<\/span><span class=\"o\">]<\/span>\r\n\r\n <span class=\"c\"># The `console_error_panic_hook` crate provides better debugging of panics by<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e\u72b6\u614b\u3067 npm run start \u3068\u5b9f\u884c\u3059\u308b\u3068\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306a\u4e09\u89d2\u5f62\u304c\u8868\u793a\u3055\u308c\u308b\u3060\u308d\u3046\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/215-0.png\" alt=\"triangle.png\" \/><\/div>\n<p>\u4ee5\u4e0b\u3001Rust \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u8981\u70b9\u3060\u3051\u3092\u8aac\u660e\u3059\u308b\u3002<\/p>\n<p>\u307e\u305a\u4e0b\u8a18\u306e\u884c\u306b\u6ce8\u76ee\u3057\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ This is like the `main` function, except for JavaScript.<\/span>\r\n<span class=\"nd\">#[wasm_bindgen(start)]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">main_js<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JsValue<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"o\">...<\/span>\r\n<\/code><\/pre>\n<p>Hello World \u306e\u3088\u3046\u306b\u3001\u95a2\u6570\u306e\u4e0a\u306b #[wasm_bindgen(start)] \u3068\u3064\u3051\u305f\u3002<br \/>\n\u306a\u306e\u3067\u3001\u3053\u306e\u30c7\u30e2\u306f npm run start \u3068\u5b9f\u884c\u3059\u308c\u3070\u4e09\u89d2\u5f62\u304c\u8868\u793a\u3055\u308c\u305f\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u3001\u4e0b\u8a18\u306e\u884c\u3060\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">let<\/span> <span class=\"n\">window<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nf\">window<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u3053\u3067\u306f JavaScript \u306e window \u3092\u53d6\u5f97\u3057\u3066\u3044\u308b\u3002<br \/>\n\u95a2\u6570 console.log \u540c\u69d8\u306b\u3001\u3053\u308c\u306f library \u3067\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u3002<\/p>\n<p>\u884c\u306e\u6700\u5f8c\u306e unwrap() \u3068\u3044\u3046\u306e\u306f Rust \u306e\u30a8\u30e9\u30fc\u51e6\u7406\u95a2\u6570\u3067\u3042\u308a\u3001\u3042\u307e\u308a\u6c17\u306b\u3057\u306a\u3044\u3067\u3088\u3044\u3002<br \/>\n\u3053\u3053\u3067\u306f\u300c\u30a8\u30e9\u30fc\u304c\u3042\u3063\u305f\u3089\u5373\u7d42\u4e86\u300d\u3068\u3044\u3046\u610f\u5473\u3060\u3068\u89e3\u91c8\u3057\u3066\u307b\u3057\u3044\u3002<\/p>\n<p>\uff08\u30d6\u30e9\u30a6\u30b6\u30fc\u304b\u3089\u5b9f\u884c\u3059\u308b JavaScript \u3067 window \u304c\u53d6\u5f97\u3067\u304d\u306a\u3044\u3068\u3044\u3046\u4e8b\u306f\u901a\u5e38\u3067\u306f\u8003\u3048\u3089\u308c\u306a\u3044\u304c\u3001WebAssembly \u3067\u306f\u3053\u306e VM \u304c JavaScript \u304b\u3089\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u4e8b\u306a\u3069\u306f\u78ba\u8a8d\u3067\u304d\u306a\u3044\u306e\u3067\u30a8\u30e9\u30fc\u51e6\u7406\u304c\u5fc5\u8981\u306b\u306a\u308b\u3002\uff09<\/p>\n<p>\u3053\u306e\u884c\u306e\u3059\u3050\u4e0b\u3067\u306f\u3001\u540c\u69d8\u306b document, canvas, context \u3092\u53d6\u5f97\u3057\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">let<\/span> <span class=\"n\">window<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nf\">window<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">document<\/span> <span class=\"o\">=<\/span> <span class=\"n\">window<\/span><span class=\"nf\">.document<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">canvas<\/span> <span class=\"o\">=<\/span> <span class=\"n\">document<\/span>\r\n        <span class=\"nf\">.get_element_by_id<\/span><span class=\"p\">(<\/span><span class=\"s\">\"canvas\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">HtmlCanvasElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">context<\/span> <span class=\"o\">=<\/span> <span class=\"n\">canvas<\/span>\r\n        <span class=\"nf\">.get_context<\/span><span class=\"p\">(<\/span><span class=\"s\">\"2d\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">CanvasRenderingContext2d<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n<\/code><\/pre>\n<p>\u304a\u305d\u3089\u304f\u3001JavaScript \u3092\u5c11\u3057\u304b\u3058\u3063\u305f\u4e8b\u304c\u6709\u308c\u3070\u3069\u306e\u5909\u6570\u540d\u3082\u898b\u899a\u3048\u304c\u3042\u308b\u3060\u308d\u3046\u3002<\/p>\n<p>1 \u70b9\u6ce8\u610f\u3060\u304c\u3001 .get_element_by_id(&#8220;canvas&#8221;) \u7b49\u306e method \u5b9f\u884c\u306b\u304a\u3044\u3066\u5f15\u6570\u3067 &#8220;canvas&#8221; \u3068\u3044\u3046\u6587\u5b57\u5217\u304c\u6e21\u3055\u308c\u3066\u3044\u308b\u3002<br \/>\n\u3053\u306e\u969b\u306f\u5185\u90e8\u7684\u306b Rust \u306e String \u304b\u3089 JavaScript \u306e String \u306e\u5909\u63db\u304c\u884c\u308f\u308c\u3066\u3044\u308b\u4e8b\u3092\u660e\u8a18\u3057\u3066\u304a\u304f\u3002<br \/>\n\u3053\u306e\u69d8\u306a\u95a2\u6570\u3092\u30eb\u30fc\u30d7\u3067\u983b\u7e41\u306b\u547c\u3073\u51fa\u3057\u305f\u5834\u5408\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u3082\u7121\u304f\u306f\u7121\u3044\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001\u3053\u3053\u3067\u53d6\u5f97\u3057\u305f context \u3092\u4f7f\u3063\u3066\u4e09\u89d2\u5f62\u3092\u8868\u793a\u3057\u3066\u3044\u308b\u3002<br \/>\n\u7d30\u304b\u3044\u3053\u3068\u306f\u6c17\u306b\u305b\u305a\u3001\u300clibrary \u3067\u7528\u610f\u3055\u308c\u305f\u65b9\u6cd5\u3067 JavaScript \u306e\u95a2\u6570\u3092\u547c\u3093\u3067\u3044\u308b\u3060\u3051\u300d\u3068\u89e3\u91c8\u3057\u3066\u826f\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"n\">context<\/span><span class=\"nf\">.move_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">100.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.begin_path<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">200.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">200.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">200.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.line_to<\/span><span class=\"p\">(<\/span><span class=\"mf\">100.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.close_path<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.stroke<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">context<\/span><span class=\"nf\">.fill<\/span><span class=\"p\">();<\/span>\r\n<\/code><\/pre>\n<h1>Canvas \u3092\u7528\u3044\u3066\u753b\u50cf\u3092\u8868\u793a\u3059\u308b<\/h1>\n<p>\u5148\u307b\u3069\u306e\u56f3\u5f62\u8868\u793a\u3068\u7570\u306a\u308a\u3001\u753b\u50cf\u8868\u793a\u306f\u8272\u3005\u3068\u554f\u984c\u304c\u6709\u308b\u3002<br \/>\n\u300c\u4f55\u3067\u3082 WebAssembly \u3092\u4f7f\u3048\u3070\u826f\u3044\u3068\u3044\u3046\u4e8b\u3067\u306f\u7121\u3044\u300d\u3068\u3044\u3046\u60aa\u3044\u4f8b\u3068\u3057\u3066\u7d39\u4ecb\u3059\u308b\u3002<\/p>\n<p>\u56f3\u5f62\u63cf\u753b\u306e\u30c7\u30e2\u3068\u540c\u69d8\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3066 \/static\/index.html \u3092\u7de8\u96c6\u3059\u308b\u3002<br \/>\n\/static\/index.html \u306e\u5185\u5bb9\u306f\u5148\u307b\u3069\u3068\u540c\u3058\u3060\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>show_image\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>show_image\r\n<span class=\"nv\">$ <\/span>npm init rust-webpack\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html&gt;<\/span>\r\n  <span class=\"nt\">&lt;head&gt;<\/span>\r\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;title&gt;<\/span>My Rust + Webpack project!<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\r\n  <span class=\"nt\">&lt;body&gt;<\/span>\r\n    <span class=\"nt\">&lt;canvas<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"canvas\"<\/span> <span class=\"na\">tabindex=<\/span><span class=\"s\">\"0\"<\/span> <span class=\"na\">height=<\/span><span class=\"s\">\"200\"<\/span> <span class=\"na\">width=<\/span><span class=\"s\">\"200\"<\/span><span class=\"nt\">&gt;<\/span>Your browser does not support the canvas.<span class=\"nt\">&lt;\/canvas&gt;<\/span>\r\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"index.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u6b21\u306b\u3001Cargo.toml \u3092\u7de8\u96c6\u3059\u308b\u3002<br \/>\n\u3053\u308c\u306f\u91cd\u8981\u3067\u306f\u7121\u3044\u306e\u3067\u4eca\u56de\u3082 diff \u306e\u7d50\u679c\u3060\u3051\u8868\u793a\u3059\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>diff <span class=\"nt\">-U<\/span> 3 Cargo.toml.back Cargo.toml\r\n@@ <span class=\"nt\">-24<\/span>,6 +24,8 @@\r\n <span class=\"c\"># The `wasm-bindgen` crate provides the bare minimum functionality needed<\/span>\r\n <span class=\"c\"># to interact with JavaScript.<\/span>\r\n wasm-bindgen <span class=\"o\">=<\/span> <span class=\"s2\">\"0.2.45\"<\/span>\r\n+futures <span class=\"o\">=<\/span> <span class=\"s2\">\"0.3.28\"<\/span>\r\n+wasm-bindgen-futures <span class=\"o\">=<\/span> <span class=\"s2\">\"0.4.35\"<\/span>\r\n\r\n <span class=\"c\"># `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size<\/span>\r\n <span class=\"c\"># compared to the default allocator's ~10K. However, it is slower than the default<\/span>\r\n@@ <span class=\"nt\">-34<\/span>,7 +36,7 @@\r\n <span class=\"c\"># like the DOM.<\/span>\r\n <span class=\"o\">[<\/span>dependencies.web-sys]\r\n version <span class=\"o\">=<\/span> <span class=\"s2\">\"0.3.22\"<\/span>\r\n<span class=\"nt\">-features<\/span> <span class=\"o\">=<\/span> <span class=\"o\">[<\/span><span class=\"s2\">\"console\"<\/span><span class=\"o\">]<\/span>\r\n+features <span class=\"o\">=<\/span> <span class=\"o\">[<\/span><span class=\"s2\">\"Window\"<\/span>, <span class=\"s2\">\"Document\"<\/span>, <span class=\"s2\">\"HtmlCanvasElement\"<\/span>, <span class=\"s2\">\"CanvasRenderingContext2d\"<\/span>, <span class=\"s2\">\"HtmlImageElement\"<\/span><span class=\"o\">]<\/span>\r\n\r\n <span class=\"c\"># The `console_error_panic_hook` crate provides better debugging of panics by<\/span>\r\n <span class=\"c\"># logging them with `console.error`. This is great for development, but requires<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u5f8c\u306b src\/lib.rs \u3092\u4e00\u56de\u5168\u3066\u524a\u9664\u3057\u3001\u4e0b\u8a18\u306e\u5185\u5bb9\u3067 \u4e0a\u66f8\u304d \u3059\u308b\u3002<br \/>\n\uff08\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u4e2d\u306e URL_TO_IMAGE \u306f\u9069\u5b9c\u8a2d\u5b9a\u3057\u3066\u307b\u3057\u3044\u3002\uff09<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"n\">futures<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"nn\">prelude<\/span><span class=\"p\">::<\/span><span class=\"o\">*<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">wasm_bindgen<\/span><span class=\"p\">::<\/span><span class=\"n\">JsCast<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ This is like the `main` function, except for JavaScript.<\/span>\r\n<span class=\"nd\">#[wasm_bindgen(start)]<\/span>\r\n<span class=\"k\">pub<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">main_js<\/span><span class=\"p\">()<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JsValue<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">window<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nf\">window<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">document<\/span> <span class=\"o\">=<\/span> <span class=\"n\">window<\/span><span class=\"nf\">.document<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">canvas<\/span> <span class=\"o\">=<\/span> <span class=\"n\">document<\/span>\r\n        <span class=\"nf\">.get_element_by_id<\/span><span class=\"p\">(<\/span><span class=\"s\">\"canvas\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">HtmlCanvasElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">context<\/span> <span class=\"o\">=<\/span> <span class=\"n\">canvas<\/span>\r\n        <span class=\"nf\">.get_context<\/span><span class=\"p\">(<\/span><span class=\"s\">\"2d\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"py\">.dyn_into<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"n\">CanvasRenderingContext2d<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n\r\n    <span class=\"nn\">wasm_bindgen_futures<\/span><span class=\"p\">::<\/span><span class=\"nf\">spawn_local<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"k\">move<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">let<\/span> <span class=\"n\">image<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nn\">HtmlImageElement<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n\r\n        <span class=\"k\">let<\/span> <span class=\"p\">(<\/span><span class=\"n\">tx<\/span><span class=\"p\">,<\/span> <span class=\"n\">rx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">futures<\/span><span class=\"p\">::<\/span><span class=\"nn\">channel<\/span><span class=\"p\">::<\/span><span class=\"nn\">oneshot<\/span><span class=\"p\">::<\/span><span class=\"nn\">channel<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">()<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\r\n\r\n        <span class=\"k\">let<\/span> <span class=\"n\">callback<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">Closure<\/span><span class=\"p\">::<\/span><span class=\"nf\">once<\/span><span class=\"p\">(<\/span><span class=\"k\">move<\/span> <span class=\"p\">||<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"n\">tx<\/span><span class=\"nf\">.send<\/span><span class=\"p\">(())<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"p\">});<\/span>\r\n        <span class=\"n\">image<\/span><span class=\"nf\">.set_onload<\/span><span class=\"p\">(<\/span><span class=\"nf\">Some<\/span><span class=\"p\">(<\/span><span class=\"n\">callback<\/span><span class=\"nf\">.as_ref<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unchecked_ref<\/span><span class=\"p\">()));<\/span>\r\n\r\n        <span class=\"n\">image<\/span><span class=\"nf\">.set_src<\/span><span class=\"p\">(<\/span><span class=\"s\">\"URL_TO_IMAGE\"<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"n\">rx<\/span><span class=\"k\">.await<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n\r\n        <span class=\"n\">context<\/span>\r\n            <span class=\"nf\">.draw_image_with_html_image_element<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"n\">image<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">});<\/span>\r\n\r\n    <span class=\"nf\">Ok<\/span><span class=\"p\">(())<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5148\u307b\u3069\u306e\u56f3\u5f62\u63cf\u753b\u306e\u4f8b\u3068\u540c\u69d8\u306b\u3001Rust \u3067\u95a2\u6570 main_js \u3092\u5b9a\u7fa9\u3057\u3066\u3044\u308b\u3002<br \/>\nmain_js \u306e\u4e2d\u8eab\u3082\u3001\u524d\u534a\u306f\u5148\u307b\u3069\u3068\u5168\u304f\u540c\u3058\u3067\u3042\u308b\u3002<\/p>\n<p>\u9055\u3044\u306f main_js \u306e\u5f8c\u534a\u3001\u4e0b\u8a18\u306e\u90e8\u5206\u304b\u3089\u59cb\u307e\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"nn\">wasm_bindgen_futures<\/span><span class=\"p\">::<\/span><span class=\"nf\">spawn_local<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"k\">move<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"o\">...<\/span>\r\n    <span class=\"p\">});<\/span>\r\n<\/code><\/pre>\n<p>Rust \u3067\u3082\u8fd1\u5e74 async \u69cb\u6587\u3068\u3044\u3046\u7269\u304c\u51fa\u6765\u305f\u3002<br \/>\nJavaScript \u306f image \u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306f\u5fc5\u305a\u975e\u540c\u671f\u3067\u884c\u308f\u308c\u308b\u306e\u3067 Rust \u3067\u3082\u660e\u793a\u7684\u306b async \u69cb\u6587\u3092\u66f8\u304f\u5fc5\u8981\u304c\u6709\u308b\u3002<\/p>\n<p>\u305f\u3060\u3001\u4eca\u56de\u9762\u5012\u306a\u306e\u304c async \u30a8\u30f3\u30b8\u30f3\u304c JavaScript \u306e\u7269\u3067\u3042\u308b\u4e8b\u3060\u3002<br \/>\n\uff08\u901a\u5e38 Rust \u3067 async \u69cb\u6587\u3092\u4f7f\u3046\u6642\u306f\u3001\u305d\u306e\u30a8\u30f3\u30b8\u30f3\u3082 Rust \u3067\u4f5c\u3089\u308c\u3066\u3044\u308b\u3002\uff09<\/p>\n<p>JavaScript \u306e async \u306f Rust \u306e\u90fd\u5408\u306a\u3069\u77e5\u3089\u306a\u3044\u306e\u3067\u5f8c\u3067\u554f\u984c\u306b\u306a\u3063\u3066\u304f\u308b\u3002<\/p>\n<p>\u6b21\u306b\u3001async \u69cb\u6587\u306e\u4e2d\u8eab\u3092\u898b\u3066\u307f\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"k\">let<\/span> <span class=\"n\">image<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">web_sys<\/span><span class=\"p\">::<\/span><span class=\"nn\">HtmlImageElement<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"o\">...<\/span>\r\n\r\n        <span class=\"n\">image<\/span><span class=\"nf\">.set_src<\/span><span class=\"p\">(<\/span><span class=\"s\">\"URL_TO_IMAGE\"<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"o\">...<\/span>\r\n\r\n        <span class=\"n\">context<\/span>\r\n            <span class=\"nf\">.draw_image_with_html_image_element<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"n\">image<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.0<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u9014\u4e2d\u3092\u7701\u7565\u3057\u3066\u3044\u308b\u304c\u3001\u3053\u3053\u306f JavaScript \u306e\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u308b\u3060\u3051\u3060\u3002<\/p>\n<p>\u305f\u3060\u3057\u3001\u63cf\u753b\u3059\u308b\u524d\u306b URL \u306e\u753b\u50cf\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u7d42\u308f\u308b\u307e\u3067\u5f85\u3064\u5fc5\u8981\u304c\u6709\u308b\u3002<br \/>\n\u305d\u308c\u306f\u7701\u7565\u3055\u308c\u305f\u90e8\u5206\u3067\u3084\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u308c\u304b\u3089\u89e3\u8aac\u3059\u308b\u3002<\/p>\n<p>\u307e\u305a\u300c\u3069\u3046\u3084\u3063\u3066\u753b\u50cf\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u5f85\u3064\u304b\uff1f\u300d\u3068\u3044\u3046\u554f\u984c\u3060\u304c\u3001\u3053\u308c\u306f JavaScript \u306e image \u306b\u5bfe\u3057\u3066 onload \u306e\u8a2d\u5b9a\u3092\u3059\u308b\u3057\u304b\u306a\u3044\u3060\u308d\u3046\u3002<\/p>\n<p>\u7701\u7565\u3055\u308c\u305f\u90e8\u5206\u3092\u898b\u3066\u307f\u3088\u3046\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"k\">let<\/span> <span class=\"p\">(<\/span><span class=\"n\">tx<\/span><span class=\"p\">,<\/span> <span class=\"n\">rx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">futures<\/span><span class=\"p\">::<\/span><span class=\"nn\">channel<\/span><span class=\"p\">::<\/span><span class=\"nn\">oneshot<\/span><span class=\"p\">::<\/span><span class=\"nn\">channel<\/span><span class=\"p\">::<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">()<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\r\n\r\n        <span class=\"k\">let<\/span> <span class=\"n\">callback<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">Closure<\/span><span class=\"p\">::<\/span><span class=\"nf\">once<\/span><span class=\"p\">(<\/span><span class=\"k\">move<\/span> <span class=\"p\">||<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"n\">tx<\/span><span class=\"nf\">.send<\/span><span class=\"p\">(())<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"p\">});<\/span>\r\n        <span class=\"n\">image<\/span><span class=\"nf\">.set_onload<\/span><span class=\"p\">(<\/span><span class=\"nf\">Some<\/span><span class=\"p\">(<\/span><span class=\"n\">callback<\/span><span class=\"nf\">.as_ref<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unchecked_ref<\/span><span class=\"p\">()));<\/span>\r\n\r\n        <span class=\"n\">image<\/span><span class=\"nf\">.set_src<\/span><span class=\"p\">(<\/span><span class=\"s\">\"URL_TO_IMAGE\"<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"n\">rx<\/span><span class=\"k\">.await<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n<\/code><\/pre>\n<p>Rust \u306e\u8a00\u8a9e\u4ed5\u69d8\u3084\u4e26\u884c\u51e6\u7406\u306b\u3064\u3044\u3066\u6df1\u304f\u8a9e\u308b\u3064\u3082\u308a\u306f\u7121\u3044\u3002<br \/>\n\u6700\u521d\u306e<br \/>\nlet (tx, rx) = futures::channel::oneshot::channel::&lt;()&gt;();<br \/>\n\u3068\u3044\u3046\u884c\u306f Lock \u3092\u7372\u5f97\u3057\u3066\u3044\u308b\u3068\u8003\u3048\u3066\u307b\u3057\u3044\u3002<\/p>\n<p>\u6b21\u306e\u884c\u3067\u306f\u4e0a\u8a18\u306e\u30ed\u30c3\u30af\u3092\u89e3\u653e\u3059\u308b closure\uff08\u95a2\u6570\u306e\u69d8\u306b\u5b9f\u884c\u3067\u304d\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u307f\u305f\u3044\u306a\u7269\uff09\u3092\u4f5c\u6210\u3057\u3066 callback \u3068\u3044\u3046\u5909\u6570\u306b\u4fdd\u5b58\u3057\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"k\">let<\/span> <span class=\"n\">callback<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">Closure<\/span><span class=\"p\">::<\/span><span class=\"nf\">once<\/span><span class=\"p\">(<\/span><span class=\"k\">move<\/span> <span class=\"p\">||<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"n\">tx<\/span><span class=\"nf\">.send<\/span><span class=\"p\">(())<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"p\">});<\/span>\r\n<\/code><\/pre>\n<p>\u3068\u3053\u308d\u3067\u3001\u4e00\u898b\u306a\u3093\u306e\u5909\u54f2\u3082\u306a\u3044\u4e0a\u8a18\u306e 3 \u884c\u3060\u304c\u3001JavaScript, Rust, WebAssembly \u306e\u5168\u3066\u306e\u4ed5\u69d8\u4e0a\u3067\u554f\u984c\u304c\u51fa\u3066\u306f\u3044\u3051\u306a\u3044\u3002<br \/>\n\u3053\u3053\u3067\u306f\u8a73\u7d30\u306f\u66f8\u304b\u306a\u3044\u304c\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4e2d\u8eab\u3092\u898b\u308b\u3068\u3001\u304b\u306a\u308a\u8907\u96d1\u3060\u3002<\/p>\n<p>\u30c7\u30d0\u30c3\u30b0\u306f\u3084\u308a\u305f\u304f\u306a\u3044\u3002<br \/>\n\u500b\u4eba\u7684\u306b\u306f WebAssembly \u3068\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u3067 closure \u306e\u53d7\u3051\u6e21\u3057\u3092\u3059\u308b\u306e\u306f\u63a7\u3048\u305f\u3044\u3068\u3053\u308d\u3060\u3002<\/p>\n<p>\u6c17\u3092\u53d6\u308a\u76f4\u3057\u3066\u3001\u6b21\u306e\u884c\u3092\u898b\u3066\u307f\u308b\u3002<\/p>\n<p>image.set_onload(Some(callback.as_ref().unchecked_ref()));<br \/>\n\u3060\u304c\u3001\u3053\u3053\u3067\u306f JavaScript \u306b image \u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u7d42\u4e86\u3057\u305f\u3089\u4e0a\u8a18\u306e callback \u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u3060\u3051\u3060\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001image \u306e URL \u3092\u8a2d\u5b9a\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u958b\u59cb\u3057\u3001\u5148\u307b\u3069\u7372\u5f97\u3057\u305f Lock \u3092\u518d\u5ea6\u7372\u5f97\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"post-pre\"><code>        <span class=\"n\">image<\/span><span class=\"nf\">.set_src<\/span><span class=\"p\">(<\/span><span class=\"s\">\"URL_TO_IMAGE\"<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"n\">rx<\/span><span class=\"k\">.await<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n<\/code><\/pre>\n<p>\u666e\u901a\u306f Lock \u3092\u78ba\u4fdd\u3057\u305f\u72b6\u614b\u3067\u540c\u3058 Lock \u3092\u518d\u3073\u78ba\u4fdd\u3057\u3088\u3046\u3068\u3059\u308b\u3068 DeadLock \u304c\u8d77\u304d\u308b\u304c\u3001\u4eca\u56de\u306f image \u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u7d42\u4e86\u3057\u305f\u3089 Lock \u3092\u89e3\u653e\u3059\u308b closure \u3092\u5b9f\u884c\u3059\u308b\u3088\u3046 JavaScript \u3067\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>\u3053\u308c\u306b\u3066\u300cimage \u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5b8c\u4e86\u3092\u5f85\u3064\u300d\u3068\u3044\u3046\u30bf\u30b9\u30af\u304c\u5b8c\u4e86\u3059\u308b\u3002<\/p>\n<h2>image \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306e\u4f55\u304c\u554f\u984c\u304b\uff1f<\/h2>\n<p>\u3055\u3066\u3001Rust \u3067\u306f\u5909\u6570\u3092\u6700\u5f8c\u306b\u4f7f\u3063\u305f\u5f8c\u306b\u30c7\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u6709\u308b\u3002<br \/>\n\u554f\u984c\u306b\u306a\u308b\u306e\u306f\u4e0a\u8a18\u306e callback \u3068\u3044\u3046\u5909\u6570\u3060\u3002<\/p>\n<p>callback \u3092\u6700\u5f8c\u306b\u4f7f\u3046\u306e\u306f\u8ab0\u3060\u308d\u3046\uff1f<br \/>\n\u305d\u308c\u306f JavaScript \u3067\u3042\u308b\u3002<br \/>\nJavaScript \u306e\u975e\u540c\u671f\u30a8\u30f3\u30b8\u30f3\u8d8a\u3057\u306b\u3001\u3044\u3064\u5b9f\u884c\u3055\u308c\u308b\u304b\u5206\u304b\u3089\u306a\u3044 closure \u306e\u30c7\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u3092\u8d70\u3089\u305b\u308b\u3068\u3044\u3046\u306e\u306f\u81f3\u96e3\u306e\u696d\u3067\u3042\u308b\u3002<\/p>\n<p>\u5b9f\u969b\u306b\u3001\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u30c7\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u306f\u8d70\u3089\u306a\u3044\u306e\u3067 Memory Leak \u304c\u8d77\u304d\u308b\u3002<br \/>\n\u79c1\u306e\u77e5\u8b58\u3067\u306f\u3001\u3053\u306e Memory Leak \u3092\u9632\u3050\u65b9\u6cd5\u306f\u7c21\u5358\u306b\u306f\u601d\u3044\u3064\u304b\u306a\u304b\u3063\u305f\u3002<\/p>\n<p>nodejs \u3067\u306f WeakRef \u3068\u3044\u3046 class \u304c\u5b58\u5728\u3059\u308b\u3002<br \/>\n\u305d\u308c\u3092\u4f7f\u3048\u3070 Memory Leak \u3092\u9632\u3050\u4e8b\u306f\u51fa\u6765\u308b\u306e\u3060\u304c\u3001WeakRef \u306f nodejs \u306e\u72ec\u81ea\u4ed5\u69d8\u3067\u3042\u308a JavaScript \u3067\u306f\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u3002<\/p>\n<h1>\u8a2d\u8a08\u30ec\u30d9\u30eb\u3067\u898b\u76f4\u305d\u3046<\/h1>\n<p>\u7b46\u8005\u306f WebAssembly \u306e\u5b66\u7fd2\u3092\u521d\u3081\u3066\u65e5\u304c\u6d45\u304f\u3001\u672c\u683c\u7684\u306a\u958b\u767a\u3092\u3057\u305f\u4e8b\u304c\u7121\u3044\u3002<br \/>\n\u4ee5\u4e0b\u306f WebAssembly \u30a8\u30a2\u30d7\u306e\u611f\u60f3\u306a\u306e\u3067\u3001\u4f55\u304b\u610f\u898b\u306e\u3042\u308b\u6642\u306f\u300c\u3084\u3055\u3057\u304f\u300d\u3054\u6307\u6458\u3044\u305f\u3060\u304d\u305f\u3044\u3002<\/p>\n<p>\u5148\u307b\u3069\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306e\u4ef6\u3060\u304c\u3001\u540c\u69d8\u306e\u73fe\u8c61\u306f\u30ed\u30fc\u30ab\u30eb\u30d5\u30a1\u30a4\u30eb \u306e IO \u3084 DB \u3068\u306e\u901a\u4fe1\u3001\u30de\u30a6\u30b9\u30af\u30ea\u30c3\u30af\u306e\u30a4\u30d9\u30f3\u30c8\u5f85\u3061\u306a\u3069\u3067\u3082\u767a\u751f\u3059\u308b\u3002<\/p>\n<p>\u3069\u3046\u5bfe\u5fdc\u3059\u308b\u3079\u304d\u3060\u308d\u3046\u304b\uff1f<\/p>\n<p>closure \u3092\u4f7f\u3044\u56de\u305b\u3070 Leak \u3059\u308b Memory \u91cf\u306f\u7121\u8996\u51fa\u6765\u308b\u307b\u3069\u5c0f\u3055\u304f\u306a\u308b\u3060\u308d\u3046\u3057\u3001JavaScript \u306e\u4ed5\u69d8\u306b WeakRef \u304c\u5165\u308b\u306e\u3092\u5f85\u3063\u3066\u3082\u826f\u3044\u3002<\/p>\n<p>\u305f\u3060\u3001\u305d\u3082\u305d\u3082\u8ad6\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306e\u70ba\u3060\u3051\u306b\u7570\u306a\u308b VM \u9593\u3092\u884c\u3063\u305f\u308a\u6765\u305f\u308a\u3057\u306a\u304c\u3089\u4ed6\u8a00\u8a9e\u306e\u30a8\u30f3\u30b8\u30f3\u3092\u4f7f\u3063\u3066\u975e\u540c\u671f\u51e6\u7406\u3092\u884c\u3046\u4e8b\u304c\u3001\u7b46\u8005\u306b\u306f\u3069\u3046\u3057\u3066\u3082\u826f\u3044\u8a2d\u8a08\u3068\u306f\u601d\u3048\u306a\u3044\u306e\u3060\u3002<\/p>\n<h2>\u60aa\u3044\u8a2d\u8a08\u4f8b<\/h2>\n<p>\u4ed6\u306e\u8a00\u8a9e \uff08\u4f8b\u3048\u3070 C# \u3084 PHP \u7b49\uff09\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u6642\u3001\u305d\u306e\u5168\u4f53\u8a2d\u306f\u4e0b\u8a18\u306e\u69d8\u306a Layer \u69cb\u9020\u306b\u306a\u3063\u3066\u3044\u308b\u4e8b\u306f\u7121\u3044\u3060\u308d\u3046\u304b\uff1f<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/277-0.png\" alt=\"program_layers.png\" \/><\/div>\n<p>\u6700\u521d\u306b main \u95a2\u6570\u304c\u547c\u3070\u308c\u308b\u3002\u5834\u5408\u306b\u4f9d\u3063\u3066\u306f\u76f4\u3050\u306b Framework \u95a2\u6570\u304c\u547c\u3070\u308c\u308b\u3060\u308d\u3046\u3002<br \/>\n\u79c1\u305f\u3061\u306f\u305d\u306e\u4e2d\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u3002<\/p>\n<p>\u79c1\u305f\u3061\u304c\u66f8\u304f\u30b3\u30fc\u30c9\u304b\u3089\u306f\u3001library \u3060\u3063\u305f\u308a Framework \u306e\u95a2\u6570\u3060\u3063\u305f\u308a\u3001\u7269\u7406\u3084\u30b2\u30fc\u30e0\u306e Engine \u3092\u547c\u3073\u51fa\u3059\u3002<\/p>\n<p>\u305d\u306e\u3055\u3089\u306b\u4e0b\u306b\u306f IO \u306b\u4ee3\u8868\u3055\u308c\u308b\u3088\u3046\u306a\u74b0\u5883\u306b\u4f9d\u5b58\u3059\u308b\u90e8\u5206\u304c\u6765\u308b\u3060\u308d\u3046\u3002<br \/>\n\uff08\u4eca\u56de\u306f Platform \u3068\u66f8\u3044\u305f\u3002\uff09<\/p>\n<p>\u4f8b\u3048\u3070 Web \u30b7\u30b9\u30c6\u30e0\u3067 RDB \u3092 MySQL \u304b\u3089 SQLServer \u306b\u5909\u66f4\u3057\u305f\u308a\u3001\u30b2\u30fc\u30e0\u4f1a\u793e\u304c\u5bb6\u5ead\u7528\u30b2\u30fc\u30e0\u6a5f\u7248\u3068 PC \u7248\u3092\u540c\u6642\u306b\u30ea\u30ea\u30fc\u30b9\u51fa\u6765\u305f\u308a\u3059\u308b\u306e\u306f\u3001\u3053\u306e\u90e8\u5206\u3092\u4e0a\u624b\u304f\u62bd\u8c61\u5316\u3057\u3066\u3044\u308b\u304b\u3089\u3060\u3002<\/p>\n<p>\u3053\u306e\u69cb\u9020\u3092\u305d\u306e\u307e\u307e\u306b\u3001 Your Code \u306e\u90e8\u5206\u3092 WebAssembly \u3067\u66f8\u304d\u63db\u3048\u3088\u3046\u3068\u3059\u308b\u3068\u5acc\u306a\u4e8b\u304c\u8d77\u3053\u308b\u6c17\u304c\u3059\u308b\u3002<\/p>\n<p>\u306a\u305c\u306a\u3089 main \u5c64\u3068 Platform \u5c64\u306f\u7d76\u5bfe\u306b\u5225\u8a00\u8a9e\uff08\u4eca\u56de\u306f JavaScript\uff09\u306b\u306a\u308b\u304b\u3089\u3060\u3002<br \/>\n\u305d\u306e\u4e0a\u4e0b\u306e\u8a00\u8a9e\u306f 1 \u3064\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3060\u304b\u3089\u3001\u3042\u308b\u7a0b\u5ea6\u306f\u871c\u7d50\u5408\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3002<br \/>\n\u5bfe\u3057\u3066 WebAssembly \u306e\u30b3\u30fc\u30c9\u306f\u5143\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3068\u306f\u3001\u3042\u308b\u7a0b\u5ea6\u758e\u7d50\u5408\u306b\u306a\u308b\u3002<br \/>\n\u4e0a\u4e0b\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3068\u306f\u898f\u683c\u4e0a\u3067\u8a31\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u901a\u3055\u306a\u3044\u3068\u901a\u4fe1\u3067\u304d\u306a\u3044\u3002<\/p>\n<p>\u5404\u30ec\u30a4\u30e4\u30fc\u306f\u30ed\u30b8\u30c3\u30af\u30ec\u30d9\u30eb\u3067\u306f\u4f55\u3068\u306a\u304f\u5206\u304b\u308c\u3066\u3044\u308b\u304c\u3001\u30e1\u30e2\u30ea\u7ba1\u7406\u306e\u30ec\u30d9\u30eb\u3067\u898b\u308b\u3068\u871c\u7d50\u5408\u3067\u3042\u308b\u3002<br \/>\n\u305d\u306e\u4e00\u90e8\u3092\u7121\u7406\u3084\u308a\u5225\u306e VM \u3068\u3057\u3066\u30e1\u30e2\u30ea\u3092\u5206\u3051\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u5236\u9650\u3059\u308b\u3068\u3044\u3046\u306e\u306f\u7121\u7406\u304c\u3042\u308b\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001\u4eca\u56de\u306f\u88cf\u3067\u975e\u540c\u671f IO \u3082\u52d5\u3044\u3066\u3044\u308b\u3002<br \/>\n\u3053\u308c\u306f\u8a2d\u8a08\u30ec\u30d9\u30eb\u3067\u898b\u76f4\u3057\u305f\u307b\u3046\u304c\u826f\u3044\u306e\u3067\u306f\u306a\u3044\u304b\uff1f<\/p>\n<h2>Haskell \u306b\u5b66\u307c\u3046<\/h2>\n<p>Haskell \u3067\u306f\u3001IO \u3068\u305d\u308c\u4ee5\u5916\u3092\u5f37\u5236\u7684\u306b\u5206\u3051\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306a\u69cb\u9020\u3068\u306a\u308b\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/288-0.png\" alt=\"haskell_architecture.png\" \/><\/div>\n<p>Haskell \u306e\u95a2\u6570\u306f\u3001\u5927\u304d\u304f IO \u3068\u3001\u305d\u308c\u4ee5\u5916\uff08\u3053\u3053\u3067\u306f Logic \u3068\u8868\u73fe\uff09\u306b\u5206\u304b\u308c\u308b\u3002<br \/>\n\u56f3\u306b\u306f\u8a18\u8f09\u3057\u3066\u3044\u306a\u3044\u304c\u3001main \u95a2\u6570\u3082 IO \u3060\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001IO \u304b\u3089\u306f IO \u3068 Logic \u306e\u4e21\u65b9\u306e\u95a2\u6570\u3092\u547c\u3076\u4e8b\u306f\u3067\u304d\u308b\u304c\u3001Logic \u304b\u3089 IO \u3092\u547c\u3076\u4e8b\u306f\u51fa\u6765\u306a\u3044\u3002<br \/>\n\u3053\u306e\u4e0a\u3067\u51fa\u6765\u308b\u3060\u3051\u30b3\u30fc\u30c9\u3092 IO \u304b\u3089 Logic \u306b\u79fb\u3059\u306e\u304c Haskell \u306e\u826f\u3044\u8a2d\u8a08\u3068\u8a00\u308f\u308c\u3066\u3044\u308b\u3002<\/p>\n<h3>Haskell \u578b\u8a2d\u8a08\u306e\u826f\u3044\u6240<\/h3>\n<p>\u7b46\u8005\u306f\u3053\u306e Haskell \u306e\u69d8\u306a\u8a2d\u8a08\u306f\u7f8e\u3057\u3044\u3068\u601d\u3046\u3002<\/p>\n<p>\u300c\u526f\u4f5c\u7528\u306e\u7121\u3044\u7d14\u7c8b\u306a\u95a2\u6570\u3068\u3001\u305d\u308c\u4ee5\u5916\u306e\u90e8\u5206\u306b\u5206\u3051\u3088\u3046\u3002\u51fa\u6765\u308b\u3060\u3051\u7d14\u7c8b\u306a\u95a2\u6570\u306e\u91cf\u3092\u5897\u3084\u305d\u3046\u3002\u300d\u3068\u8a00\u3046\u65b9\u91dd\u306f\u3001\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u304c\u805e\u3044\u305f\u3053\u3068\u304c\u6709\u308b\u3060\u308d\u3046\u3002<\/p>\n<p>\u3053\u308c\u306f\u9006\u306b\u300c\u526f\u4f5c\u7528\u306e\u6709\u308b\u95a2\u6570\u3092\u5206\u3051\u3066\u3001\u51fa\u6765\u308b\u3060\u3051\u526f\u4f5c\u7528\u306e\u6709\u308b\u95a2\u6570\u3092\u6e1b\u3089\u305d\u3046\u300d\u3068\u3082\u8a00\u3048\u308b\u3002<br \/>\nIO \u3068\u3044\u3046\u306e\u306f\u526f\u4f5c\u7528\u306e\u584a\u306e\u69d8\u306a\u7269\u3067\u3042\u308b\u3002<br \/>\nHaskell \u306f\u3053\u308c\u3092\u5f37\u5236\u7684\u306b\u5206\u3051\u3066\u3044\u308b\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u3053\u306e\u8a2d\u8a08\u3092\u4ed6\u306e\u8a00\u8a9e\u3067\u5b9f\u65bd\u3059\u308b\u306e\u306f\u7c21\u5358\u3067\u306f\u7121\u3044\u3002<br \/>\n\u7406\u7531\u306f\u8907\u6570\u8003\u3048\u3089\u308c\u308b\u304c\u3001\u4f8b\u3048\u3070\u300cIO \u3068 Logic \u3092\u5206\u3051\u308b\u4e8b\u304c\u7c21\u5358\u3067\u306f\u306a\u3044\u300d\u3068\u3044\u3046\u7269\u304c\u3042\u3052\u3089\u308c\u308b\u3002<\/p>\n<p>Haskell \u4ee5\u5916\u306e\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u3067\u306f\u95a2\u6570\u306b IO \u306e\u5b9f\u884c\u7981\u6b62\u3092\u51fa\u6765\u306a\u3044\u306e\u3060\u3002<\/p>\n<h3>WebAssembly \u3067 Haskell \u578b\u8a2d\u8a08<\/h3>\n<p>\u7b46\u8005\u306f\u524d\u8ff0\u306e Haskell \u578b\u306e\u56f3\u306b\u304a\u3044\u3066 Logic \u306e\u90e8\u5206\u3092 WebAssembly \u3067\u8a18\u8f09\u3059\u308b\u65b9\u5f0f\u3092\u63d0\u6848\u3057\u305f\u3044\u3002<\/p>\n<p>\u307e\u305a\u3001Haskell \u578b\u8a2d\u8a08\u304c\u4ed6\u8a00\u8a9e\u3067\u3042\u307e\u308a\u63a1\u7528\u3055\u308c\u306a\u3044\u7406\u7531\u3068\u3057\u3066\u300cIO \u3068 Logic \u3092\u5206\u3051\u308b\u4e8b\u304c\u7c21\u5358\u3067\u306f\u306a\u3044\u300d\u3068\u3044\u3046\u4f8b\u3092\u6319\u3052\u305f\u304c\u3001WebAssembly \u306f\u672c\u6765\u306f IO \u3092\u51fa\u6765\u306a\u3044\u3002<br \/>\n\u4f55\u3082\u3057\u306a\u3051\u308c\u3070 Haskell \u540c\u69d8\u3001\u5f37\u5236\u7684\u306b\u5206\u3051\u3089\u308c\u3066\u3044\u308b\u306e\u3060\u3002<\/p>\n<p>\u307e\u305f\u3001Haskell \u578b\u306e\u8a2d\u8a08\u306f\u524d\u8ff0\u306e Layer \u69cb\u9020\u306e\u6b20\u70b9\u3092\u5168\u3066\u89e3\u6c7a\u3057\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>Layer \u69cb\u9020\u3067\u306f WebAssembly \u306e\u4e0a\u4e0b\u3092\u4ed6\u8a00\u8a9e\u306b\u631f\u307e\u308c\u3066\u3044\u305f\u304c\u3001Haskell \u578b\u306e\u8a2d\u8a08\u3067\u306f\u4ed6\u8a00\u8a9e\u306f\u4e0a\u3060\u3051\u3060\u3002<br \/>\n\u305d\u306e\u4ed6\u3001async \u304c\u4f7f\u308f\u308c\u308b\u306e\u306f IO \u306b\u95a2\u308f\u308b\u6642\u3060\u3051\u3060\u3002<br \/>\nWebAssembly \u304b\u3089 IO \u3092\u884c\u308f\u306a\u3051\u308c\u3070 JavaScript \u306e async \u306b\u60d1\u308f\u3055\u308c\u308b\u4e8b\u3082\u7121\u3044\u3002<\/p>\n<h2>JavaScript + WebAssembly (Rust) \u306e\u8a2d\u8a08\u7d50\u8ad6<\/h2>\n<p>\u8272\u3005\u3068\u96e3\u3057\u3044\u4e8b\u3092\u66f8\u3044\u305f\u304c\u3001\u95a2\u6570\u547c\u3073\u51fa\u3057\u65b9\u306b\u6c17\u3092\u4ed8\u3051\u308b\u4e8b\u304b\u3089\u59cb\u3081\u3088\u3046\u3068\u601d\u3046\u3002<br \/>\n\u4ee5\u4e0b\u3001\u7b46\u8005\u306e\u72ec\u65ad\u3068\u504f\u898b\u3067\u554f\u984c\u7121\u3044\u65b9\u304b\u3089\u9806\u306b\u8ff0\u3079\u3066\u3044\u304f\u3002<\/p>\n<h3>WebAssembly -&gt; Webassembly \u547c\u3073\u51fa\u3057<\/h3>\n<p>\u5168\u304f\u554f\u984c\u304c\u7121\u3044\u3002<br \/>\n\u3053\u308c\u304c\u4e00\u756a\u826f\u3044\u3002<\/p>\n<h3>JavaScript -&gt; WebAssembly \u547c\u3073\u51fa\u3057\uff08\u5f15\u6570\u3001\u623b\u308a\u5024\u306f\u6570\u5024\u304b String\uff09<\/h3>\n<p>\u5f15\u6570\u3084\u623b\u308a\u5024\u304c\u6570\u5024\uff08WebAssembly \u306e Primitive \u578b\uff09\u304b String \u3067\u3042\u308c\u3070\u6c17\u306b\u3059\u308b\u3053\u3068\u306f\u7121\u3044\u3060\u308d\u3046\u3002<br \/>\nString \u306a\u3089 JavaScript \u4ee5\u5916\u306e\u8a00\u8a9e\u3067\u3082\u4f7f\u3048\u308b\u3060\u308d\u3046\u304b\u3089\u30dd\u30fc\u30bf\u30d3\u30ea\u30c6\u30a3\u30fc\u306e\u554f\u984c\u3082\u5c11\u306a\u3044\u3002<br \/>\njson \u3092\u4f7f\u3048\u3070\u8907\u96d1\u306a\u30c7\u30fc\u30bf\u306e\u53d7\u3051\u6e21\u3057\u3082\u51fa\u6765\u308b\u3002<\/p>\n<p>\u552f\u4e00\u306e\u61f8\u5ff5\u70b9\u306f String \u306e\u578b\u5909\u63db\u306b\u4f34\u3046\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3060\u3002<br \/>\n\u30eb\u30fc\u30d7\u3067\u4f55\u56de\u3082\u547c\u3073\u51fa\u3059\u5834\u5408\u306f\u5de5\u592b\u304c\u5fc5\u8981\u304b\u3082\u3057\u308c\u306a\u3044\u3002<\/p>\n<p>\u86c7\u8db3\u3060\u304c\u3001JavaScript \u3068 WebAssembly \u3092\u307e\u305f\u304c\u308b\u95a2\u6570\u547c\u3073\u51fa\u3057\u306b\u306f\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u5b58\u5728\u3059\u308b\u3002<br \/>\n\u3053\u306e\u4e8b\u3092\u6ce8\u610f\u559a\u8d77\u3059\u308b\u4eba\u3082\u5c45\u308b\u3088\u3046\u3060\u3002<br \/>\n\u305f\u3060\u3001\u7b46\u8005\u304c\u81ea\u5206\u306e PC \u3067\u6e2c\u5b9a\u3057\u305f\u3068\u3053\u308d\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u306f 100 \u4e07\u56de\u3042\u305f\u308a\u7d04 50 ms \u3060\u3063\u305f\u3002<br \/>\n\u3042\u307e\u308a\u6c17\u306b\u3059\u308b\u5fc5\u8981\u306f\u7121\u3044\u3068\u601d\u3046\u3002<\/p>\n<h3>JavaScript -&gt; JavaScript \u547c\u3073\u51fa\u3057<\/h3>\n<p>\u3053\u308c\u3082\u554f\u984c\u306f\u7121\u3044\u3002<br \/>\n\u305f\u3060\u3001\u51fa\u6765\u308b\u4e8b\u306a\u3089\u3070 WebAssembly \u3067\u66f8\u304d\u305f\u3044\u3068\u500b\u4eba\u7684\u306b\u306f\u8003\u3048\u3066\u3044\u308b\u3002<\/p>\n<h3>JavaScript -&gt; WebAssembly \u306e\u547c\u3073\u51fa\u3057\uff08\u5f15\u6570\u3001\u623b\u308a\u5024\u306b Rust \u306e String \u4ee5\u5916\u306e struct \u3092\u542b\u3080\uff09<\/h3>\n<p>\u3053\u308c\u306b\u3064\u3044\u3066\u306f\u3001\u81ea\u5206\u306e\u4e2d\u3067\u7d50\u8ad6\u304c\u51fa\u305b\u306a\u3044\u3067\u3044\u308b\u3002<\/p>\n<p>\u300cJavaScript \u3067\u4f7f\u3044\u7d42\u308f\u3063\u305f\u5f8c\u3001\u5fd8\u308c\u305a\u306b free \u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u300d\u3068\u3044\u3046\u306e\u306f\u53e4\u304d\u60aa\u304d C \u8a00\u8a9e\u3068\u4f3c\u3066\u304a\u308a\u3001\u3042\u307e\u308a\u306b\u3082\u4e0d\u4fbf\u3060\u3002<\/p>\n<p>\u305f\u3060 rust-webpack \u3067\u306f JavaScript \u3067 WebAssembly \u3092\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u304c\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u3059\u308b\u4e8b\u3082\u53ef\u80fd\u3060\u3002<br \/>\n\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u3059\u308b\u5834\u5408\u3001\u540c\u3058 WebAssembly VM \u3092\u8907\u6570\u7acb\u3061\u4e0a\u3052\u308b\u4e8b\u304c\u53ef\u80fd\u306b\u306a\u308b\u3002<\/p>\n<p>\u300cWebAssembly \u304b\u3089 Rust \u306e Struct \u3092\u8fd4\u3059\u300d\u306a\u3093\u3066\u4e8b\u3092\u3059\u308b\u304b\u3089\u300c\u5fd8\u308c\u305a\u306b free \u3092\u3059\u308b\u300d\u306a\u3093\u3066\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u306e\u3067\u306f\u306a\u3044\u304b\uff1f<\/p>\n<p>\u300cWebAssembly \u3067\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3067\u306f\u7121\u304f\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306b\u4fdd\u7ba1\u3059\u308b\u3002JavaScript \u3067\u306f VM \u81ea\u4f53\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u3057\u3066\u4f7f\u3044\u3001\u4f7f\u3044\u7d42\u308f\u3063\u305f\u3089 GC \u306b\u7247\u3065\u3051\u3066\u3082\u3089\u3046\u300d\u3068\u3044\u3046\u65b9\u6cd5\u3092\u4f7f\u3048\u3070\u591a\u304f\u306e\u5834\u5408\u306f\u89e3\u6c7a\u3059\u308b\u3068\u601d\u3046\u3002<\/p>\n<p>rust-webpack \u306f\u4f55\u3067\u3053\u3093\u306a\u8a2d\u8a08\u306b\u3057\u305f\u3093\u3060\u308d\u3046\u304b\uff1f<\/p>\n<h3>WebAssembly -&gt; JavaScript \u306e\u547c\u3073\u51fa\u3057\uff08async \u306f\u95a2\u9023\u3057\u306a\u3044\uff09<\/h3>\n<p>\u500b\u4eba\u7684\u306b\u306f\u7f8e\u3057\u304f\u306a\u3044\u3068\u601d\u3063\u3066\u3057\u307e\u3046\u3002<br \/>\n\u3067\u3082\u3001\u5b9f\u969b\u306b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u4e8b\u306b\u306a\u3063\u305f\u3089\u5fc5\u8981\u60aa\u3068\u3057\u3066\u76ee\u3092\u3064\u3076\u308b\u304b\u3082\u3057\u308c\u306a\u3044\u3002<\/p>\n<h3>WebAssembly \u306e closure \u3092 JavaScript \u306b\u6e21\u3059<\/h3>\n<p>\u3084\u308a\u305f\u304f\u306a\u3044\u3002<\/p>\n<p>\u524d\u8ff0\u3057\u305f\u304c\u3001closure \u306f WebAssembly, Rust, JavaScript \u3068 3 \u7a2e\u985e\u306e\u4ed5\u69d8\u306b\u4f9d\u5b58\u3059\u308b\u3002<br \/>\n\u4e00\u898b\u4fbf\u5229\u306a Library \u3082\u5b58\u5728\u3059\u308b\u304c\u3001\u4e2d\u8eab\u306f\u975e\u5e38\u306b\u9762\u5012\u3060\u3002<\/p>\n<p>\u4f55\u304b\u306e\u4ed5\u69d8\u304c\u5909\u66f4\u3055\u308c\u305f\u969b\u3001\u3069\u3053\u304b\u306e Library \u304c\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3055\u308c\u305f\u969b\u3001\u30e6\u30fc\u30b6\u30fc\u306e Browser \u3067\u30c8\u30e9\u30d6\u30eb\u304c\u767a\u751f\u3057\u305f\u969b\u306b\u5bfe\u5fdc\u3067\u304d\u308b\u81ea\u4fe1\u304c\u7121\u3044\u3002<\/p>\n<h3>WebAssembly -&gt; JavaScript \u306e\u547c\u3073\u51fa\u3057\uff08async \u304c\u95a2\u9023\u3059\u308b\uff09<\/h3>\n<p>\u3084\u308a\u305f\u304f\u306a\u3044\u3002<br \/>\n\u3084\u308b\u610f\u5473\u304c\u5206\u304b\u3089\u306a\u3044\u3002<\/p>\n<p>\u305d\u3082\u305d\u3082 WebAssembly (Rust) \u3092\u4f7f\u3046\u306e\u306f JavaScript \u3088\u308a\u901f\u3044\u3068\u304b\u3001JavaScript \u3088\u308a Rust \u306e\u65b9\u304c\u7c21\u5358\u3068\u304b\u3001\u305d\u3046\u3044\u3046\u7406\u7531\u3060\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u672c\u4ef6\u306b\u3064\u3044\u3066\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u306f IO \u306a\u306e\u3067\u5909\u308f\u3089\u306a\u3044\u3057 JavaScript \u3060\u3051\u3067\u66f8\u3044\u305f\u65b9\u304c\u7c21\u5358\u3060\u3002<\/p>\n<h1>\u7d50\u8ad6<\/h1>\n<p>\u524d\u56de\u306e\u5fa9\u7fd2\u3067\u8ff0\u3079\u305f\u3088\u3046\u306b\u3001WebAssembly \u306e\u4f7f\u3044\u65b9\u3068\u3057\u3066\u306f\u5927\u304d\u304f\u4e0b\u8a18\u306e 2 \u901a\u308a\u306e\u65b9\u6cd5\u304c\u3042\u308b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">WebAssembly \u3067\u306f System Call \u3092\u4f7f\u308f\u306a\u3044\u90e8\u5206\u306e\u30b3\u30fc\u30c9\u3060\u3051\u3092\u8a18\u8f09\u3001\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u304b\u3089\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u69d8\u306b\u4f7f\u7528\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">System Call \u3092\u5b9f\u884c\u3059\u308b\u5916\u90e8\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u95a2\u6570\u3092 WebAssembly \u306b Export \u3057\u3001WebAssembly \u304b\u3089\u305d\u308c\u3089\u306e\u95a2\u6570\u3092\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc\u306e\u69d8\u306b\u5b9f\u884c\u3059\u308b<\/ul>\n<p>\u79c1\u306e\u898b\u305f\u7bc4\u56f2\u3067\u306f\u3001\u4e16\u306e\u4e2d\u306e\u6f6e\u6d41\u3068\u3057\u3066\u306f 2 \u756a\u76ee\u306e\u65b9\u6cd5\u3092\u53d6\u308b\u65b9\u5411\u306b\u6d41\u308c\u3066\u3044\u308b\u6c17\u304c\u3059\u308b\u3002<br \/>\nRust \u3068 JavaScript \u5468\u308a\u306e\u30c4\u30fc\u30eb\u3082\u3001\u305d\u306e\u3088\u3046\u306a\u65b9\u91dd\u3067\u958b\u767a\u304c\u9032\u3093\u3067\u3044\u308b\u3088\u3046\u306b\u601d\u3048\u308b\u3002<\/p>\n<p>\u305f\u3060\u3001\u79c1\u306f\u500b\u4eba\u7684\u306b\u306f 1 \u756a\u76ee\u306e\u65b9\u6cd5\u3067 Haskell \u578b\u306e\u8a2d\u8a08\u3092\u3059\u308b\u65b9\u304c\u597d\u304d\u3060\u3002<br \/>\n\u4f55\u3068\u304b\u5dfb\u304d\u8fd4\u305b\u306a\u3044\u304b\u306a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebAssembly \u306f\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u306b\u5bfe\u5fdc\u53ef\u80fd\u306a VM \u306e\u898f\u683c\u3067\u3042\u308a\u3001\u5916\u90e8\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u304b\u3089\u547c\u3073\u51fa [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-45148","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>- Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:description\" content=\"WebAssembly \u306f\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u306b\u5bfe\u5fdc\u53ef\u80fd\u306a VM \u306e\u898f\u683c\u3067\u3042\u308a\u3001\u5916\u90e8\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u304b\u3089\u547c\u3073\u51fa [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-01T23:48:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-28T16:13:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/20-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u96c5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u96c5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/\",\"name\":\"- Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2024-01-01T23:48:06+00:00\",\"dateModified\":\"2024-04-28T16:13:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\",\"name\":\"\u79d1, \u96c5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u96c5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"- Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/","og_locale":"zh_CN","og_type":"article","og_description":"WebAssembly \u306f\u591a\u304f\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u306b\u5bfe\u5fdc\u53ef\u80fd\u306a VM \u306e\u898f\u683c\u3067\u3042\u308a\u3001\u5916\u90e8\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u304b\u3089\u547c\u3073\u51fa [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2024-01-01T23:48:06+00:00","article_modified_time":"2024-04-28T16:13:41+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5cce37434c4406cefa4d\/20-0.png"}],"author":"\u79d1, \u96c5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u96c5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"12 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/","name":"- Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2024-01-01T23:48:06+00:00","dateModified":"2024-04-28T16:13:41+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a","name":"\u79d1, \u96c5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","caption":"\u79d1, \u96c5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/45148-2\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=45148"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45148\/revisions"}],"predecessor-version":[{"id":67495,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45148\/revisions\/67495"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=45148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=45148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=45148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}