従来のJavaScriptではWorker間でのデータ共有はできませんでしたが、SharedArrayBufferとAtomics APIを用いればそれが実現できるようになりました。 WorkerはJavaScirptでマルチスレッドを実現するための仕組みです。詳しくは「Web Workersを用いてJavaScriptをマルチスレッド化する」をご覧ください。 Workerは元来メッセージのやりとりのみでデータを共有し、同じメモリの値を共有することはできませんでした。しかし近年になって導入されたSharedArrayBufferで、Worker間のメモリ共有が可能になりました。 SharedArrayBufferは固定長のTypedArrayです。使用するには、単にバイト長を指定してnewするだけです。 // SharedArrayBufferを作成する。 // SharedArrayBu

GPD WIN3を買いました。買った理由はなんとなくです。せっかく買ったので普段やってるゲームがどの程度動くのかなと試してみました。 GPD WIN3って何 小型Windowsパソコンです。ゲーム用途を想定しているのでボタンとかスティックとかがついてます。モバイル向けCore i7とメモリ16GBという構成。昔からのガジェットオタクには「VAIO type U」といえば通じます。 最新のAAAタイトルとかならともかくちょっと前の重めのゲームなら動くいいやつです。良くも悪くも単なるWindowsマシンなのでSteamとかのゲームも動かし放題です。 当時VAIO type Uを買えなかった腹いせに購入しました。15年越しの復讐です。 どの程度のゲームまで遊べるのか GPD WIN3には消費電力の設定があり、消費電力を上げると当然ながら性能も上がります。私はスペックバカなので何も考えず最高の28

長らくの間、JavaScriptはシングルスレッドな言語でした。重い処理を実行するたびにUI処理はブロックされ、マルチコアCPUは上手に使えない、それがJavaScriptの常識でした。ですが、Web Workersがあればそれが変わります。 Web Workersとは JavaScriptは、Workerという処理単位を持ちます。Workerはバックグラウンドで非同期に処理を行うための最も簡単な手法であり、JavaScriptに他の処理を妨げないタスクを実行する手段をもたらします。 しかしなぜWorkerという名前なのでしょうか。プログラマにとってなじみ深い「スレッド」ではいけなかったのでしょうか。 独立したメモリ空間 事実、Workerはスレッドのようなものと言えます。しかしながら、Workerにはプログラマが一般的に想像するスレッドとは少し違う点があります。スレッドというよりかは、ど

Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ

ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU

前回の記事では簡単な2D表示について取り扱った。今回は3D表示について取り扱う。 3D表示とは言っても、2Dのときと大きく変わることはない。WebGLはそもそも3Dグラフィックス用のAPIなのだ。よってせいぜいシェーダを少し書き換えて、ちょっとした行列操作が加わる程度の違いになる。 基礎編 3D編(この記事) アニメーション編 テクスチャ編 前知識 座標ベクトルについて WebGLでは、座標ベクトル(x, y, z, w)は列ベクトルだ。プログラムが横書きである以上、縦に並べることができないので、横書きにしているだけである。よって、数学の教科書に載っている座標変換行列の例と全く同じように考えればよい。 同次座標(Homogeneous Coordinate) WebGLで使用する座標はxyzwの4次元ベクトルである。後述する平行移動を行列の積であらわそうとすると、どうしても1次元増やす必要

フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした

Chrome67およびNode v10（フラグ付き）において、BigIntがサポートされました。BigIntを使えば任意精度の整数値を扱うことができるようになります。 この記事では、BigIntの簡単な使い方を解説します。 Numberの限界とBigInt JavaScriptのNumber（数値型）は倍精度浮動小数点数となります。つまり全体が64bitで、仮数部が52bitです。仮数部が52bitなので、Numberを用いて正確に表せる最大の整数は、53bitで表せる数から1引いた数になり、(2^53 – 1) = 9007199254740991となります。この「正確に表せる最大数」については定数にもなっていて、Number.MAX_SAFE_INTEGERで9007199254740991を得ることもできます。 Numberで表せる最大の整数値は十分な値にも思えますが、分野によっては

ゲームのバグって面白いですよね。進行不可能バグはもちろん論外ですが、ちょっとした不思議なバグはなかなかに楽しめます。 さて、今回話題になったのはWii版（バーチャルコンソール）のマリオ64で、「長時間たつと足場がどんどん浮き上がる」というものです。オリジナル版では起こらず、バーチャルコンソール版だけで起こるというのがミソです。 この摩訶不思議なバグがいったいどうやって起きているのか、確かめていきましょう。 話題のバグ：時間が経つと足場が浮かぶ Automatonなどで記事になった「『スーパーマリオ64』を研究するプレイヤーたちは、Aボタンを押さずステージクリアするために3日間待ち続ける」がゲーマーの間で話題になっています。 このバグは、炎の海から顔を出したり沈んだりするだけの足場が、時間が経つにつれほんの少しずつ炎の海から浮遊するというものです。ゲームを起動したまま3日間放置すると、足場が

関数（Function）は、ほぼ全ての現代的なプログラミング言語が備えている、プログラミングにおける基本的な構成要素です。もちろんJavaScriptも関数を備えています。 関数はシンプルで強力です。ですが、それゆえに多くの人を混乱させることもあります。私が大学のプログラミング実習のティーチングアシスタントを担当していたときも、「関数」でつまずく学生が少なくありませんでした。 関数は普段何気なく呼吸をするように使っているものです。ですが、改めて、関数とは何か、何ができるのか、ということを考え出すと、意外と難しいことに気がつきます。そこで、JavaScriptにおける関数について、いったい何ができるのか、もう一度ゆっくり考え直してみることにしましょう。 関数って何ができるんだっけ 複数の命令をまとめて名前をつける 関数の最も基本的な機能は、複数の命令をひとつにまとめて、名前をつけることです。

WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。 経緯 私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。 「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特

ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ