#085【最新技術の一般教養】現代のブラウザアプリを支えるWebAssemblyとは？あとお便り紹介コーナー
「さあ始まりましたひまじんプログラマーの週末エンジニアリングレッスンですね忘れちゃってるじゃないですかちょっと長くて久しぶりの収録ですね聞いてる人からしたら関係ないんですけどまあ確かにはいということでですね実は我々」
「Googleフォームを使ってテーマの募集っていうのをやってたんですけど今回ですねこれについて話してほしいよっていうのがあったんでちょっとざっくり調べてそれを解説していこうかなという回ですありがとうございますいわゆるお便り会的な」
「そういうことですめっちゃ久々ですねはい嬉しいめちゃめちゃ久しぶりでしたっけいやだと思いますよちょっと収録自体久しぶりすぎて何が久しぶりで何が久しぶりじゃないのかという本当ですね世界なんですけど本当ですねはいというわけで今回のテーマはですねはいWASMWASMちょっとこれね」
「略した時の表示方法読み方を知らないんですけど俗に言うウェブアセンブリーっていうものについてですねなんか聞く本当に?なんか聞く何で聞いたか詳しくなんか俺あれですね開発したツールじゃなくてあれですよデベロッパーツールじゃなくてやばいあの」
「あれですボケてんのかカレーか本当にデイリードとデブ物質かそれともソフトの話をしようとしてるかすら分かんないんだけど言語を書くときの便利なやつあるじゃないですかIDIDのときの設定みたいなとこをいじるプロジェクトの設定みたいないじるときにアセンブリーとかって出てくる」
「ですよそれは何だろうと思いつつたまに見に行くことあるなと思うなるほどねそれでアセンブリー出るくらい聞くなぐらいです言ってるものともしかしたら違うそれで言うとおそらく違いますねアッダスアッダスアッダスって何ウェブアセンブリーとアセンブリーは別物です別ウェブ用」
「そういうレベルじゃないですねWebアセンブリはアセンブリではありませんっていう難しい話からしちゃいそうなんでまずちょっとWebアセンブリの概要をお話しますねそもそもWebアセンブリなんですねWASMはですWASMのWがWebでアセンブリを多分」
「ブリの前のンなんでMなんですよねということでWebアセンブリーということでですねこれ何かっていうとブラウザ上で今までプログラミングするときって基本JavaScriptを使ってやってましたよねそれのもう一つの選択肢みたいな感じですJavaScriptが出てくるまでは何年だったんでしたっけ」
「はなかったんじゃない?たぶんHTML、CSSがもともとブラウザで動いてたんですけどそこにJS、JavaScriptというものが出てきて動きもつけられるようになったとそれでもういつだか話したJSの歴史みたいなやつあったと思うんですけどあの時に背景としてはJSすごいじゃんってなってめちゃめちゃJSでいろんなコード書かれるようになりましたよとそれがつい最近までですと」
「その後登場したのがこのWebアセンブリというものですねとなると新しい機能がついてそうな潮流ですけどそういうわけでもなくそれでいうと機能は変わらんすただ何が違うようになったかというと爆速で動くようになりましたスピーディー?要はJS登場してWebでできることがどんどん増えていったじゃないですか」
「それとやっぱね人間の欲望ってどんどん増えていくんでもっといろんな機能を実装したいぜってやつがいっぱい多分現れたんですよただJavaScriptってあの」
「コンパイルとかしないインタプリタっていうのを使って実行する言語なんですよインタプリタはちょっといつかお話ししようかなっていう感じで今回飛ばしていいですかインタプリタっていうのがあるんですね簡単に言うとインタプリタの言語の方が遅いっす」
「インタープリターの言語の方が遅いです機械というかコンピューター君が解釈するのに時間がかかるような形式になっているということですねそうですコンパイルする言語というのは最初にもうコンピューター君が解釈できるように変換しているのであとは実行するだけって感じなんですけどインタープリターの場合はそこがちょっと多くて遅いんですよねただそうすることによってJSしかないですよとブラウザはそもそも選択肢ってなると重い処理できないんですよね」
「例えばですけどブラウザで3Dの感じ出したいとか最近流行ってますよねメタバースじゃなくてデジタルツインというか3Dでスキャンして3Dの街を表示してその中で表示させたいみたいなとかね重たい処理ね現実に拡張したりとか動画編集やったりとか多分あれも重いんじゃないかな」
「通信じゃなくてビデオチャットとかのさブラウザでできたりするじゃないですか最近だとあの辺もおそらく重いんで結構な計算量っていうのが必要なんですよってなった時にJavaScriptがそもそもボトルネックになってるよねみたいなことが起き始めますとっていうので出来上がったのがこのWebアセンブリーっていうもので」
「ウェブアセンブリー直接書くこともできるらしいんですけど基本的にはCとかC++とかラストみたいな言語使ってコード書いてそれをコンパイルするときにウェブアセンブリーにコンパイルしますよみたいな感じで使いますCで画面書くって言ってました今それで言うとウェブアセンブリーはですね画面の動きっていうよりも」
「結構JSと強調して動かすっぽいんですよそういうことなんですね画面の動きは基本JSとかでやっていくんですけどここの部分だけ計算処理やばいわっていうところをWebアセンブリを使ってあらかじめ書いたコードを読み込んで」
「めちゃめちゃ早く計算するみたいな感じなのでJSの代わりになるっていうよりも今まで足りてなかった機能を保管するやつみたいな感じのポジションらしいですねJavaScriptと同じことが全くできるめっちゃ早いやつじゃないんですねではないですだから主に計算部分をやることになるんで書くロジックっていうのはあんまりフロントっていうよりもバックがやってる人が書きそうな感じのコードを書いていくと思いますねここはなるほど」
「今のがWebアセンブリのおよそ概要なんですけどそれとは別でアセンブリっていうのもあるんですよこれはさっきじゅんぺいが言ってた方のやつですね何かっていうとこれはですねコンピューターって基本的に01で構成されたデータ0と1だけのバイナリーのデータって言ったりするんですけど」
「それを基本的には実行できますよとだから我々が書いているプログラミング言語とかも基本的には最終的には01に変換されてそれを実行しているというわけなんですよでもその01ってその何て言うんでしょう」
「最初から0と1だけでプログラミング僕らが書くのしんどすぎるじゃないですかしんどすぎますねだからそれを人間が書くのはちょっと辛すぎるよっていうことでもう少し人間用に読みやすくしましたよみたいなのがアセンブリッジですね」
「それをさらに読みやすく人間が書きやすくしましたよっていうのが僕らが使ってるような高級言語って呼ばれてるような言語ですねどんな違いがあるかっていうとアセンブリの方がもっとステップ多いですねやることなるほど」
「例えば変数宣言とかだったら変数の名前決めてさ中に値入れて型とかも決めるか型決めて変数名決めて値突っ込んだらおしまいじゃないですかおしまいですなんですけど機械語要はこういうアセンブリってやつだとまずCPUのどのレジスタ使うかとかメモリのどこに保存するかとかっていうのもこっちで指定してあげないといけないんでそれを01で指定しなきゃいけない」
「それはそうなんですってことなんですねなのでよく低水準言語とかって言われてたりしますね高級言語に対比してすごいいっぱいやることあるよと見たことないなさすがになんか書籍でちょっとねあったわプログラムはなぜ動くかみたいな本で一瞬だけアセンブリを触ってみようみたいなやつだったんだけどレジスタの知識なさすぎて」
「足し算してるのも結構しんどいなと思うそうですよねコンピューターの仕組みの部分ですもんねそうなんですよそういうのをアセンブリって言うんですよアセンブリも結局人間が分かりやすくされてるんで最終的には01の方に変換するんですけどなので最もコンピューターが扱ってる」
「言語に近いプログラミング言語がアセンブリですよとなのでウェブアセンブリって実はよく考えるとアセンブリと全然違うというかそもそも最初からウェブアセンブリで書くわけじゃないし何かを変換した後にできたやつがウェブアセンブリみたいな感じなんでじゃあちょっと質問なんですけどアセンブリって名前がついてるのはアセンブリ的に人が」
「読みづらいというかレジスタ指定して書かれてるとかアセンブリ言語のルールに従って書かれてるというよりは早いっていうのを表現したくてアセンブリって言ってるってことなんですかねそんな気がします変換した後のコードだから低水準になってるよねっていうのはあるよね結構聞きます?現場とかで僕あんまりフロントあんま触んないんで耳なみ地味はそんなないんですよね」
「僕もないです結構あれなんですかね本当に先端の現場というか重たいサイト重たいサービスを作るときにやっと登場してくるぐらいのやつなんですかねよくぞ聞いてくれましたこちらですねどんなサービスで使われてるんだろうっていうのを軽く見てみたんですけどGoogleはね」
「やはりさすがって感じなんですけど使ってますはいはいはいで何に使ってるかっていうと一つはGoogleMeetってURLだけでビデオチャットできるやつの背景の処理とかに使ってるらしいですへー」
「背景ぼかしたりとかさそういうことできるじゃないですかなるほどねでもあれって人がどこまで人なのかみたいなのとか多分そういうのでめっちゃ計算量必要だと思うんですよまあそうですねなのでそういう部分の処理するときに使ってたりとかあとこれは確かになって思ったんだけどGoogleEarth」
「あれも超重いあれも3Dだし超重いじゃないですか地球上のデータを全部引っ張っては来ないにしろある程度引っ張って来ないといけないですからねそうですねGoogleEarth知ってる?3Dでリアルタイムで見れるやつじゃないですか」
「リアルタイムだよなぁさそうな気するけど今ここにじゅんぺいがいるぞって人間は見えないですけどやばいでしょそれ実現したらねあともうドローンからレーザービーム撃てるようになったら終わった社会になるよそれえ教えてください」
「たぶんなんとなくすっごい雑なイメージですけどGoogleマップの立体バージョンぐらいだと思ってるんですけどあってますあってますそんなもんですGoogleマップのストリートビュー違いますストリートビューはあれじゃん写真なだけで平面じゃんあれを立体にして360度から見れるようにしたよみたいな全部3Dモデルにしたよモデリングデータを閲覧できるサービスはいはいはい」
「何に使うんだろうね何使うんだろうねなんか楽しいって思ったけど5分で飽きる言うて世の中に例えばそうですねドローンとかでビルの点検とかあと何でしょうね50の塔の点検とかするとしてその点検したデータの中ここに傷あるよみたいなものって自前で50の塔のデータ使うんじゃなくてそういうオープンな」
「スキャンデータを使って表示することがあるのでそういうのに使うんじゃないですかねなるほどねあれをでも全世界に公開してめちゃめちゃいろんなところで計算させてるのすごいな本当ですねっていう感じで明らかに処理重そうなサービスで使われてるらしいんでまあ普通のウェブサイト作ってて使うことはあんまりないんじゃないかなとは思いましたねそれは確かに選択肢としてうわーJavaScriptでネックだーってなったらこういう選択肢もあるよぐらいの」
「感じなんですかねそうねここだうわこれもうJavaScriptだともうパフォーマンス的に無理っていう時に登場うんするって感じですねうんまあ知識としては入れときましょう僕はなんかまあ存在として知っておくのがいいかもしれないまあ少なくとも広がっていく気はしますよね利用はうん」
「ですねちょっと僕これを元にとりあえず検索して1ページ目に出てきたサイト大体見たんですけどこれじゃあ普及したらどう業界変わっていくんだろうなってちょっと考えてみたんですよ多分めっちゃ業界が変わるなみたいなそういう汎用的な感じじゃないんですけどまずそのパフォーマンスが今までボトルネックになってて」
「ウェブで実現できてなかったやつとかっていうのはウェブにどんどん置き換えられていく可能性が一つあるなというのがありますと例えばVRとかありそうじゃないですか」
「VRめっちゃありそうブラウジング今PCでブラウジングしますけどVRでブラウジングするとかになってくるとGoogleEarthもそうですけどVRならではの検索エンジンとかページみたいなのが増えてきてそういうので多分処理重いんでしょうから絶対重いそういうのとか使えそうですねこの技術って学んだ方がいいの?とか考えたんですけど僕の完全予想ですよ」
「全員が学ぶ必要はないかなっていうジャンルかと思いましたこれじゃあ普及してこれでも必要だよねって時にどうなるかなって思ったんですけど多分Googleとかどっかのスーパーエンジニアが必要なモジュールみたいなのをきっと開発して公開するんだろうなってまず思ったんですよまあそういうもんですよねそれをJSから利用して使うのかなっていうような社会になってきそうだなって気がしたのではい」
「どっちかっていうと使えればいいんじゃないって思ってますそうですねそんなディープにこれ直近はそうですよね本当に多分数学やばい人がやるもんじゃないのっていう気がしてますそれはありますねより上を目指すならそういう専門家になるのも悪くないかもしれないですけど我々がターゲットとしている方々とターゲットにしている中級エンジニアという立場でいうといらんっていうしばらくはいらないですねなるほどありがとうございます」
「以上ですか感じですかねあとはもしかしたら今後ねあのjsのライブラリーとかフレームワークにデフォルトでもなんかwebアセンブリ組み込んでパフォーマンスアップしましたよみたいなのを知らないうちに使うみたいなことはあるかもしれないですねそうですねあるんでしょうねっていうのがまあwebアセンブリの概要でございますありがとうございますはい全くわかんなかったけどちょっとわかったを」
「だからこれでなんかしたいよって人はとりあえずラストとかCとかそっちをやらないといけないなって感じなんで頑張ってねって感じですねむずいと思うんであの辺ちなみに今使うとしたらどういう書き方なんですかJSのとこに呼び出す書き換えるためのコードを書くみたいな感じになるんですかえーとね」
「呼び出すコードは必要ですね読み込み方的には独自の作法があったんですけどJavaとかそういう言語だとモジュールインポートして使ったりするじゃないですかあれのイメージに近いですあれをJS見てJSで同じようなことをやる感じモジュールがあってそれを取り寄せてきてあとはそれを使うだけみたいな意外とそんなに難しくはない」
「使うのは難しくないと思います。作るのが難しいと思います。なるほど。ありがとうございます。また使ったことある人いたらどんなもんかは聞いてみたいですけどね。知らない世界に気がしますね。だね。コード見たけど結局見るコードでラストとかになるからそっちでわかんねーなってなってました」
「まあそうですよね普通にラストとかCとかCシャープなんでしょうきっとそうなると思いますCシャープじゃないCプラプラか失礼しましたじゃあエンディングどこいいですかお便りありがとうございますっていう話なんですけどありがとうございます今日はWebアセンブルの話しましたが最近やっぱGoogleフォームに」
「募集し始めてからメールがまるっきり来なくなってメールでもいただきたいんですけどねGoogleフォームに来たのをちょっと紹介するんですけどどうしようかな全部売っていいですよねとりあえずさっきのWebアセンブルについて話聞きたいよって話があったのでお話させていただきましたあとは開発で失敗した経験談とかありますかってお話しあったんですけどあんまねえということであれ?」
「あんまない話せる死ぬようなやつはない話せそうなやつありますプチやらかしはありますそうなんですねじゃあちょっと後ほどあるかもしれないですねあとは書いてるコードの計算量が意識できないとエンジニアじゃないのかっていうところについて話してほしいっていうこれも1エピソードいけるんですかねいけなかったら軽く話してもいいかなと思って」
「一瞬で終わると思うですよねなんとなくですけど非機能要件なのかなと思ってて何秒以内にこのくらいの処理ができるように作ってくださいって言われてる非機能要件っていう要件で多分作るソフトってあると思うんですけどそれを満たしてればなんでもいいと思うんですよ僕はそれを満たせるような計算量に抑えれるような書き方をしましょうっていうんですかねうんうん」
「ってことなんじゃない?って思うんですけどどうですか?ノリさんあれだよね計算量っていうかパフォーマンスは意識した方がいいけどじゃあ果たして計算量まで意識するかって言われるとちょっと怖すぎるかもオーダーはでもあるんじゃないですか?マジ?ありがとうございますこれ裏側でこの相当使ってるから計算量はON、ログNみたいなっていうよりはフォアループに二重にしないようにしようとかあーそのくらいですねなるほどねうん」
「わざわざオーダーでは出さないなでもまあでもこれこのいう風な処理の流れにするとデータ量増えた時に計算量増えて大変なことになるなやめようみたいなのはありますねある結構なんか言語特有ので覚えてるかもそうなんですねこれここでこのメソッド読んだら大変だからみたいな大変だからみたいな感じですのでじゅんぺーくんも意識してくださいはい」
「この前までコーディングやってたんですけどちょこちょこ絞られましたねJavaで書くんじゃなくてSQLの方で書いた方がいいよそれはなかなかすごいかもしれないJavaの方で書きたくなりそうじゃないですかどっちで書いていいか判断つかない気がする今の自分だとそもそもSQLの方でそういう書き方できるんだっていうのも知らなかったのでJavaで書いてたんですけど結構コード長くなっちゃってそういうことね」
「SQだったら一文バッて突っ込むだけでいけたそういうこと?計算量じゃなくて可読性の話?保守性とかみたいなちょっとちょろっと紹介させていただきましたあともう一個おすすめのGoogleChrome拡張機能を教えてほしいというものをいただいたんですけど収録日の次の日に配信されますこれが撮ってたと実は撮ってたんですよね撮ってました」
「お楽しみにって感じですねもうこれ出る頃には出てると思うんでそうだねすごいスピードでレスポンスしてくれたぞって思ってるかもしれないんですけど撮ってましたすごい奇跡が起きましたねたまたま撮ってましたあとは何でも書いてっていうところにスプラトゥーン3にハマってますとかやってないゲームやってないんだよな僕らやんないんですよねただとにかく職場では流行ってます僕はあーわかるそう」
「職場というか世界で流行ってる確かに間違いないいろんなとこで見るよね面白いんでしょうけど別に僕もスイッチ持ってるんで買えばできるんですけどやんないんですよね」
「リゾートバイトしてる時にねそこの寮に会ってスプラトゥーンちょっとやってたんですけどマジムズすぎましためっちゃムズい新世代シューティングですよねジャイロコントローラー使うからジャイロコントローラー?そんなの使ったっけ?わかんないですけど照準合わせるんですよシューティングゲームなんで照準合わせるのってかつては3Dスティックとかマウスとかで合わせるんですけどスプラトゥーンは違うんですよジャイロで合わせるんですよ」
「そうだったコントローラーを傾けるのが一番強いとされてるはず一番早いんでそれがこれがまずね僕ら世代にはないんですよね確かにコントローラー傾けて操作するっていうのが確かに」
「でもさゲーム慣れてない時にさゲームするとさ思わず体でやっちゃうみたいなのあるじゃんあるあるですねあれをもう小さい頃に封じすぎてる世代ってこと?そうそうそうそうもうコントローラー固定しちゃうからはいはいはいあれは素人の印みたいなもんじゃないですかそうなんだそうなっちゃったか」
「あとはもう一個多少声量の違いはあると音声がとても聞きやすくて助かります助けてるらしいですねありがとうございます今日からマイクがそうなんですよ実は」
「もしかしたらねあれ音質今回いいんじゃねみたいに思ってる人いたのかないるといいですね配信しきるまで分かんないよねどういう音質になってるか編集しないと分かんないですねこれ良くなってるのを願うマジで悪くなってたらへこむ有名ポッドキャストポッドキャスターの皆さんが勧めたんでそのまんまの構成にしてみましたっていう感じですね言うてものりさんと僕はポッドキャスト始めてもう4年」
「4年ぐらいですね。長いね。4年経ちますからね。機材もいいやつにしましたね。いつからだったかな?ちょっと忘れましたけど。2月か3月。まだ1年経ってないぐらいです。という感じでお便りいただくと、僕ら全部読んでLINEとかで共有してワイワイやって楽しいので。はい」
「個人的な楽しみみんな楽しいでしょみんな楽しいからねぜひ遠慮なく送っていただけると嬉しいです聞きたいこととか調べたけど分からなかったこととかあとツイッターのフィードバックとかね見てるんで絵を指してぜひぜひお願いしますじゃあ今日は終わりましょうかウィスじゃあ皆さんもウェブアセンブリを使って」
「爆速なフロントライフを送ってください結局使うお願いしますバイバイひまじんプログラマーではあなたのフィードバックを募集していますちょっとやりとりしたい人はメール気軽に送りたい人はGoogleフォームツイートをお願いします詳細は説明欄を見てくださいポッドキャストのフォローコメント評価してくれるとバカ騒ぎしますそれではまた次回」
