#413 フロントを高速化するだけじゃないWebAssembly

2025/12/3 ·

  • こちらの番組はエンジニアの成長は楽しい学びからをもっとに我々が日々学んだことをギャンギャンアウトプットしていくラジオでございますギャンギャンギャンギャンギャンはいということで今日はお便りを読んでいきたいと思いますおー油断していたお便りなんですねはいやっぱお便り読まないとなと思っててそうですねはい本当にそう思いますはいなのでお便りを読んでいくという回でございますはいはいで



  • 2024年10月17日にいただいております申し訳ございません大変1年ちょいだね長かったですちょっと時代変わった説もあるんですけどラジオネーム石の上にも3年さんからですありがとうございます3年待ってくれてるんで多分大丈夫でしょそうですねまだ1年しか待ってないから



  • 感想の部分からいきます以前ウェブエンジニアになりたいというお便りを送って取り上げていただいたものですあれから社内移動がうまくいって今年からウェブエンジニアとして働いていますじゃあもう2年目ですねおめでとうございますつまり去年ですその説はアドバイスいただきありがとうございました現在はリアクトやジャンゴレストフレームワークなどをジャンゴレストフレームワークこれでセットなジャンゴってジャンゴじゃない?わかんないジャンゴレストフレームワーク



  • ジャンゴだと思うけどななるほどレストフレームはこう使用して開発をしていますいつも皆さんのポッドキャストを聞いて勉強させていただいてます直近の略語クイズのマイムなどはその歴史まで知らなかったのでいつも知らない学びをありがとうございますとはいマイム覚えてますかじゅんぺいくんその話をしたのは覚えてるんですけど中身はマルチプルなんだ確かなんかメールエクステンションだったと思うんだよな最後メールから始まってたような気がする



  • はいということでポッドキャストで話してほしいこと最近仕事で3Dモデルをブラウザで扱うことがありウェブアセンブリを使うことがありましたその中でJITやWebGLMingWなどが出てきたのですが正直完璧に理解ができていない状態ですもしよろしければキャッチアップして取り上げていただきたいですよろしくお願いしますよろしくお願いします1年経ったのでキャッチアップした可能性もあるんですけどそうですね全然出てきたワードちょっと僕分かんなかったです例えば



  • 仕事とか違う違うそっちじゃない確かに深い意味では仕事って何なんでしょうみたいな深く考えたいそうだよねだって今働いてないもんねそうかそうか多分あれですよねJITとかWebGLとかGNZWとかその辺ですよね説明していただけると思うんで



  • それはどうかな今日のテーマはですねウェブアセンブリーでございますなぜこれを取り上げたかというとお便りが来たからっていうのもあるんですけど最近ですね僕は学習方法の一環としてですねジェミニをちょっと活用してみようと思ってジェミニの定時タスク知ってます?



  • 定時タスク?あー知らないですあるんですね定時でやってくれる空論みたいなやつがこれはなんかその機能としてUIがあるわけではなくジェミニにお願いしたらやってくれるみたいなやつなんですけどトリガーはじゃあ向こうで日時でやってくれるんですかそうどうやって設定するんですかそれチャットで毎週この時間にやってくれとか毎日この時間にやってねみたいなだけでチャットが更新されてるってこと勝手に



  • その時間になったらその指示をしてくれるって感じじゃないで私がやってる方法としては7年目ウェブエンジニア向け最新技術ニュースを毎日取ってきてもらってるんですよ気になるそれそれは



  • その空論っていうか定時タスクやってもらうチャットルームみたいのをあらかじめ用意している基本多分その依頼をぶん投げたチャットルームで繰り返し処理がされると思うじゃあその定時過ぎたら自分でそこのチャットルームを見に行くっていうこと



  • 一応通知もついてるけどねスマホアプリに通知きたりとかあとはチャット欄に新しいよみたいなマークついてますねへーすごいそんなのできるんだ知らなかったこれ今ちょっと実験的にやってましてニュースはですねまず良くないAI向けのタスクではない



  • つまりなぜ毎日同じニュースが届きますでもそうなんだそれ結構最新今年のとかをちゃんと持ってきてはいる一応プロンプトの内容としては7年目のウェブエンジニア向けのプログラミングに関する最新ニュースは学びになるコンテンツを重複が少なくなるように作成してください



  • 内容は1週間以内に話題になった技術動向とレベルアップに必要な普遍的な知識を盛り込んでくださいフロントバックインフラを幅広く触る難易度の高いウェブアプリケーションをスピーディーに開発できるようになりたいエンジニア向けの内容にしてくださいってやってますだいたいいつもフロントエンドがリアクトサーバーコンポーネントの話が来てたまにそれがウェブアセンブリに変わってバックエンドはマイクロサービスアーキテクチャと



  • バックエンドのウェブアセンブリでレベルアップに必要な知識はドメイン駆動設計とマイクロサービスが来てパフォーマンスとかオブザーバビリティのところでたまに知らないのが飛んでくるみたいなでも大体同じニュースが来るんですよだからあんま向いてるタスクではないなと思いつつ今この定時でやりたいなと思ってるのはPMをやりたいなと思っててジェム繰り返せるなら



  • 1日のカレンダーの予定と1週間先までのカレンダーの予定を読み込んだ上でなんか今日の俺にヒントを与えてくれるチャットを作るのがいいんじゃないかなって今思ってますできそうこれちょっとジェムが動かせるかどうかはやってないんでそれができたら完成なんですけどそういう形でやってるわけなんですよはいはいめっちゃいいでしょっちゅうねウェブアセンブリが来る



  • ニュースでね結構話題だとこいつはなら知るしかないといいですねということで今回はWebアセンブリについて以前ねすごい前にもやったことある気がするんですけどその時は多分ブラウザで動くやつの話をしてたと思うんですよでWebアセンブリは



  • ラストとかで書くことが多いんですけどウェブアセンブリをそのターゲットにしてビルドしますとそうするとブラウザで実行できますとでなんで登場したかっていうとそれは javascript が押せというところで例えば3 d の秒さっきお手当たった3 d の描画とかあとね動画編集ソフトとかうん



  • そういう重たい処理がある系のウェブサービスをブラウザで実行するよっていう時にその重たい計算処理をウェブアセンブリでやったら超早いよっていうその部分をウェブアセンブリに任せて描画とかはJSでやってもらってみたいなのを組み合わせることによってパフォーマンスのいいウェブサイトを作れるぞっていう話をしたような気がしててそれだけではなかったほうなんとそこで止まってる俺



  • そうそれだけではなかったということではいあとそのお便りにもあったジットとかうんWebGLとかうんMingWとかうんなんそれってなったんで詳しくないねWebGL使ってゲームうん動かしたなぐらいのうん記憶しかないそうそういうのも含めて今日はお話をしていこうかなと思っておりますありがとうございますはいそれはアップデートされたもともとあった



  • えーっとねもちろんアップデートされてってるんですけど多分前回話した時にはすでにサーバーサイドのウェブアセンブリーとかはあったと思う知らなかったけど当時でもジェミナイジェミナイジェミナイジェミナイ的にはお前もうカナダ行く準備してじゃねえよお前ちょっとかぶれていこうかなと思ってジェミナイ的には話題だったんですねうんだいぶ話題だったと思う



  • しょっちゅう言われたちなみになんですけど関係ない話になっちゃうんですけどジェミナイって恥ずかしがなくていいんだよジェミナイって勝手にインターネット検索ってするようになってるんですかツール指定したりすると直近3日の記事持ってきてプラスチージも加えると変わってきたりしそうだなと思ったりして



  • なんかAI結構やっぱ直近のニュース苦手なイメージはもともとあるんですよだからこそインターネット検索をもしくはディープリサーチ入れてやると良さげかなと思ったりした次第でしたまずねディープリサーチは定時実行できないですあーなるほどで自動で動いてるタスクがウェブ検索してるかどうかはわからないなるほどなぜならあのー



  • プロンプト投げた時はさ分かるじゃん何してるとか今検索してますとか勝手に動いてるんで分かんないんですよね思考プロセスがでも多分検索してないんじゃないかなっていう気がするそんなかはいそんなかはいそんな印象を受けました同じようなものが出てくるとなるとで一応1週間以内の技術動向を取ってきてねとは言っているプロンプトの中であーそうか言ってましたね



  • もしかしてURLまで指定したらそのサイトから持ってきてくれるのかもしれないけどそこはちょっと求めてるところじゃないからねそんなら自分でRSSで見るわっていうすいません差し込みましたはいということでまず簡単なWebアセンブリとは何だったんぞやという基礎のお話からしていきましょうさっき言った通りブラウザで動くJS以外のスクリプト言語スクリプト言語ではないなバイナリーですバイナリー



  • JSがやっぱ重たいとウェブはどんどんリッチになってるのにJSってやっぱね仕様を変えにくいんですよ影響すごそうだねだからあれって絶対に後方互換性前方互換性後方ですねとりあえず過去のコードがずっと動くように回収されてってるんですよなのでそこを簡単に抜本的に変えるってこともできないとってなったら新しい



  • ものが必要だと計算をするためのっていうのが2015年ぐらいに発足しますと最初はですねもともとGoogleとかあとModularかな多分とかが独自企画みたいなやつを裏で作ったりはしてたんですよでもそうすると今度ブラウザによって動く動かないあるじゃんってなってそれはちょっと開発者にとってもきつすぎるし



  • ここはブラウザ業者が一択のテーブルを囲んで主要を決めようじゃないかみたいな主要ブラウザベンダーが集まってWebアセンブリの企画が決まってそれぞれのブラウザで実装したんで今Webアセンブリというものが使えるようになってますよとありがたいこのWebアセンブリはコードをコンパイルして作りますとそのコンパイルしたものをJSから呼べると



  • なのでJSでWebアセンブリのコードを読んで計算をして計算だけ早くて描画JSでやりますよみたいなそういう流れで使えますとWebアセンブリの特徴今早いをめちゃめちゃ言ったんですけど実は早い以外にも特徴がございまして安全実はこれブラウザベンダーが作るときに



  • やっぱこれ安全性も大事だよねってことでメモリの扱い方がすごい安全になってるんですね具体的には割り当てたメモリ以外は全く使えないようになってて要はサンドボックスって呼ばれてるんですけどつまりWebアセンブリで書いたコードでブラウザに対して変なことができない



  • なるほどね割り当てられたとこ以外見れないからなるほど悪いページを作れないようになってるってことですねそういうことなので安全ですなんとかインジェクションみたいなのができないやりづらいインジェクションじゃない気がするけどどっちかっていうとメモリ書き換え系の攻撃だと思うあるんですよとかができないですよとさらにポータボーポータボー



  • ポータブルですよだいぶ全部だいぶポータブルだけどCPUのアーキテクチャとかOSに関係なく動作するようになってますとWebアセンブリはJSって関係あるんですかJSっていうかJSはあれかもねインタープリターだからブラウザアプリがまずはCPUアーキテクチャ関係ありそうじゃないですかその上で動くやつは何でもOKなんだと思ってたらてっきり



  • JSはなんか動きそうだななんでもうんうんうんなんか動かないのがあるのかなまあでもビルドする系の言語ってなんか結構アーキテクチャに合わせたビルド必要じゃないそれはそう思いますインタープリターはその場で実行してるから大丈夫なんじゃねって気がするけどうんうんうんでビルドしてあそっかアセンブリバイナリだけどどこでも動くよって言ってるってことかそうなんでなぜならブラウザに任せてるのかその辺をいやランタイムに任せてますほう



  • ウェブアセンブリのランタイムがそうなるように作られているそうですどういう意味?まずランタイムとはランタイムとは実行環境実行環境?僕結構そういう認識でしたランタイムって環境なのかなあれどっかで投げてたような気がする料理で例えるランタイム急に?はいソースコードレシピはいコンパイルされたワズム



  • 下ごしらえ済みの具材パックCPU実際に食べる人CPUか思い出すなコンパイルされたわずむが下ごしらえ済みの食材具材パックそもそもわずむというのはウェブアセンブリのことランタイムはキッチンと料理人ごめんなさい出来上がった料理何ですかページ書いてない今さかないよ



  • どういうこと?その例え方して料理ないのやばすぎるだろレシピと具材と食べる人はいるけど料理はないよいやーまだまだね人間AIには負けないっすねすごいねこれだからきっとパッと見でよく分かんなかったんだろうな多分ページって言いたいのかなページとは限らないからなでも



  • コンテンツ?ページとは限らないページがあるとは限らないからなだからわずむが処理した結果がなんじゃないわずむの処理結果が料理なんじゃない違うなページとは置けないですか置けなくもない一旦料理をページと置けなくもない今の話聞くとじゅんぺいが言ってた実行環境の感覚ちょっと近そうな気配ありますねただ例えばさっきは調理器具が



  • ランタイムでしたよねランタイムはねキッチンと料理人ですねキッチンと料理人場所もだしそれを動かすプログラムもってことだよつまりあーなるほどそっか調理器具じゃなかったキッチンと料理人がどんなやつでも最終的に同じ料理になるよって言ってるんですよねうん



  • これWebアセンブリっていうだけあって最終的な機械語ではないんですよコンパイルされたものってそのランタイムがアセンブリ部分をバイナリーに変換するわけですね結局その



  • だからその変換処理が多分CPUとか関係なくできるようになってんじゃないかななるほどねビルドした段階で最終的なものができてるわけじゃなくて中間生成物ウェブアセンブリができててでその中間生成物はどんなランタイムで再ビルドっていうか動かしても同じものができるようになってるってことなんですねそういうことやっと理解しましたなるほどねそういうことです



  • ありがとうございますそれがあるからこそさっきのJITとかも実はそこに関係あるんですけどJITっていうのはジャストインタイムコンパイレーションみたいなそんなことできんのJITって書いてます?JITJIT急におじさんじゃんジャストインタイムとか言ってたのに急にテイジャストインタイムですなるほどJITは関係ないです



  • そうねきっとジットって言ってる人もおじさんですからねスペル一緒じゃねえと思ったんですけどテイですねテイいや違うよJとGが違うねJだろテイが強すぎてそっちに行っちゃったけど記憶失っちゃってるじゃんテイは同じでしょすいませんヒットもGITだから失礼しましたえーなんだっけジャストインタイムコンパイレーションってのをやっててえーとね



  • 変換作業あるじゃないですかバイナリーへのそこの部分が一気にダウンロードして一気にボーンってやるんじゃなくてダウンロードした部分から変換していくみたいなことをやってるっていうそんなことできるんですねそれが結構速さの秘訣になってるらしいです重くないですね部分部分でいけるからねじゃあなんかアセンブリの段階で小分けパックみたいになってるんでしょうねきっとね



  • さっきの具材パックの話が混ざってよく分かんないアセンブリの段階で小分けパックになってるから部分部分でコンパイルできるんでしょうね鳥胸肉と野菜で分けてるから鳥胸肉だけ低温調理できるよみたいなそういうこと?そうそうそう合ってる合ってるかな?分かんないけどジットの中身までは知らないけどそういうので使われますよ勉強になるジットってなんですか?



  • ブラウザの機能それともそういうプラグインいやこれランタイムの機能じゃないかランタイムの機能なるほどいろんなランタイムで持ってる機能のジャストインタイムコンパイラージャストインタイムコンパイレーションコンパイレーション名詞って書いてあったけどねコンパイレーションだったらコンパイルの方法っぽいですねそうだねだから



  • ジャストインタイムコンパイレーションをやってるジャストインタイムコンパイラーがあるんだろうなって気がする間違いないけどブラウザーか何かが持ってる機能なんだろうブラウザーなのかなランタイムの中にいるやつではないランタイムでやってんのかランタイムでやってんじゃないかなっていう気がするよくV8ランタイムとか出てきてるからそういう機能がありますと



  • 今昨日の話だっけとりあえず今特徴ってのが高速であると安全っていうのとあとはポータ棒ですとポータ棒ですねポータ棒です実際このWASMが今注目されてるんですけど注目されてる理由がね早くなる以上の価値が実は見出されてしまったっていうところがねちょっと面白ポイントだなと思ってるんですよ早くなるぐらいじゃないですかいやいやいやそれはねブラウザの中だけの話ですよ



  • もちろんFigmaとかGoogle Earthとか動画編集とかゲームエンジンとかではWASMが積極的に使われて高速化されてますと一方実はこのWASMってのはさっき言った3つの特徴があるならブラウザ以外でも有用なんじゃないかっていうところでサーバーサイドとかクラウドで実行されるっていう



  • 新しい使われ方みたいなのがね後から見出されてるんですねそしてそこが今現在最も進化が激しい分野ですと言われてますとキャッチできてないね全然これかなりドッカーとね比較される



  • このワズムに関して言うと全然違くない競技競技違うと見せかけてさっきのポータブルであるみたいなところとか安全であるとか高速っていうのはドッカーと実は競合し得る特徴なんですよ特徴はね特徴はねでもそんなのねポータブルで高速であとなんて言いましたっけ



  • 安全ニンテンドースイッチと一緒だからちょっと待ってどういうことだ特徴はニンテンドースイッチとか打ってるんでドッカーとニンテンドースイッチは競合しますよニンテンドースイッチちょっと分かんないわそうなんだ違うんだよねニンテンドースイッチのポータブル多分違うわあれ実行環境ポータブルじゃないからそっか



  • 自己関係ポータルルールじゃないですね確かにあと安全安全ではあるか高速さもよく分かんないけどどの程度高速なのかよく分かんない結構滑らかですからね投射比ねPSPの時から滑らかだったよねゲームなんて



  • これがDockerと実は被る特徴を持っているとなんとDockerの創始者ソロモンハイクスさんはですねもし2008年にWASMとWASHが存在していたらDockerを作る必要はなかっただろうという発言をしていますと今WASHって出てきちゃいましたこれが何かというとWASIって言ってたんですけどWeb Assembly System Interfaceですとこれは何かというとブラウザの外でWASMを動かすための標準規格でございますと



  • ブラウザの外だったらもうWいらないだろウェブじゃなくない確かにそうかもなでももうウェブアセンブリーという一単語になっちゃってるんだろうな基本的にわずむってもともとブラウザで動くことが想定されてたんでネットワーク通信とかファイル操作みたいなそういう機能がないんですよそりゃなそういうのをできるようにしようと



  • いう企画がWASI和紙って読まないかもしれないなわかんないWASIって言うのかもしれない多分WASIですよね和紙和紙そうかもしれない創始者がどっか作る必要なかっただろうぐらいまで言っちゃってるとへーまじでどっかに比べて早そうっていうその通りなんです



  • そのぐらいしか思い浮かばないねいやそれが重要なんですよドッカーってOSごと仮想化してるじゃないですか一方このWASMって本当にプロセス単位というかマジで関数レベルのものを仮想化する技術と捉えられるとサンドボックス作ってるしそれを持ち運びできるしへー



  • 確かにあと速いと軌道も速いんだけど軽いだろうからなイメージみたいなやつがドッカー自体はもちろん仮想マシンと比べて速くなったよねというのはあるんですけどそれでもやっぱ重さに関する課題意識はあるんですねそれに対してワズムがそれの解決策になるんじゃないかと比較すると



  • わかりやすいけど例えばコンテナだったら起動って数秒かかりますよと一方わずむってミリ秒で終わるとさらにサイズコンテナってだいたいギガバイトぐらいまでいくじゃないですか小さくしても絶対数キロバイトとかにはなんないじゃないですか一方わずむは数キロバイトから数メガバイトぐらいのサイズ感で作れると



  • ってなった時にじゃあこのコンテナ技術に似た安全さを持ってる早いWASMはエッジコンピューティングとかでめっちゃ使えるんですよ使えそう確かに確かにとかあとサーバレス例えばラムダとかで関数作るよってなった時とかにも使えると



  • コンテナだったら起動するまずコンテナの起動までに時間かかるじゃないですか例えばサーバレスで作ってなんか処理しますよってぶん投げてコンテナがウィーンって立ち上がってそれで処理するってなったら遅いじゃないですか一方わずむならもうポンって立ち上げてバーンって実行できるとエッジコンピューティングとはエッジコンピューティングとはオリジンサーバーでの処理をしないための技術というか例えばじゃあ認証しますよとはい



  • 認証するってなった時にみんなが1個のサーバーに対して認証リクエスト飛ばすとするじゃないですかそしたら大変じゃないですか一方こういうのエッジコンピューティング使うことによってオリジンサーバーの手前にいっぱい小さいサーバーみたいなやつを作っておいてそこで認証チェックみたいなのができるとそいつらをエッジコンピューそういう技術CDNに近いかもしれない



  • 割と僕違うイメージ持ってましたわあのIOTとかの文脈とかでざっくり例を言うと監視カメラの分析システムがありますとでカメラの映像をまんま飛ばすとネットワーク帯域めっちゃ圧迫しますとであとプライバシーの問題もありますとちょっと監視カメラ例よくないかもしれないけど



  • だったらカメラの方である程度映像分析して分析結果だけ送ったらネットワーク軽いしサーバー側での処理負荷も低くなるじゃないですか本当だったらサーバー側映像を集めて分析するっていうのが昔のやり方だったけどエッジ側端のカメラ側でコンピューティングの処理させてシステム全体の負荷最適化しようぜみたいな



  • そういう動きの認識ですだから今言ったワズムじゃねえワシ使うとエッジって何が課題かっていうとコンピューティングリソースが限られるのが課題なんですよサーバー側にどでかいマシン置けるけど例えばカメラにそんなどでかリッチサーバーなんて置きたくないじゃないですかいくつもあるしだからできればラズバイみたいな



  • すごいしょっぽいCPU使ってやれるぐらいのことをやりたくてそのために課題になるのがメモリ量とかCPUのリソースだったりするけどDocker使おうとすると今はDocker使ってるのかなあとはLambda Edgeっていうエッジコンピューニング用のAWSのサービスとかあったりするんですけどそういうのに多分めっちゃ軽いDockerイメージの動かすようにやってる気がしてるんですがそれよりも少ないリソースで



  • なんかやりたいことできるようになるよっていうことを言ってるなるほどってことなんですねなんですねなるほどってことなんですね乗っとったすごい一気に立場が変わったすごいなありがとうございますヘッジコンピューティングはそういう技術というか外人



  • そういうことありがとうございますすいません広がりましたそしたらまとまってました気づいたらあれですよね分身の術でちっちゃい分身がいっぱいできてそいつらが代わりに作業やってるみたいなそうそうそうそうちょっと待って合ってるかな合ってないかなそれだってなんかクラスターっぽくないですか前処理してるというかはいイメージも大丈夫ですイメージ大丈夫ですかはいもしくはあはははは



  • ちょっとシェア取っちゃったからシェア取り返そうとしてるもしくはあれだよねいろいろあるよねいろいろありますというのがサーバーでわずむが活用されてってる理由というかめっちゃ軽量なドッカー的な感じで関数単位で使えると聞いた感じ確かに確かに勝てるわって思いましたドッカーに



  • でもただ多分これはどっちかが強いとかじゃなくて向いてるタスク向いてないタスクが多分それぞれあってわずむのが向いてるタスクもあるよねっていう状態だとは思うなんかなんだろうなOSの機能を使いたいとかだったらどっかじゃないとダメだったりするんでしょうねきっとね和紙の範囲内のOSの機能ならウェブアセンブリでいいんじゃないそうそうそうそうそこに定義されてないようななんかちょっと特殊なやつ



  • とかだったらどっかじゃないとダメとかはあるかもなるほどラムダの起動速くなるとか良さそうなのでブラウザで使うときとサーバーで使うときで結構考え方が違うというかもうなんだろうねブラウザで使うときって本当に計算を重たい計算をその肩代わりさせるためのマスなんか



  • スケットマンみたいなイメージだけどサーバーサイドで使う場合はその関数単体として完結させるような感じで作っていくような感じになるかなマイクロサービスとかで使えそうですねマイクロサービスとかイベント駆動アーキテクチャみたいな非同期で裏側でたくさん処理走らせたいとかうん



  • そういうリアルタイム性が求められるリアルタイム性じゃないか非同期処理だとでもなんかスピードというかパフォーマンス求められる系大規模システムとかだとこういうリソースの削減が結構効いてきそう確かにうんちょっと私マイクロサービスあんま詳しくないんですけどはい私も一人ほどほどぐらいですエアプですマイクロサービスエアプ勢なんかちっちゃいサービスをいっぱい作ってるんだろうなぐらいの解像度しかないんですよ僕うん



  • というのが今話題のサーバー側のWASMはいワクワクしましたよちょっとワクワクしましたよちょっとワクワクした今後ラムダでもそれが使えるアップデートが出たりするんかなもう使えたらごめんなさいって感じどうなんだろうねちょっと分かんないなそこあんま具体的なクラウドの機能まで見てないんですけど



  • あとはですねさっき出てきたWebGLとかMinGWは何なのっていうJITはさっき説明した通りちょっとずつコンパイルしてるよと速さを支えるポイントですねあれが続いてWebGLとWebGLとはWeb Graphical LanguageWeb Group LeaderこれはWebGLでWebGLなんじゃないか切ないか



  • 激おこプンプン案件ですねそういうのあるよねGLが大文字の時点で二単語であれ



  • 何の略グラフィックスライブラリーですライブラリーか当てれたわグラフィックスライブラリーです当てれましたわそれはグラフィックス名前知ったら別に説明いらないぐらい分かりやすいな名はてを表しているじゃあじゅんぺん説明してくださいちょっと分かんないですねグラフィックスのライブラリーまあでもそうなるよね



  • だから見た目作るやつですね3Dが多いのかなこれポリゴン描画などの映像出力をやってます



  • WebGLはだからそういう描画の計算ってWASMとの全体像で見るとまずその描画って結構数学的な計算すること多いじゃないですかポリゴンとかどういう風に動くみたいなねそうそうそうなんでWASMがまずその計算をやりますとJSに導かれてその計算結果をJSがWebGLに渡して描画するみたいな流れになるんじゃないかなとうんうん



  • そしてこのminGWミニマムグラフィカルライバリーじゃない?え?これなんなん?GCCグラフィックスライバリーかWですよねGWあ、minGW?minGWWミニマムなんとかバズム?いや、えーとですねミニマリストGNU for WindowsGNU for WindowsOSなの?GNU?GCCのWindows版GCCコンパイラーですねC言語かな



  • グムコンパイラコレクションいろんなコンパイルできるのかなC言語のコンパイルするときにGCCコマンド打った記憶があるこのmin-gwはあれっすね多分描画のとことかじゃなくて普通にWebアセンブリにコンパイルするためのやつかなるほどC++とかからCとかCとかC++から



  • Exeを作りたいなって時に使いますとしかしWeb用のアプリを作りたいならツールを切り替える必要がありますってことはMintGW別にWebアセンブリと関係ないんじゃないかそんな気しますよねもしくはバックエンド用のWebアセンブリな可能性もありますよねExeファイルって実行ファイルですよねWindowsのでもExeにしたら多分WASM実行できないんじゃないかなそう思いますバックエンドだろうがどこだろうが



  • ドットワズマになるから基本じゃあ忘れますこれ一旦そうですねもとよりminGWが出てきてってあったけどminGW自体はWindowsで動くコンパイラーですよとCとかC++用のでそれを使ったらエグゼになっちゃうからWebAssemblyは作れないんじゃないかなって気がするけど



  • 一応地味にはできないと言ってますはい地味にがいいなら間違いないですねうんうんちょっと細かいドキュメントは見てないですけどできない可能性が高そうはいですはいで最後じゃあ輪詰めを書くにはどうしたらいいのとうん



  • WASMを書くためにはですね今のところラストが一番相性がいいと言われてますね生成されるバイナリがまず軽いらしいラストはさらに必要なツールがめっちゃ充実しててエコシステムが充実してるんでWASMを作るなら今のところラストが一番いいんじゃないかなという感じですねただ一方でC、C++とか



  • GoとかあとTSに似てるアセンブリスクリプトっていうのがあってそれとかだったらWebフロントエンジニアからWASM入門するならそれとかも文法似てるからやりやすいよねみたいなところがあるそうですねせっかくならGoとか触っておきたいですけどね



  • せっかくならラストが触りたくないせっかくならラストが触りたいフロントから行くんなら似たやつよりもね汎用性がある使い増しききそうな別のエクストリーム違います別の言語を触った方がいいですね構造が異なるパラダイムパラダイムは違いやつありがとうございますという



  • 前回のわずむ会では話しきれなかったというか知らなかったサーバーサイド側もあるんだよっていうお話でございましたいやワクワクしましたねなんか事業を考えるときにちょっとこの引き出しあるかないかは1個ポイントになりそうだなと思いましたアーキテクチャ考える上でアーキテクチャそうだよね設計関係あるねこれはいつ触るかなこれ一生3年可能性あるけどなさすがにどうなんだろうな



  • シビアなパフォーマンス求められる時に選択肢として出てくると嬉しいですよねこれそうですね多分第一歩でやらないでしょうね絶対多分ある程度育った後にパフォーマンス問題あるなーっつってどうしようの選択肢の一つですね多分まず人材集まんないの多分これやったことある



  • まあねだってこれそもそもサーバーサイドのあれが登場した2019年とからしいんで企画作ったのかへーだからまずそもそもね歴がその技術自体が新しいですからねちなみにそれアフタートークで話しますねみたいなあーはいはいはい聞きました聞きました何しようとしたんだっけえっとのりさんのそのジェミニの勉強した内容をあの今すごい見やすい資料に落とし込んでたじゃないですかあーはいはいはい



  • あれなんか僕知らなくてちょっと教えてって言ったんですよなんかプレゼン資料みたいになってますよねそうなんですちょっと説明してください私最近ですねこういうポッドキャストネタ的なやつ調べるときにめちゃくちゃにジェミニを使ってるんですけどめちゃくちゃにねどういう風に使ってるかというと今回だったらわずむについて詳しくなりたいとだけぶん投げてそしたらまず最初概要バーって言ってくれるんですよで



  • 読むじゃないですかそしたら分かんないこといっぱい出てくるんでそれを次追加で質問しまくりますと例えば今回だったら1.なぜ場所を選ばずに実行できるんですかそれ専用のランタイムがあるんでしょうかそれともバイナリーか何か実行するためのプログラムがなくても実行できるもんなんでしょうかみたいなどうやってサンドボックス作ってるんですかとかえー



  • これわずむはいつからある概念ですかとかあとどっかのソーシャーの発言はいつどこでその発言したんですかとかTSをわずむビルドができるんですかとかサーバーサイトでのコンテナ代替についても教えてくださいとかってやるとそれに対しての回答が次バーってきますとっていう質疑応答を繰り返しまくるんですよで不明点がなくなってなんかだいたいわかったなってなったら最後にじゃあこれをインフォグラフィックにまとめてくださいって言ってえーとなんか



  • チャット欄の下にモードみたいなやつ選べるのはツールってやつはいはいジェミニのUIですねこれちょっと無料とか有料とかどういう制限あるかは分かんないんですけど一応そこにキャンバスっていう機能があるんですよキャンバスをオンにするとGoogleドキュメントとかにまとめれるようなテキスト出力したりとかあと



  • インフォグラフィックスって言って情報をきれいに整理してまとめたウェブサイト1ペラのやつ作ってくれるんですよなんで最後全体像を把握するためにインフォグラフィックスで全体像を出力してそれを見ながらこういう整理ねみたいなのを把握するのに使ってますねいいなぁ



  • インフォグラフィックスにしてキャンバスをオンにした状態でインフォグラフィックスにしてっていうといい感じにまとめてくれると素晴らしいインフォグラフィックスにしてだけでもキャンバスをオンにしなくてもいい感じにやってくれはすると思うけど一応選んでるってだけですね試してみようかなぁ



  • ジェミニと一緒に調査した内容とかをスラックでレポートするときとかもありますけどそのスラックのレポートも大事ですけどなんかもうジェミニにまとめ作らせて投げてもいいなって思いますねあとはなんか自分の原稿とか特にそうだしねあと僕LTとかもこれ使いますねまんま?めっちゃいいですねあのー



  • HTMLなんでとりあえず保存して表示したら同じ見た目でいけるんでブラウザー全然出るねLTとかも資料作るのめんどくさいんでインフォグラフィックスでまとめてもらってスライド案にしてページにすることも多いかなみたいな感じで使ってますねめっちゃいいありがとうございます



  • 使います 使えそう遊んでみようとりあえずチャドGPTにもキャンバスありました多分普通にインフォグラフィックスで確かいけた気がするなんかすげー昔にウスタクがこれを紹介してた気がするっていう記憶を思い出しましたウスタクさんが急にウスタクさんそうなんだいけた気がするどのAIでもいけるんじゃないかな確かにいけそうHTML出してるだけだからね



  • 精度は分からんけどそうねジェミニは結構かっこいいの出るんですよねノリさんかっこよさ伝えてくださいよ本当にね一言で言うとなんだろう言えよ一言で一言で言うとねなういっす全部伝わりました今グラデーションかかっててAI系のさ



  • 海外のサースのページみたいなはいはいはいはい感じはいはいはいはいなんかシンプルで要所要所グラデーションでそのグラデーションなんか紫系みたいなあー見たことあるなそういうのが作られますねはいはい



  • ありがとうございますじゃあ締めますかお願いします俺お願いしますこの番組では皆様からの感想をXで投稿してくれると嬉しいなと思っていますハッシュタグはひまじんプログラマーひまじんがひらがなプログラマーがカタカナでございます



  • 今日の話を聞いてみてわずむ触ってみたいよって思った人はわずむ触ってみたいよってぜひポストしていただけたら嬉しいと思っていますバックエンドのウェブアセンブリの事例とか言ったら知りたいですね実際に使ってますとか私触ったことはないんでさらにこのような形で質問とかもじゃんじゃん受け付けております



  • 読むのが1年越しになってしまうとかっていう事件も発生しつつあるんですけどいっぱいありますなるべく読んでいこうかなという所存でございますので何か気になることとかがあったら番組の説明欄にあるエピソードの説明欄にもあるGoogleフォームから質問とかを送っていただけたらなと思いますお願いしますお便りありがとうございましたお便りありがとうございました石上にも3年さんさらに



  • オンラインスラックコミュニティひまぷろ談話室開催中でございますイベントみたいな開催中でございますこちらではですね日々様々な激論が交わされていたり



  • たまにイベントが開催されたりとかエンジニア友達を見つけるのに最適な場が整っておりますのでもしご興味ある方はこちらは番組の説明欄にございますGoogleフォームからお申し込みいただけると幸いでございますよろしくお願いします最後にこの番組は各種ポッドキャストプラットフォームで配信中でございます



  • 皆様がぜひこれを聞いてためになったよとか逆にためにならなかったよとかがあったら星5をつけて投稿していただくとよりいろんな人に広まって僕らがとてもうれしい気持ちになるのでぜひともご協力のほど



  • よろしくお願いします所要時間はね数秒だと思うんでぜひよろしくお願いしますためにならなかったらね5で先輩がそう言うんでその時100点満点だと捉えて投稿していただけたらねなるほどね以上でございますそれではまた次回バイバイ初めて触ったMacBook



  • 各種ポッドキャストで配信中

0:00 46:48

#413 フロントを高速化するだけじゃないWebAssembly