ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお（^ω^ = ^ω^）

M1 MacでtfjsのWASMをビルドする旅（失敗しました）

概要

  • m1 mac使っているんだけど、tfjsのwasmビルドを試みたら色々死んだ
  • 僕の中の結論はうまくいかない

試みたログ

$ docker run --rm --platform linux/arm64/v8 -it ubuntu:latest /bin/bash

$ apt update -y && \
  apt install -y gcc python3 nodejs npm curl git build-essential


$ cd ~
$ curl -L -o bazel https://github.com/bazelbuild/bazelisk/releases/download/v1.15.0/bazelisk-linux-arm64
$ chmod +x bazel
$ mv bazel /usr/local/bin/

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install 3.1.7
$ ./emsdk activate 3.1.7


$ git clone https://github.com/s0l0ist/bazel-emscripten.git
$ cd bazel-emscripten/
$ npm run build

$ git clone https://github.com/tensorflow/tfjs.git
$ cd tfjs/tfjs-backend-wasm/
$ npm install -g yarn
$ yarn install
$ yarn build

試みのメモ

  • bazelというビルドツールはインストールできる
  • emsdkというemscriptenを利用できるやつがなんかうまく動かない
    • C/C++などの言語をブラウザ上で実行できるようにコンパイルしてくれるやつ（ふわっとした理解）
    • m1 macで動くように改良したっぽいけど、tfjsの対象なバージョンではない？？？
      • 例えば、build inされているnodeのバージョンが多分tfjsと差異があるので、うまくうごかないとか
      • あと、パス周りでうまく設定されない感じ（Pythonでemcc.pyを叩こうとするけど、sandboxディレクトリが作成されないなどの不具合が起こる）

あきらめました

EC2（Intel）立ち上げて、docker上で試しているけどビルドがずっと走っているうれしい（↑は夜なべしたから悲しい）

Cannot use import statement outside a module

Nuxt 
import * as scatter from 'scatter-gl'

↑のように該当　モジュールをimportすると下記エラー

[nuxt] [request error] [unhandled] [500] Cannot use import statement outside a module
  at Object.compileFunction (node:vm:352:18)
  at wrapSafe (node:internal/modules/cjs/loader:1031:15)
  at Module._compile (node:internal/modules/cjs/loader:1065:27)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
  at Module.load (node:internal/modules/cjs/loader:981:32)
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)
  at Module.require (node:internal/modules/cjs/loader:1005:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object.<anonymous> (./node_modules/scatter-gl/dist/scatter_plot.js:42:23)
  at Module._compile (node:internal/modules/cjs/loader:1101:14)

Nuxtv3使っています。

検索すると、typeを追加してとかあるんだけど、ぼくの環境はでは治らなかった。

blog.kimizuka.org

ということで地道に試行錯誤してたら、下記だと読み込めた（動作するかはわからない）

import { ScatterGL } from 'scatter-gl/src/index'

Component inside <Transition> renders non-element root node that cannot be animated.

Vue warn Nuxt

Nuxt3でwarningがでてたので、対応してみた。

www.memory-lovers.blog

マルチルートノードコンポーネントがサポートされたけど、直下はダメらしい。。

なるほど〜〜

というわけで、記事と同様に単一要素に修正したところ消えた。よかった

RailsのN+1対策の話

Ruby Rails

zenn.dev

Rails初心者マンの僕がこの記事をみて思ったこと

  • joinsは？
  • キャッシュの有効期限はどこで設定するんじゃろうか

qiita.com

他の3つとの違いは、associationをキャッシュしないこと。

なるほど

serip39.hatenablog.com

qiita.com

なるほど〜〜〜

あと、関連のスライドもわかりやすかった

speakerdeck.com

  • allしてeachすんな
  • クエリで実行できるのならクエリのほうが速い
  • ActiveRecordオブジェクトの生成コストは高い