$30 off During Our Annual Pro Sale. View Details »

Try Web Assembly for Go!! ~ gopherdojo#3 LT ~

Go Takagi
September 18, 2018

Try Web Assembly for Go!! ~ gopherdojo#3 LT ~

Go Takagi

September 18, 2018
Tweet

More Decks by Go Takagi

Other Decks in Technology

Transcript

  1. ϑϩϯτΤϯυͰ΋
    Go͍ͨ͠!!
    Goಓ৔ #3 LTେձ
    Go Takagi
    @shimastripe

    View Slide

  2. ✦ ໊લ
    • ߴ໦ ߽
    ✦ େֶ
    • ౦ژ޻ۀେֶ M2
    ✴ ϦόʔεΤϯδχΞϦϯά΍ϓϩάϥϜཧղʹؔ͢ΔݚڀγςϚε
    ✦ ීஈ
    • iOS / ϑϩϯτΤϯυपΓ͕جຊ޷͖Ͱ͢
    ✦ SNS
    • GitHub : @shimastripe
    • Twitter : @shimastriper
    • Blog : https://shimastripe.goat.me
    • KyashID: root
    ࣗݾ঺հ


    View Slide

  3. Goಓ৔ɺ໘ന͔ͬͨ!!
    ͔ͤͬͩ͘͠࠷৽ͷGoࣄ৘΋
    ৮ͬͯΈ͍ͨ

    View Slide

  4. WebAssembly
    Go 1.11 adds an experimental port to WebAssembly.

    View Slide

  5. ✦ ϑϩϯτ(ϒϥ΢β)Ͱಈ͘όΠφϦ
    • ϝΠϯ͸jsͰਏ͔ͬͨύϑΥʔϚϯεΛͳΜͱ͔͢Δ
    • αΠζ΋খ͍͞ɺಡΈࠐΈ΋վળ
    ✦ ଟ࠼ͳݴޠ͔Βੜ੒Ͱ͖Δ
    • C/C++/Rust/Go/etc.
    ✴ WebΛλʔήοτʹίϯύΠϧ͢ΔΠϝʔδ
    ✴ ࠓ·Ͱ͸JavaScriptʹม׵͢ΔࢼΈ͕ଟ਺
    ✤ Scala.jsͱ͔GopherJSͱ͔
    Web Assembly


    View Slide

  6. ✦ ͋͘·ͰϝΠϯ͸ܭࢉߴ଎Խ (ܭࢉ଎౓ + file size)
    • ήʔϜͱ͔WebGL ͕͠͹Β͘͸ओ
    ✦ DOMૢ࡞Ͱ͖ͳ͍ (ࠓͷॴ?)
    • GoͰ͸WebAssembly͔ΒJSͷؔ਺Λίʔϧ (import "syscall/js")
    • DOM, EventListenerΛҰԠर͑Δ
    ✦ طଘͷϥΠϒϥϦͱͷ݉Ͷ߹͍
    • JSϑϨʔϜϫʔΫ͕ੵΈ্͛ͨࢿ࢈͸؆୯ʹ͸ख์ͤͳ͍
    ✦ όΠτίʔυ
    • ؆қ೉ಡԽʹ͸ͳΔ͔΋!!
    ۜͷ஄ؙ͔? (JSΛશͯஔ͖׵͑Δ???)


    View Slide

  7. ✦ Document
    • Β͍͠doc͸·ͩͳ͍
    • https://github.com/golang/go/wiki/WebAssembly
    • αϯϓϧίʔυ͕഑෍͞ΕͯΔ

    ͱΓ͋͑ͣ


    $ curl -sO https://raw.githubusercontent.com/golang/go/
    master/misc/wasm/wasm_exec.html
    $ curl -sO https://raw.githubusercontent.com/golang/go/
    master/misc/wasm/wasm_exec.js
    ```main.go
    func main() {
    fmt.Println(“Hello WASM!!”)
    }
    ```

    View Slide

  8. Hello WASM !!
    $ GOOS=js GOARCH=wasm go build -o test.wasm main.go
    $ open wasm_exec.html
    Goͷඪ४ग़ྗ͕console.log͞ΕΔ

    View Slide

  9. ✦ JS→Go͸main͔͠·ͩݺ΂ͳ͍?
    • wasm_exec.js ্Ͱrun(main)͔͠ఆٛ͞Ε͍ͯͳ͍
    ✴ JSଆͷ໰୊͔΋͠Εͳ͍
    ✦ JS→Goଆʹ஋౉ͤΔ?
    • jsͷGo Instanceͷargvʹ஋ΛೖΕΔ
    ✴ os.Args() ͔Βर͑Δ
    ✴ ؀ڥม਺΋͍͚Δ
    ✦ Go→JSʹ஋౉ͤΔ?
    • os.Stdoutʹग़ͨ͠Βconsole.log͞ΕΔ͜ͱ͔͠ݟ౰ͨΒͳ͍…
    • Go͔ΒJSΛcallͯ͠eventListenerʹؔ਺Ληοτ͸Ͱ͖Δ
    Experimental: ͨͿΜ࠷ॳʹͿͪ͋ͨΔ(ͬͨ)͜ͱ


    View Slide

  10. ✦ wasm_exec.js Λ֦ு
    • console.log ͍ͯͨ͠ՕॴΛDOMʹॻ͖ࠐ·ͤΔ
    ✦ Goଆ (shimabot.NotifyTrainInformation())
    • ࣗ෼ͷChatBotͷ౦ٸઢӡߦεΫϦϓτΛbuild
    ✴ ఆظతʹݟʹߦͬͯిं͕ࢭ·ͬͯͳ͍͔֬ೝ
    • JSଆͷnotify()ؔ਺ʹొ࿥͢Δ
    ΋͏গ͠…


    writeSync(fd, buf) {
    outputBuf += decoder.decode(buf);
    const nl = outputBuf.lastIndexOf("\n");
    if (nl != -1) {
    const elm = document.querySelector("#wrapper");
    let div = document.createElement('div');
    div.textContent = outputBuf.substr(0, nl);
    elm.appendChild(div);
    }

    View Slide

  11. ✦ ࣮ߦͰ͖ͨ!!
    • CORS͸֎͞ͳ͍ͱ

    ͍͚ͳ͔ͬͨ
    • ґଘϥΠϒϥϦͰ

    Ϗϧυࣦഊ͕݁ߏ͋Γ…
    ✦ ࢖ͬͯΈͯ
    • APIϦΫΤετ͘Β͍ͳΒׂͱ
    ͦͷ··ಈ͔ͤΔ
    • JSଆ͔ΒGoͷؔ਺Λࢦఆͯ͠
    ݺ΂ΔΑ͏ʹͳΕ͹ศར
    ϒϥ΢β্ͰࣗલGoίʔυͷ࣮ߦ


    View Slide

  12. ✦ Web Assembly
    • ϋΠύϑΥʔϚϯε͕ٻΊΒΕΔΑ͏ʹͳͬͨ

    WebΛࢧ͑ΔͨΊͷόΠφϦΛ༻͍ͨߴ଎Խ
    ✦ Go Web Assembly
    • ·ͩࢼݧ of ࢼݧஈ֊ɻ
    • Goଆͷؔ਺Λׂͱ؆୯ʹϒϥ΢βͰ࣮ߦͰ͖ͨ
    • CLIͰ࡞͖ͬͯͨػೳΛ্ख͘׆༻Ͱ͖ͨΓ͠ͳ͍͔?
    ·ͱΊ


    ͜Ε͔ΒͷAPI࣍ୈ͚ͩͲɺ͍ΖΜͳ࢖͍ํͰ͖ͦ͏!!

    View Slide

  13. ✦ Wiki
    • https://github.com/golang/go/wiki/WebAssembly
    ✦ Tutorial
    • https://www.youtube.com/watch?v=4kBvvk2Bzis
    • https://www.youtube.com/watch?v=iTrx0BbUXI4
    ✦ Blog
    • https://blog.gopheracademy.com/advent-2017/go-wasm/
    • https://www.kabuku.co.jp/developers/go-to-webassembly
    • http://iqeiq.hatenablog.com/entry/2017/12/02/033238
    • https://yhara.jp/2017/12/01/webassembly
    ࢀߟࢿྉ (Ҿ༻)


    View Slide