MacOSX에서 WebAssembly를 만져 보았습니다.

Classi Advent Calendar 2016 19일째입니다.
2일 계속해서 다음날에 투고입니다. 구헤에.

쓰는 것

아래 페이지 등을 참고로 WebAssembly에 조금 만져 보았습니다.
WebAssembly를 사용해 보았습니다.

sexpr-wasm이 wast2wasm이 되거나, 곳곳에 변경된 것 같습니다.
현시점에서, 수중의 환경(MacOSX 10.10.5)으로 시험한 결과를 기록해 둡니다.

WebAssembly 정보

WebAssembly 자체에 대해서는, 본가 문서 등.
본가 문서

이쪽도 매우 공부가 되었습니다.
처음부터 시작하는 WebAssembly 입문

고속화의 관점 등 여러가지 있습니다만,
개인적으로는 다양한 언어로 브라우저상에서 동작하는 어플리케이션을 쓸 수 있게 되는 세계에 두근두근하고 있습니다.
(이식은 어렵지만 ...)

환경 준비

Google Chrome Canary

여기 에서 다운로드하여 설치
브라우저를 열면 주소 표시줄에서 chrome://flags/#enable-webassembly에 액세스하여 WebAssembly 기능을 활성화합니다.

llvm

$ brew edit llvm #cmakeのオプションに"-DLLVM_EXPERIMENTAL_TARGETS_TO_BUILD=WebAssembly"を追加
$ brew install llvm --HEAD
$ export PATH=/usr/local/opt/llvm/bin:$PATH

clang

위의 설치에서/usr/local/opt/llvm/bin에 배포되어야합니다.

$ clang -v
clang version 4.0.0 (http://llvm.org/git/clang.git b917c327ed880036a94aeb325aee20297a33702f) (http://llvm.org/git/llvm.git d6878955b884c7965b40208836e96bfa22cac580)
Target: x86_64-apple-darwin14.5.0
Thread model: posix
InstalledDir: /usr/local/opt/llvm/bin

binaryen

$ cd /usr/local/src
$ git clone https://github.com/WebAssembly/binaryen.git
$ cd binaryen/
$ cmake . && make
$ export PATH=/usr/local/src/binaryen/bin:$PATH

wabt (이전 sexpr-wasm-prototype)

$ cd /usr/local/src
$ git clone --recursive https://github.com/WebAssembly/wabt
$ cd wabt/
$ make
$ export PATH=/usr/local/src/wabt/out:$PATH

만져보세요

1.C 코드 준비

# sample.c
int fact(int n) {
    if (n == 0) {
        return 1;
    } else {
        return n * fact(n - 1);
    }
}

2.C 코드를 WebAssembly 바이트 코드로 변환

$ clang -emit-llvm --target=wasm32 -S sample.c        # Cのコード→LLVM IR(sample.ll)
$ llc sample.ll -march=wasm32                         # LLVM IR → アセンブリ(sample.s)
$ s2wasm --allocate-stack 1000 sample.s > sample.wast # アセンブリ → S式(sample.wast)
$ wast2wasm sample.wast -o sample.wasm                # S式 → WebAssemblyバイトコード

3. HTML 소스 준비

자바 스크립트에서 바이트 코드를 분석하기 위해,
이전에는 Wasm.instantiateModule()과 같은 WebAssembly용 메서드를 이용했던 것 같지만,
수중에서 이용하면 ReferenceError: WASM is not defined 라고 분노해 버렸습니다.

이 페이지 에 의하면 WebAssembly.Instance()를 대신 사용할 수 있다는 것.

#sample.html
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>WebAssembly</title>
  <script>
  fetch('sample.wasm')
  .then(response => response.arrayBuffer())
  .then(buffer => WebAssembly.compile(buffer))
  .then(module => {
      const instance = new WebAssembly.Instance(module);
      //0から10までの階乗計算結果をログ出力
      for (var i = 0; i <= 10; i++) {
          console.log(instance.exports.fact(i));
      }
  });
  </script>
  </head>
<body>
</body>
</html>

4. 적당히 HTTP 도약하여 동작 확인한다

OK!

마지막으로

지금 뭔가에 사용할 수있는 물건이 아닐지도 모르지만,
앞으로 할 일과 대응 언어가 늘어나면 점점 즐거워질 것 같습니다.
(유행하면 좋다)

Reference

이 문제에 관하여(MacOSX에서 WebAssembly를 만져 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rsnni/items/c795e0b80d40e6f17ecd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)