Rust Webassembly + Laravel 5, DOM操作する例 #Rust #Webassembly #javascript #php #Laravel
■ 概要:
前の Rust Webassembly (下記 wasm) 関係になり
Laravel5.8 でCRUD実装の、一部表示機能をwasm で実装する例となります。
実装部分は、expressと似ている内容となります。
■ 前の関連ページ, express版
https://note.com/knaka0209/n/n311677aa156a
■ 環境
Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
Laravel 5.8
■ プロジェクト作成、ビルド
cargo generate --git https://github.com/rustwasm/wasm-pack-template
wasm-pack build --target=web
■ 実装など
・Cargo.toml
[package]
name = "wasm-crud-1"
version = "0.1.0"
authors = ["naka"]
edition = "2018"
[lib]
crate-type = ["cdylib", "rlib"]
[features]
default = ["console_error_panic_hook"]
[dependencies]
wasm-bindgen = "0.2.63"
js-sys = "0.3.44"
# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.6", optional = true }
# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.5", optional = true }
[dependencies.web-sys]
version = "0.3.4"
features = [
'console',
'Document',
'Element',
'HtmlElement',
'Node',
'Window',
]
[dev-dependencies]
wasm-bindgen-test = "0.3.13"
[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"
・Rust , lib.rs
id指定し、DOM追加します。
#[wasm_bindgen]
pub fn task_row(id_name: &str, title: &str, id_val: &str) -> Result<(), JsValue>{
let document = web_sys::window().unwrap().document().unwrap();
let entry_point = document.get_element_by_id(id_name).unwrap();
let val = document.create_element("li")?;
let s_title = format!("<h3 class='h3_title'>{}</h3>", title );
let a_title = format!("<a href='/wasm_tasks/{}'>{}</a>", id_val, s_title );
let s_id = format!("<span>ID :{}</span>", id_val );
let btn_edit = format!("<a href='/wasm_tasks/{}/edit'> [ edit ] </a>", id_val );
let s_elm = format!("<div class='div_post_wrap'>{}{}{}<hr /></div>", a_title, s_id ,btn_edit );
//console::log_1(&JsValue::from_str( &s_elm ));
val.set_inner_html(&s_elm );
entry_point.append_child(&val)?;
Ok(())
}
■ Laravel, blade
CRUDリストの画面
resources/views/wasm/tasks/index.blade.php
JS配列から、wasm でDOM追加します。
<script type="module">
import init, * as wasm from '/pkg/wasm_crud_1.js';
var task_items = [];
var TaskIndex = {
get_items: async function(){
await axios.get("/api/apitasks/get_tasks").then(res => {
task_items = res.data
})
this.dispRow();
},
dispRow: async function(){
await init();
if(task_items instanceof Array){
// console.log(task_items );
task_items.map(function(object, index){
wasm.task_row("ul_post_wrap", String(object.title), String(object.id));
})
}
},
}
//
$(function(){
TaskIndex.get_items();
});
</script>
・ルーティング、 web.php
Route::resource('wasm_tasks', 'WasmTaskController');
■ 参考のコード
・Rust コード
・Laravel
この記事が気に入ったらサポートをしてみませんか?