개요

Nuxt.js v2.0.0이 릴리스 되었으므로 만져 보았다 【변경점 정리】 의 기사를 읽어 Nuxt v2에서는 Web Assembly가 서포트된 것 같기 때문에, 움직여 보았다.

움직여 보자

Nuxt의 이동 방법은 문서 설치 페이지를 보면 문제 없기 때문에, Nuxt의 이동 방법에 대해서는 그다지 언급하지 않는다.

대화는 WebAssembly 파일을 준비하는 곳에서 시작한다. 라고는 말해도 이번에 놀리는 WebAssembly의 파일은 폭속으로 js로 WebAssembly를 이동 의 기사로 만든 것을 가져온다. 소지의 wasm 파일이 있는 분은 그쪽을 이용해도 좋다고 생각한다.

위의 기사에서 작성된 이하의 3개의 파일을 준비해 이야기를 진행한다. (js_hello_world.d.ts 어쩌면 불필요할지도 모르지만, wasm 출력시에 이하의 3개의 파일이 출력되기 때문에, 우선 3개 준비한다). 이러한 파일의 관계에 대해 설명하면 js_hello_world.js에서 js_hello_world_bg.wasm가 호출됩니다.

js_hello_world_bg.wasm

js_hello_world.js

js_hello_world.d.ts

그런 다음 가져온 파일을 다음 js 폴더에 넣습니다.

-| assets/
----| js/

이제 움직이는 wasm 파일을 준비할 수 있었으므로, 다음은 wasm을 읽을 준비를 한다.

읽어들이는 측에서는, 우선 wasm의 임포트를 기술한다. 단, wasm 파일의 관계성 부분에서 언급했듯이, js_hello_world_bg.wasm 는 js_hello_world.js 안에서 호출되기 때문에, js_hello_world.js 를 읽는 기술을 해 준다.

<script>
...
const myWasmModule = import("~/assets/js/greet/js_hello_world");
...
</script>

이번 이용하는 wasm 파일에 대해서 간단히 설명해 두면, greet()라는 함수가 있어, 인수로서 캐릭터 라인을 건네주면 Hello, {渡した文字列}! 라고 표시하는 alert 모달이 나오게 되어 있다.

이번에는 버튼을 준비하고 클릭하면 alert 모달이 나오도록 한다. 그 때문에, callGreet() 라고 하는 메소드를 준비해, 클릭하면 callGreet()가 움직이는 것과 같은 어플리케이션으로 한다.

뷰측은 다음과 같이 된다. Nuxt의 프로젝트 작성시에 생긴 a 태그를 조금 다시 써 @click="callGreet" 를 더해줄 뿐이다.

...
<div class="links">
  <a
    @click="callGreet"
    class="button--green"
  >click me</a>
</div>
...

클릭시의 동작에 대해서는 이하와 같다. 이쪽도 기본적으로는 Nuxt의 프로젝트 작성시와 변함없이, 조금만 추기를 하고 있을 뿐이다. 모듈은 import() 에 의해 호출하고 있기 때문에, Promise 객체로서 함수를 꺼내 줄 필요가 있다. 그런 다음 검색된 함수에 표시 할 문자열을 전달합니다.

<script>
...
export default {
...
  data() {
    return { 
      myName: 'mk-tool'
    }
  },
  methods: {
    callGreet() {
      myWasmModule.then(myWasmModule => myWasmModule.greet(this.myName));
    },
  },
...
}
</script>

하는 것은 단지 이것뿐이다. 프로젝트를 실행하고 버튼을 누르면 WebAssembly에 의한 모듈이 로드되어 정상적으로 실행되는 것을 알 수 있다.



소스 코드는 GitHub 에 올리고 있습니다.

기타

이번에는 js_hello_world.js를 읽었지만 js_hello_world_bg.wasm를 직접 호출해도 alert 모달이 표시되었습니다. 그러나이 경우 인수 부분에 전달 된 문자열이 표시되지 않았습니다. js_hello_world.js 의 내용을 살펴보면, webassembly의 greet()를 호출해, 받은 인수를 함수에 건네기도 하고 있었기 때문에, 우리 인간은 온순하게 컴파일러가 출력했다 js_hello_world.js 경유로 js_hello_world_bg.wasm 에 액세스했다 쪽이 좋구나, 라고 느꼈다.

wasm 직접 호출

<script>
...
const myWasmModule = import("~/assets/js/greet/js_hello_world_bg");
...
</script>

참고

import()가 Promise를 반환하는 방법
MDN - import

이번과는 그다지 관계는 없지만 wasm의 코드의 실행에 대해서는 이하의 기사가 참고가 되었다.

WebAssembly JavaScript API 사용

WebAssembly 코드 로드 및 실행